用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 相关文章推荐
jquery设置控件位置的方法
Aug 21 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
Dec 06 Javascript
jQuery中(function($){})(jQuery)详解
Jul 15 Javascript
跟我学习javascript的函数调用和构造函数调用
Nov 16 Javascript
Bootstrap导航条学习使用(二)
Feb 08 Javascript
vue2.0实战之基础入门(1)
Mar 27 Javascript
Node解决简单重复问题系列之Excel内容的获取
Jan 02 Javascript
vue 过滤器filter实例详解
Mar 14 Javascript
详解vuex结合localstorage动态监听storage的变化
May 03 Javascript
微信小程序修改swiper默认指示器样式的实例代码
Jul 18 Javascript
vue-cli3.0 环境变量与模式配置方法
Nov 08 Javascript
更优雅的微信小程序骨架屏实现详解
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代码(抓取网页中的邮箱地址)
2012/07/17 PHP
ThinkPHP CURD方法之field方法详解
2014/06/18 PHP
PHP生成静态HTML页面最简单方法示例
2015/04/09 PHP
Laravel5框架添加自定义辅助函数的方法
2018/08/01 PHP
Laravel5.1框架注册中间件的三种场景详解
2019/07/09 PHP
JavaScript CSS修改学习第二章 样式
2010/02/19 Javascript
JQuery的html(data)方法与<script>脚本块的解决方法
2010/03/09 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
2014/10/31 Javascript
JavaScript运算符小结
2015/06/03 Javascript
原生javascript实现匀速运动动画效果
2016/02/26 Javascript
基于JavaScript代码实现自动生成表格
2016/06/15 Javascript
获取IE浏览器Cookie信息的方法
2017/01/23 Javascript
vue省市区三联动下拉选择组件的实现
2017/04/28 Javascript
前端主流框架vue学习笔记第一篇
2017/07/26 Javascript
nuxt框架中路由鉴权之Koa和Session的用法
2018/05/09 Javascript
详解easyui基于 layui.laydate日期扩展组件
2018/07/18 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
2018/09/04 Javascript
js实现下拉框二级联动
2018/12/04 Javascript
三步搞定:Vue.js调用Android原生操作
2020/09/07 Javascript
Android 兼容性问题:java.lang.UnsupportedOperationException解决办法
2017/03/19 Python
Python利用itchat对微信中好友数据实现简单分析的方法
2017/11/21 Python
利用python的socket发送http(s)请求方法示例
2018/05/07 Python
canvas绘制文本内容自动换行的实现代码
2019/01/14 HTML / CSS
HTML5中div、article、section的区别及使用介绍
2013/08/14 HTML / CSS
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
2019/07/09 HTML / CSS
日本非常有名的内衣丝袜品牌:GUNZE
2017/01/06 全球购物
优衣库澳大利亚官网:UNIQLO澳大利亚
2017/01/18 全球购物
Nike德国官网:Nike.com (DE)
2018/11/13 全球购物
GafasWorld西班牙:购买太阳镜、眼镜和隐形眼镜
2019/09/08 全球购物
办加油卡单位介绍信
2014/01/09 职场文书
婚前协议书怎么写
2014/04/15 职场文书
少先队活动总结
2014/08/29 职场文书
2014国庆节国旗下演讲稿(精选版)
2014/09/26 职场文书
村主任当选感言
2015/08/01 职场文书
工厂无线对讲系统解决方案
2022/02/18 无线电
90后经典动画片排行:《数码宝贝》第二,《小鲤鱼历险记》在榜
2022/03/18 日漫