欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-05-05 21:38:32
...
html代码结构:

复制代码 代码如下:

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

样式:

复制代码 代码如下:

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

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