jquery实现页面图片等比例放大缩小功能
更新时间:2014年02月12日 11:16:30 作者:
本文将利用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 淡入淡出 png图在ie8下有黑色边框的解决方法
本文章介绍了,jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法,需要的朋友可以参考一下2013-03-03jQuery中对未来的元素绑定事件用bind、live or on
这篇文章主要介绍了jQuery中对未来的元素绑定事件用bind、live or on,需要的朋友可以参考下2014-04-04jQuery实现百度图片移入移出内容提示框上下左右移动的效果
这篇文章主要介绍了jQuery实现百度图片移入移出内容提示框上下左右移动的效果,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下2018-06-06jQuery对话框插件ArtDialog在双击遮罩层时出现关闭现象的解决方法
这篇文章主要介绍了jQuery对话框插件ArtDialog在双击遮罩层时出现关闭现象的解决方法,涉及针对插件源码的修改,需要的朋友可以参考下2016-08-08
最新评论