当前位置:jQuery学习 > jQuery > jQuery图片缩小效果

jQuery图片缩小效果

时间:2010-10-30QQ群:116983258

前边我们看过使用jQuery预览图片等效果,今天看看使用jQuery实现图片缩小效果。当光标停留在图片上时,图片进行缩小以显示全貌,效果如下图所示:

jQuery图片缩小效果

首先我们看看html标记:

<div class="wrap">
    <a href="#">
	    <img src="images/demo/2010/anyixuan01.jpg" alt=""/>
    </a>
</div>
<div class="wrap">
	<a href="#">
		<img src="images/demo/2010/anyixuan03.jpg" alt=""/>
	</a>
</div>

在这里,因为开始时我们要限制图片的高和宽,所以这里使用div。我们将图片开始的高度和宽度都设置为200px,将图片的宽度和高度分别设置为500px、333px。并适当调整图片相对div的位置,如下:

.wrap{
    width:200px;
    height:200px;
    margin:0px;
    overflow:hidden;
    position:relative;
    float:left;
}
.wrap a img{
    border:none;
    position:absolute;
    top:-66.5px;
    left:-150px;
    height:500px;
    opacity: 0.5;
}

最后看看jQuery代码:

$(document).ready(function() {
    $(".wrap img").hover(
        function() {
            $(this).stop().animate({
                "opacity": "1.0",
                "height": "200px",
                "top": "0px",
                "left": "0px"
            });
        },
        function() {
            $(this).stop().animate({
                "opacity": "0.5",
                "height": "500px",
                "top": "-50px",
                "left": "-150px"
            });
        }
    );
});

可以看出,和上篇使用的方法基本相同,都用到了jQuery animate()方法,即jQuery动画。当光标移动到图片上时,图片高度设置为200px,以便在div中完全显示出来,在此之前已把它的不透明度设置为100%。好了,本篇内容就介绍到这里,希望对您有所帮助。

作者:jQuery学习
除非注明,jQuery学习网文章均为原创,转载时必须以链接形式标明本文地址。
本文地址:http://www.jquery001.com/jquery-zoom-out-effect.html

所有话题