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 相关文章推荐
jquery select动态加载选择(兼容各种浏览器)
Feb 01 Javascript
让元素在网页中可拖动示例代码
Aug 13 Javascript
jquery.ui.draggable中文文档(原文翻译)
Nov 15 Javascript
关于Javascript 对象(object)的prototype
May 09 Javascript
js实现发送验证码后的倒计时功能
May 28 Javascript
JavaScript实现自定义媒体播放器方法介绍
Jan 03 Javascript
jQuery日程管理插件fullcalendar使用详解
Jan 07 Javascript
js编写简单的计时器功能
Jul 15 Javascript
微信小程序中使用echarts的实现方法
Apr 24 Javascript
vue通过过滤器实现数据格式化
Jul 20 Javascript
Vue如何实现验证码输入交互
Dec 07 Vue.js
React Fragment介绍与使用详解
Nov 11 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语法速查表
2006/12/06 PHP
Php图像处理类代码分享
2012/01/19 PHP
PHP面向对象的进阶学习(抽像类、接口、final、类常量)
2012/05/07 PHP
PHP中的str_repeat函数在JavaScript中的实现
2013/09/16 PHP
PHP 7.4 新语法之箭头函数实例详解
2019/05/09 PHP
javascript模拟的Ping效果代码 (Web Ping)
2011/03/13 Javascript
JS 控制小数位数的实现代码
2011/08/02 Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
2013/01/03 Javascript
jQuery实现用方向键控制层的上下左右移动
2013/01/13 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
2016/06/17 Javascript
js控制台输出的方法(详解)
2016/11/26 Javascript
微信小程序 wx.uploadFile无法上传解决办法
2016/12/14 Javascript
bootstrap组件之导航组件使用方法
2017/01/19 Javascript
bootstrap daterangepicker汉化以及扩展功能
2017/06/15 Javascript
详解微信小程序 template添加绑定事件
2017/06/23 Javascript
基于Node.js实现压缩和解压缩的方法
2018/02/13 Javascript
js动态引入的四种方法
2018/05/05 Javascript
详解AngularJS 过滤器的使用
2018/06/02 Javascript
python实现中文分词FMM算法实例
2015/07/10 Python
利用python实现命令行有道词典的方法示例
2017/01/31 Python
用pycharm开发django项目示例代码
2018/10/24 Python
基于python分析你的上网行为 看看你平时上网都在干嘛
2019/08/13 Python
python各层级目录下import方法代码实例
2020/01/20 Python
python扫描线填充算法详解
2020/02/19 Python
Python多线程通信queue队列用法实例分析
2020/03/24 Python
Dogeared官网:在美国手工制作的珠宝
2019/08/24 全球购物
荣耀商城:HIHONOR
2020/11/03 全球购物
Servlet如何得到客户端机器的信息
2014/10/17 面试题
社区戒毒工作方案
2014/06/04 职场文书
物理学专业自荐信
2014/06/11 职场文书
天地会口号
2014/06/17 职场文书
2015年技术员工作总结
2015/04/10 职场文书
图书馆义工感想
2015/08/07 职场文书
关爱留守儿童主题班会
2015/08/13 职场文书
HTML5之高度塌陷问题的解决
2022/06/01 HTML / CSS
Win11运行cmd提示“请求的操作需要提升”的两种解决方法
2022/07/07 数码科技