jquery实现页面图片等比例放大缩小功能


Posted in Javascript onFebruary 12, 2014

html代码结构:

<a href=""><img src="images/tmp_376x470.jpg" width="300" height="300" alt=""/></a>
<a href=""><img src="images/tmp_409x265.jpg" width="300" height="300" alt=""/></a>
<a href=""><img src="images/tmp_572x367.jpg" width="300" height="300" alt=""/></a>

样式:

a{width:300px;height:300px;background:#fff;border:1px solid #666;display:inline-block} /* 这里需要指定a标签的高宽,背景和边框为可选 */
脚本(jquery可自行添加):
$(function () {
    var imgs = $('a>img');
    imgs.each(function () {
        var img = $(this);
        var width = img.attr('width');//区域宽度
        var height = img.attr('height');//区域高度
        var showWidth = width;//最终显示宽度
        var showHeight = height;//最终显示高度
        var ratio = width / height;//宽高比
        img.load(function () {
            var imgWidth, imgHeight, imgratio;
            $('<img />').attr('src', img.attr('src')).load(function () {
                imgWidth = this.width;//图片实际宽度
                imgHeight = this.height;//图片实际高度
                imgRatio = imgWidth / imgHeight;//实际宽高比
                if (ratio > imgRatio) {
                    showWidth = height * imgRatio;//调整宽度太小
                    img.attr('width', showWidth).css('margin-left', (width - showWidth) / 2);
                } else {
                    showHeight = width / imgRatio;//调高度太小
                    img.attr('height', showHeight).css('margin-top', (height - showHeight) / 2);
                }
            });
        });
    });
});

这样就是实现了图片的等比例放大缩小了。

Javascript 相关文章推荐
js 限制数字 js限制输入实现代码
Dec 04 Javascript
javascript中的取反再取反~~没有意义
Apr 06 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
Aug 20 Javascript
node.js中的favicon.ico请求问题处理
Dec 15 Javascript
实例解析jQuery工具函数
Dec 01 Javascript
jquery实现自适应banner焦点图
Feb 16 Javascript
layui表格实现代码
May 20 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
Aug 17 Javascript
基于vue开发的在线付费课程应用过程
Jan 25 Javascript
详解vue或uni-app的跨域问题解决方案
Feb 21 Javascript
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
antd日期选择器禁止选择当天之前的时间操作
Oct 29 Javascript
javascript获取web应用根目录的方法
Feb 12 #Javascript
使用javascript控制cookie显示和隐藏背景图
Feb 12 #Javascript
raphael.js绘制中国地图 地图绘制方法
Feb 12 #Javascript
js post提交调用方法
Feb 12 #Javascript
JQuery中操作Css样式的方法
Feb 12 #Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
Feb 12 #Javascript
js判断设备是否为PC并调整图片大小
Feb 12 #Javascript
You might like
php正则表达式(regar expression)
2011/09/10 PHP
常见php数据文件缓存类汇总
2014/12/05 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
php实现数组纵向转横向并过滤重复值的方法分析
2017/05/29 PHP
代码精简的可以实现元素圆角的js函数
2007/07/21 Javascript
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
js获取GridView中行数据的两种方法 分享
2013/07/13 Javascript
JS实现时间格式化的方式汇总
2013/10/16 Javascript
ExtJS4 动态生成的grid导出为excel示例
2014/05/02 Javascript
JS动态增加删除UL节点LI及相关内容示例
2014/05/21 Javascript
JQuery给元素绑定click事件多次执行的解决方法
2014/05/29 Javascript
JavaScript之AOP编程实例
2015/07/17 Javascript
JS数组交集、并集、差集的示例代码
2017/08/23 Javascript
JS实现合并json对象的方法
2017/10/10 Javascript
浅析Vue.js 中的条件渲染指令
2018/11/19 Javascript
如何解决webpack-dev-server代理常切换问题
2019/01/09 Javascript
JavaScript中的事件与异常捕获详析
2019/02/24 Javascript
Javascript操作select控件代码实例
2020/02/14 Javascript
[01:00:26]Ti4主赛事胜者组第一天 EG vs NEWBEE 1
2014/07/19 DOTA
Python函数式编程指南(一):函数式编程概述
2015/06/24 Python
Python爬取国外天气预报网站的方法
2015/07/10 Python
正确理解python中的关键字“with”与上下文管理器
2017/04/21 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
Python检查 云备份进程是否正常运行代码实例
2019/08/22 Python
django中url映射规则和服务端响应顺序的实现
2020/04/02 Python
python使用ctypes库调用DLL动态链接库
2020/10/22 Python
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
2013/10/10 HTML / CSS
使用简单的CSS3属性实现炫酷读者墙效果
2014/01/08 HTML / CSS
利用CSS3把图片变成灰色模式的实例代码
2016/09/06 HTML / CSS
Topshop美国官网:英国快速时尚品牌
2019/05/16 全球购物
求职信格式范本
2013/11/15 职场文书
出国签证在职证明
2014/01/16 职场文书
小学生红领巾广播稿
2015/08/19 职场文书
java设计模式--原型模式详解
2021/07/21 Java/Android
vue项目支付功能代码详解
2022/02/18 Vue.js
python神经网络Xception模型
2022/05/06 Python