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>