用jquery等比例控制图片宽高的具体实现
更新时间：2014年01月28日 16:43:19 投稿：whsnow
控制图片宽高的方法有很多，下面为大家介绍下使用jquery是如何实现的，感兴趣的朋友可以学习下
核心代码：
$(function() {
$(".dvcontent img").each(function() {
var maxwidth = 520;
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"))});
}
});
});
如果上面的代码不能执行，可以使用下面的代码：
$(window).load(function() {
$(".dvcontent img").each(function() {
var maxwidth = 600;
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"))});
}
});
});
通过css还有一种方法兼容IE6能让图片在超过规定的宽度时自动按比例缩小，但该写法不符合W3C标准。代码如下：
.cate img{
max-width: 600px;
height:auto;
width:expression(this.width > 600 ? "600px" : this.width);
}
所以在做到尽量兼容IE和其他浏览器以及符合W3C的标准下就通过js来控制图片的宽度了，下面使用jquery控制图片显示时的最大宽度，主代码如下：
$(window).load(function() {
$(".cate img").each(function() {
var maxwidth = 600;
if ($(this).width() > maxwidth) {
$(this).width(maxwidth);
}
});
});
代码很简单，就是cate样式下的所以img的最大宽度只能为600px。.each(function(){......})，each在这里是对指定的图片集合对象逐一调用下面的方法。这种jquery方法在IE6及以上浏览器和chrome及Firefox上都能实现控制图片显示时的最大宽度。
相关文章
当鼠标移动到图片上时，跟随鼠标显示放大显示的图片，具体效果情况截图，另附送源码，感兴趣的朋友可以学习下哈2013-06-06
本文为大家介绍下jquery获得option的值和对option的操作，下面有不错的示例分析及示例代码，感兴趣的朋友可以了解下2013-12-12
这篇文章主要介绍了jquery文档操作wrap()方法,以实例形式简单分析了wrap()方法用某个标签将某个元素包起来的使用技巧,需要的朋友可以参考下2015-01-01
JQuery，是轻量级的js库,把繁琐的js代码封装，使调用更简单，完成更多功能。同样，封装了js利用XMLHttpRequest实现的异步刷新.2011-03-03
这篇文章主要介绍了jQuery常用数据处理方法,实例总结了trim、param、isArray、isFunction、each等jQuery常用的数据处理方法,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
JQuery+div+css 无限级联树实现代码，需要的朋友可以参考下。2010-03-03
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
本文为大家介绍下将DIV的滚动条滚动到其子元素所在的位置，方便自动定位,需要的朋友可以参考下2014-05-05
使用CSS()方法改变现有的CSS样式表，css()方法在使用上具有多样性，比如要改变链接颜色，如果需要改变多个样式属性，可先定义属性变量，然后直接赋值给css()方法2014-09-09
animate动画示例(泪奔的小孩)及stop和delay的使用
实现原理：停止动画，当一个元素有一个动画队列时，停止的是当前动画，紧接着执行下一个动画，具体代码如下，感兴趣的朋友可以参考下哈，希望对你学习jquery动画有所帮助2013-05-05
这篇文章主要介绍了jQuery实现数字华容道小游戏功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2020-01-01
最新评论