用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上都能实现控制图片显示时的最大宽度。
相关文章
本篇文章主要介绍了jQuery中Nicescroll滚动条插件的用法，Nicescroll滚动条插件是一个非常强大的基于jQuery的滚动条插件，有需要的可以了解下。2016-11-11
这篇文章介绍了解决IE9下JQuery发送ajax请求失效的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
在一个客户的case中遇到需要在SharePoint Calendar试图里面根据一定的规则来显示或者隐藏记录，为了取得记录的handle，可以通过超链接选择器来查找2011-05-05
grumble.js 是一个很特别的气泡形状提示控件，最开始是为 Huddle.com 网站开发的, 它没有通常的north/east/south/west的定位限制。2014-05-05
下面小编就为大家带来一篇jQuery实现拼图小游戏(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了jQuery制作简单柱状图的方法,实例分析了html与css布局以及jQuery功能的具体实现方法,需要的朋友可以参考下2015-01-01
浅析onsubmit校验表单时利用ajax的return false无效问题
前几天，在校验一个表单数据用到ajax时，遇到 return false 无效问题,以下就是对这个问题进行了分析介绍，需要的朋友可以参考下2013-07-07
滚动条下拉DIV固定在头部不动效果，想必很多的朋友都有见到过吧，下面为大家详细介绍下使用jquery是如何实现的，感兴趣的朋友可以参考下2013-11-11
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
这篇文章主要介绍了详解JavaScript中jQuery和Ajax以及JSONP的联合使用,jQuery库和Ajax异步结构以及JSON数据传输也是JS日常编程中最常用到的东西,需要的朋友可以参考下2015-08-08
日期函数在程序开发中是一个重要的工具,js也提供了Date()函数,如获取当前时间,当前年月,已经系统时间的毫秒数。2016-10-10
最新评论