js实现将图片裁切成方形显示，鼠标移入放大效果

Dome下载 效果如图：



css：

#clip { width: 306px; zoom: 1; }

#clip:after {
content: "";
display: block;
height: 0;
clear: both;
}

#clip li {
float: left;
width: 100px;
height: 100px;
margin: 1px;
position: relative;
_display: inline;
}

#clip li .small_img {
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
}

html：

<ul id="clip">

<li><div class="small_img"><a href="#"><img
src="images/1.jpg" alt=""></a></div></li>

<li><div class="small_img"><a href="#"><img
src="images/2.jpg" alt=""></a></div></li>

<li><div class="small_img"><a href="#"><img
src="images/3.jpg" alt=""></a></div></li>

<li><div class="small_img"><a href="#"><img
src="images/4.jpg" alt=""></a></div></li>

<li><div class="small_img"><a href="#"><img
src="images/5.jpg" alt=""></a></div></li>

<li><div class="small_img"><a href="#"><img
src="images/6.jpg" alt=""></a></div></li>
</ul>

javascript：

<script type="text/javascript" src="script/jquery-1.8.3.min.js"></script>
<script>
$(function () {
$("#clip>li").each(function () {
var $this = $(this).find("img");
var width = $this.width();
var height = $this.height();
var newWidth,newHeight;
if (width > height) {
newWidth = width / (height / 100);
$this.css({
"position": "absolute",
"top": "0",
"left": "50%",
"margin-left": parseInt(-newWidth/2) + "px",
"height": "100px"
});
}
else if (width == height) {
$this.css({
"width": "100px"
});
}
else {
newHeight = height / (width / 100);
$this.css({
"position": "absolute",
"top": "50%",
"left": "0",
"margin-top": parseInt(-newHeight/2) + "px",
"width": "100px"
});
}

var newImg = $this.clone();

$(this).hover(
function () {
$(this).append(newImg.removeAttr("style"));
newImg.css({
"width": "202px",
"position": "absolute",
"top": "0",
"left": "0",
"z-index": "10",
"display": "none"
}).show("fast");
},
function () {
newImg.hide("fast",function () {$(this).remove()});
}
)

});
})
</script>