请选择 进入手机版 | 继续访问电脑版

悍铭论坛

 找回密码
 立即注册
查看: 830|回复: 9

[分享]贡献一段内容页面代码 当图片超过设定值时 自动按比例缩小

[复制链接]

47

主题

58

帖子

320

积分

LV3

Rank: 3Rank: 3

积分
320
发表于 2019-12-13 18:15:13 | 显示全部楼层 |阅读模式
[分享]贡献一段内容页面代码 当图片超过设定值时 自动按比例缩小
代码如下:


<script type="text/javascript">
$(function() {
$(".contentzw img").each(function() {
var maxwidth = 800;
if ($(this).width() > maxwidth) {
var oldwidth = $(this).width();
var oldheight = $(this).height();
var newheight = maxwidth/oldwidth*oldheight;
$(this).css({width:maxwidth+"px",height:newheight+"px",cursor:"pointer"});
$(this).attr("title","点击查看原图");
$(this).click(function(){window.open($(this).attr("src"))});
}
});
})
</script>




代码解释:
内容页面   把正文内容div css  设置 contentzw   那么正文里的图片  宽超800px的话  就会按比例缩小   并且 鼠标在上面会有提示   点击查看原图   若宽度小于800 则按原大小显示
一看就知道  需要jq 支持  记得加上jq文件。。。。。


1

主题

19

帖子

104

积分

LV2

Rank: 2

积分
104
发表于 2019-12-13 18:20:06 | 显示全部楼层

支持一下


回复

使用道具 举报

1

主题

14

帖子

81

积分

LV2

Rank: 2

积分
81
发表于 2019-12-13 18:24:58 | 显示全部楼层

看着像是用js去改变css内容


回复

使用道具 举报

3

主题

11

帖子

89

积分

LV2

Rank: 2

积分
89
发表于 2019-12-13 18:29:49 | 显示全部楼层

支持下


回复

使用道具 举报

0

主题

14

帖子

93

积分

LV2

Rank: 2

积分
93
发表于 2019-12-13 18:34:41 | 显示全部楼层

支持一下


回复

使用道具 举报

1

主题

10

帖子

73

积分

LV2

Rank: 2

积分
73
发表于 2019-12-13 18:39:33 | 显示全部楼层

支持下


回复

使用道具 举报

1

主题

6

帖子

61

积分

LV2

Rank: 2

积分
61
发表于 2019-12-13 18:44:26 | 显示全部楼层

也可以写CSS3的代码,当宽超过某个值,等比例缩放。


回复

使用道具 举报

3

主题

12

帖子

95

积分

LV2

Rank: 2

积分
95
发表于 2019-12-13 18:49:18 | 显示全部楼层

支持一下


回复

使用道具 举报

0

主题

1

帖子

35

积分

LV1

Rank: 1

积分
35
发表于 2019-12-13 18:54:11 | 显示全部楼层

支持


回复

使用道具 举报

3

主题

10

帖子

89

积分

LV2

Rank: 2

积分
89
发表于 2019-12-13 18:59:03 | 显示全部楼层

支持

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|悍铭论坛 ( 滇ICP备19004051号-1 )

GMT+8, 2023-2-6 00:38 , Processed in 0.060872 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表