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 相关文章推荐
json 实例详细说明教程
Oct 31 Javascript
jQuery技巧总结
Jan 01 Javascript
uploadify在Firefox下丢失session问题的解决方法
Aug 07 Javascript
原生javascript实现DIV拖拽并计算重复面积
Jan 02 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 Javascript
js中实现字符串和数组的相互转化详解
Jan 24 Javascript
如何编写jquery插件
Mar 29 jQuery
微信小程序实现列表下拉刷新上拉加载
Jul 29 Javascript
JS中Promise函数then的奥秘探究
Jul 30 Javascript
Angular 实现输入框中显示文章标签的实例代码
Nov 07 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
Apr 15 Javascript
vue 实现路由跳转时更改页面title
Nov 05 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使用内置函数file_put_contents写入文件及追加内容的方法
2015/12/07 PHP
php实现压缩合并js的方法【附demo源码下载】
2016/09/22 PHP
PHP实现的统计数据功能详解
2016/12/06 PHP
JS代码格式化和语法着色V2
2006/10/14 Javascript
javascript 语法基础 想学习js的朋友可以看看
2009/12/16 Javascript
jQuery 树形结构的选择器
2010/02/15 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
2013/11/27 Javascript
jQuery的:parent选择器定义和用法
2014/07/01 Javascript
js使用for循环查询数组中是否存在某个值
2014/08/12 Javascript
javascript实现在线客服效果
2015/07/15 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
2015/08/26 Javascript
谈谈jQuery之Deferred源码剖析
2016/12/19 Javascript
React组件生命周期详解
2017/07/03 Javascript
ES6正则表达式扩展笔记
2017/07/25 Javascript
vue微信分享到朋友圈 vue微信发送给好友
2018/11/28 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
2019/01/22 Javascript
[01:05:29]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第二场 1月24日
2021/03/11 DOTA
使用graphics.py实现2048小游戏
2015/03/10 Python
Python爬取APP下载链接的实现方法
2016/09/30 Python
python挖矿算力测试程序详解
2019/07/03 Python
Python 中 -m 的典型用法、原理解析与发展演变
2019/11/11 Python
win10从零安装配置pytorch全过程图文详解
2020/05/08 Python
pytorch随机采样操作SubsetRandomSampler()
2020/07/07 Python
解决python pandas读取excel中多个不同sheet表格存在的问题
2020/07/14 Python
基于Python的接口自动化读写excel文件的方法
2021/01/15 Python
Html5移动端弹幕动画实现示例代码
2018/08/27 HTML / CSS
Ramy Brook官网:美国现代女装品牌
2019/06/18 全球购物
Myprotein荷兰官网:欧洲第一运动营养品牌
2020/07/11 全球购物
先进党支部事迹材料
2014/01/13 职场文书
年会主持词结束语
2014/03/27 职场文书
村干部四风问题整改措施
2014/09/30 职场文书
安全员岗位职责范本
2015/04/11 职场文书
党员读书活动心得体会
2016/01/14 职场文书
MySQL安装后默认自带数据库的作用详解
2021/04/27 MySQL
python 下划线的多种应用场景总结
2021/05/12 Python
宝塔更新Python及Flask项目的部署
2022/04/11 Python