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 相关文章推荐
Array.slice()与Array.splice()的返回值类型
Oct 09 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
Jul 03 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
Sep 22 Javascript
JavaScript中原型和原型链详解
Feb 11 Javascript
基于jQuery实现滚动切换效果
Dec 02 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
Jul 03 Javascript
基于jQuery的表单填充实例
Aug 22 jQuery
vue父组件中获取子组件中的数据(实例讲解)
Sep 27 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
Dec 19 Javascript
Vue底层实现原理总结
Feb 17 Javascript
VUE预渲染及遇到的坑
Sep 03 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
Nov 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
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
php通过array_unshift函数添加多个变量到数组前端的方法
2015/03/18 PHP
yii分页组件用法实例分析
2015/12/28 PHP
php运行报错Call to undefined function curl_init()的最新解决方法
2016/11/20 PHP
PHP如何读取由JavaScript设置的Cookie
2017/03/22 PHP
jQuery之排序组件的深入解析
2013/06/19 Javascript
javascript如何操作HTML下拉列表标签
2015/08/20 Javascript
详解javascript遍历方式
2015/11/11 Javascript
Jquery promise实现一张一张加载图片
2015/11/13 Javascript
Javascript中关于Array.filter()的妙用详解
2016/12/04 Javascript
JavaScript优化以及前段开发小技巧
2017/02/02 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
2017/06/13 Javascript
spirngmvc js传递复杂json参数到controller的实例
2018/03/29 Javascript
vue-cli3全面配置详解
2018/11/14 Javascript
video.js 一个页面同时播放多个视频的实例代码
2018/11/27 Javascript
从零开始实现Vue简单的Toast插件
2018/12/03 Javascript
微信小程序—setTimeOut定时器的问题及解决
2019/07/26 Javascript
vuex存储token示例
2019/11/11 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
2020/02/20 Javascript
Vue+Vant 图片上传加显示的案例
2020/11/03 Javascript
JavaScript字符串转数字的简单实现方法
2020/11/27 Javascript
[05:03]2018DOTA2亚洲邀请赛主赛事首日回顾
2018/04/04 DOTA
python查询sqlite数据表的方法
2015/05/08 Python
Python可变参数*args和**kwargs用法实例小结
2018/04/27 Python
BP神经网络原理及Python实现代码
2018/12/18 Python
Django JWT Token RestfulAPI用户认证详解
2019/01/23 Python
python线程信号量semaphore使用解析
2019/11/30 Python
django 前端页面如何实现显示前N条数据
2020/03/16 Python
Django admin组件的使用
2020/10/24 Python
python进行二次方程式计算的实例讲解
2020/12/06 Python
德国价格合理的品牌商品购物网站:averdo
2019/03/21 全球购物
四风问题自我剖析材料
2014/10/07 职场文书
债务授权委托书范本
2014/10/17 职场文书
单位收入证明范本
2015/06/18 职场文书
劳动合同变更协议书范本
2019/04/18 职场文书
PostgreSQL怎么创建分区表详解
2022/06/25 PostgreSQL