jQuery悬停图片放大特效代码

jQuery代码：

    <script>
        $(document).ready(function() {
            $(".zoompic").mouseenter(function () {
                var $this = $(this);
                var $div = $this.find("div");
                $div.eq(0).stop();
                $div.eq(0).css({"top": "0px", "left": "0px", "width": "134px", "height": "121px"});
                $div.eq(0).stop().animate({"top": "-25px", "left": "-25px", "width": "184px", "height": "171px"}, 500);
            }).mouseleave(function () {
                var $this = $(this);
                var $div = $this.find("div");
                $div.eq(0).stop().animate({"top": "0", "left": "0", "width": "134px", "height": "121px"}, 500);
            });
        });
    </script>

$(document).ready(function() {

$(".zoompic").mouseenter(function () {

var $this = $(this);

var $div = $this.find("div");

$div.eq(0).stop();

$div.eq(0).css({"top": "0px", "left": "0px", "width": "134px", "height": "121px"});

$div.eq(0).stop().animate({"top": "-25px", "left": "-25px", "width": "184px", "height": "171px"}, 500);

}).mouseleave(function () {

var $this = $(this);

var $div = $this.find("div");

$div.eq(0).stop().animate({"top": "0", "left": "0", "width": "134px", "height": "121px"}, 500);

});

</script>

HTML代码：

    <div class="zoompic">
        <div style="width:134px;height:121px;position: relative;">
            <a href="/products/tantalum.html"><img src="__IMG__/product1_21.jpg"/></a>
        </div>
    </div>

</div>

CSS代码：

    .zoompic { width:134px; height:121px; overflow: hidden;}
    .zoompic img{ width:100%; height: 100%;}

1 2	.zoompic { width:134px; height:121px; overflow: hidden;} .zoompic img{ width:100%; height: 100%;}

转载请注明：PHP笔记 » jQuery悬停图片放大特效代码

jQuery悬停图片放大特效代码

相关推荐

Hi，您需要填写昵称和邮箱！