Jquery中文网 www.jquerycn.cn
Jquery中文网 >  jQuery  >  jquery 教程  >  正文 jquery实现页面图片等比例放大缩小功能

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

发布时间:2014-06-30   编辑:www.jquerycn.cn
本文将利用jquery实现页面图片等比例放大和缩小。说明: 页面中经常需要将未知大小的图片展示在有限的空间里, 如果直接指定图片的width和height值, 就有可能造成图片走样, 这段代码就是为解决这个问题设计

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);
                }
            });
        });
    });
});

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

您可能感兴趣的文章:
用jquery等比例控制图片宽高的具体实现
Jquery uploadify图片上传插件无法上传的解决方法
jquery实现鼠标拖动图片效果示例代码
js等比例缩小图片尺寸的例子
jQuery实现等比例缩放大图片让大图片自适应页面布局
jquery实现页面图片等比例放大缩小功能
jQuery实现图片放大预览实现原理及代码
jquery预览图片实现鼠标放上去显示实际大小
JQuery 图片滚动轮播示例代码
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)

关键词: jquery  页面图片  等比例  放大缩小   
[关闭]