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

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

php中文网

发布： 2016-05-16 17:00:31

原创

1563人浏览过

html代码结构:

标准小型企业网站

包括完整的产品展示，精美留言本，经理致辞，公司简介，联系我们等，其中本系统的产品展示可以实现三级分类，无限产品后台自由添加。包含产品快速导航，产品简介，下订单，产品成分说明，常见问题说明，大小缩略图等非常实用的功能产品管理页面：/HBYYDS/product/admin/login.asp 管理帐号及密码均为admin

查看详情

复制代码代码如下:

样式:

复制代码代码如下:

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;
            $(' jquery实现页面图片等比例放大缩小功能_jquery

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

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