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 相关文章推荐
HTML颜色选择器实现代码
Nov 23 Javascript
Javascript异步编程模型Promise模式详细介绍
May 08 Javascript
采用call方式实现js继承
May 20 Javascript
纯JS实现旋转图片3D展示效果
Apr 12 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
May 28 Javascript
jQuery手机拨号界面特效代码分享
Aug 27 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
Dec 04 Javascript
VUE前端cookie简单操作
Oct 17 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
Feb 24 Javascript
js中null与空字符串&quot;&quot;的区别讲解
Jan 17 Javascript
Vue2.x通用编辑组件的封装及应用详解
May 28 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
Aug 10 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
UCenter中的一个可逆加密函数authcode函数代码
2010/07/20 PHP
PHP输出当前进程所有变量/常量/模块/函数/类的示例
2013/11/07 PHP
php验证session无效的解决方法
2014/11/04 PHP
thinkphp3.x中display方法及show方法的用法实例
2016/05/19 PHP
[原创]php正则删除html代码中class样式属性的方法
2017/05/24 PHP
CSS中一些@规则的用法小结
2021/03/09 HTML / CSS
asp.net HttpHandler实现图片防盗链
2009/11/09 Javascript
基于jquery和svg实现超炫酷的动画特效
2014/12/09 Javascript
jQuery中:file选择器用法实例
2015/01/04 Javascript
javascript日期格式化方法小结
2015/12/17 Javascript
javascript实现图片轮播效果
2016/01/20 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
2016/06/22 Javascript
Node.js 8 中的 util.promisify的详解
2017/06/12 Javascript
node.js express中app.param的用法详解
2017/07/16 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
2017/12/08 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
2019/05/21 Javascript
vue实现移动端省市区选择
2019/09/27 Javascript
一看就会的vuex实现登录验证(附案例)
2020/01/09 Javascript
[06:25]DOTA2英雄梦之声_第17期_大地之灵
2014/06/20 DOTA
[39:02]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs VGJ.T
2018/04/01 DOTA
Python和perl实现批量对目录下电子书文件重命名的代码分享
2014/11/21 Python
Python实现图像几何变换
2015/07/06 Python
基于python中staticmethod和classmethod的区别(详解)
2017/10/24 Python
Python实现可获取网易页面所有文本信息的网易网络爬虫功能示例
2018/01/15 Python
python Celery定时任务的示例
2018/03/13 Python
使用tensorflow实现线性回归
2018/09/08 Python
Python语言快速上手学习方法
2018/12/14 Python
Python 多线程,threading模块,创建子线程的两种方式示例
2019/09/29 Python
基于Python中的yield表达式介绍
2019/11/19 Python
python3实现弹弹球小游戏
2019/11/25 Python
基于python中__add__函数的用法
2019/11/25 Python
python实现人脸签到系统
2020/04/13 Python
Python实现曲线拟合的最小二乘法
2021/02/19 Python
HTML5学习笔记之html5与传统html区别
2016/01/06 HTML / CSS
党支部书记先进事迹
2014/01/17 职场文书
Redis中缓存穿透/击穿/雪崩问题和解决方法
2021/12/04 Redis