用jquery等比例控制图片宽高的具体实现


Posted in Javascript onJanuary 28, 2014

核心代码:

$(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上都能实现控制图片显示时的最大宽度。

Javascript 相关文章推荐
javascript 对表格的行和列都能加亮显示
Dec 26 Javascript
JavaScript中继承的一些示例方法与属性参考
Aug 07 Javascript
Firefox中beforeunload事件的实现缺陷浅析
May 03 Javascript
javascript学习笔记(十三) js闭包介绍(转)
Jun 20 Javascript
javascript常用代码段搜集
Dec 04 Javascript
Laravel中常见的错误与解决方法小结
Aug 30 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
react-router 路由切换动画的实现示例
Dec 03 Javascript
koa2 从入门到精通(小结)
Jul 23 Javascript
vue 导航内容设置选中状态样式的例子
Nov 01 Javascript
深入理解Antd-Select组件的用法
Feb 25 Javascript
在vue中使用Base64转码的案例
Aug 07 Javascript
jQuery实现当按下回车键时绑定点击事件
Jan 28 #Javascript
用js正确判断用户名cookie是否存在的方法
Jan 28 #Javascript
原生javascript实现无间缝滚动示例
Jan 28 #Javascript
IE、FF浏览器下修改标签透明度
Jan 28 #Javascript
纯css+js写的一个简单的tab标签页带样式
Jan 28 #Javascript
把字符串按照特定的字母顺序进行排序的js代码
Jan 28 #Javascript
js格式化金额可选是否带千分位以及保留精度
Jan 28 #Javascript
You might like
php设计模式 Factory(工厂模式)
2011/06/26 PHP
php调用nginx的mod_zip模块打包ZIP文件
2014/06/11 PHP
PHP面试常用算法(推荐)
2016/07/22 PHP
PHP利用超级全局变量$_GET来接收表单数据的实例
2016/11/05 PHP
用javascript获取地址栏参数
2006/12/22 Javascript
window.showModalDialog使用手册
2007/01/11 Javascript
获取焦点时,利用js定时器设定时间执行动作
2010/04/02 Javascript
jQuery验证Checkbox是否选中的代码 推荐
2011/09/04 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
2016/04/06 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
2016/05/07 Javascript
JavaScript常用代码书写规范的超全面总结
2016/09/11 Javascript
对javascript继承的理解
2016/10/11 Javascript
js的OOP继承实现(必看篇)
2017/02/18 Javascript
vue移动端实现红包雨效果
2020/06/23 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
2020/03/11 Javascript
python写入已存在的excel数据实例
2018/05/03 Python
Python3标准库之functools管理函数的工具详解
2020/02/27 Python
自学python用什么系统好
2020/06/23 Python
带你学习Python如何实现回归树模型
2020/07/16 Python
基于python调用jenkins-cli实现快速发布
2020/08/14 Python
Django中的DateTimeField和DateField实现
2021/02/24 Python
Css3新特性应用之视觉效果实例
2016/12/12 HTML / CSS
Guess美国官网:美国知名服装品牌
2019/04/08 全球购物
泰国国际航空公司官网:Thai Airways International
2019/12/04 全球购物
什么叫做SQL注入,如何防止
2016/10/04 面试题
机械专业个人求职自荐信格式
2013/09/21 职场文书
金融专业应届生求职信
2013/11/02 职场文书
企划经理的岗位职责
2013/11/17 职场文书
售后服务经理岗位职责范本
2014/02/22 职场文书
2014年煤矿工人工作总结
2014/12/08 职场文书
小王子读书笔记
2015/06/29 职场文书
干部培训简讯
2015/07/20 职场文书
高中优秀作文(范文)
2019/08/15 职场文书
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
2021/08/23 HTML / CSS
js不常见操作运算符总结
2021/11/20 Javascript
Python线程池与GIL全局锁实现抽奖小案例
2022/04/13 Python