JavaScript图片等比例缩放
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
function Test() { }
Test.prototype = {
zoomImg: function () {
var imgObj = $("#imgList").find("img");
$.each(imgObj, function (index) {
var width = $("#imgDiv_" + index + "").width();
var height = $("#imgDiv_" + index + "").height();
var img = new Image();
img.src = imgObj[index].src;
var w = img.width;
var h = img.height;
if (w >= width) {
height = (width * h) / w;
}
if (h >= height) {
width = (height * w) / h;
}
$("#imgDiv_" + index + "").find("img").css("width", width);
$("#imgDiv_" + index + "").find("img").css("height", height);
});
}
}
$(function () {
Test.prototype.zoomImg();
});
</script>
<div id="imgList" style="width:1000px; height:400px;">
<div id="imgDiv_0" style="height:400px;width:800px; border:1px solid #e5e5e5;">
<img src="/images/a.jpg" />
</div>
<div id="imgDiv_1" style="height:400px;width:800px; border:1px solid #e5e5e5;">
<img src="/images/a.jpg" />
</div>
<div id="imgDiv_2" style="height:400px;width:800px; border:1px solid #e5e5e5;">
<img src="/images/a.jpg" />
</div>
<div id="imgDiv_3" style="height:400px;width:800px; border:1px solid #e5e5e5;">
<img src="/images/a.jpg" />
</div>
<div id="imgDiv_4" style="height:400px;width:800px; border:1px solid #e5e5e5;">
<img src="/images/a.jpg" />
</div>
<div id="imgDiv_5" style="height:400px;width:800px; border:1px solid #e5e5e5;">
<img src="/images/a.jpg" />
</div>
</div>
将来的你,一定会感谢现在努力的自己!

浙公网安备 33010602011771号