您的位置：首页 > Web前端 > JQuery

jQuery制作图片的等比例缩放

2013-08-22 14:13 344 查看

1资料的排版

2.html代码

<body>
<div class="BB"><img src="dw.jpg"  alt="动物" onload="setPic($(this))"/></div>
<div class="BB"><img src="dw1.jpg"  alt="动物" onload="setPic($(this))"/></div>
<div class="BB"><img src="yy.jpg" alt="人" onload="setPic($(this))" /></div>
</body>

3.css代码

<style type="text/css">
.BB{ width:100px; height:80px; border:1px solid red; overflow:hidden; margin-top:10px; float:left; margin-left:10px; text-align:center; line-height:100px; position:relative;}
img{position:relative;}
</style>

4.js代码

<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var BNImg = {
iconW: 100,
iconH: 80,
getOriginPicWandH: function (imgObj) {
return { width: imgObj.width(), height: imgObj.heght() };
},
setPicWandH: function (imgObj) {
var originW = imgObj.width();
var originH = imgObj.height();
var maxWorH = originW >= originH ? { w: originW} : { h: originH };
var originRate = originW / originH;
if (maxWorH.w) {
imgObj.width(BNImg.iconW);
var newH = BNImg.iconW / originRate
imgObj.height(newH);
var top = (BNImg.iconH - newH) / 2;
imgObj.css("top",top+"px");
}
else if (maxWorH.h) {
imgObj.height(BNImg.iconH);
imgObj.width(originRate * BNImg.iconH);
}
}
};
function setPic(obj) {
BNImg.setPicWandH(obj);
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航