jquery简单的图片放大特效

旧版博客 ayflying 1019℃ 评论

只需要一点简单的代码,就可以使用了,效果演示

是不是很漂亮,而且使用很方便,只需要在图片上面增加一个class="pic"就可以了!\

<div style="position:relative;height:320px;">
	<img src="/uploads/ueditor/image/201607/5794dae817229.jpg" height="100%" class="pic" style="position:absolute;"/>
</div>
<script>
	$w = $('.pic').width();
	$h = $('.pic').height();
	$w2 = $w + 20;
	$h2 = $h + 20;
	$('.pic').hover(function(){
		$(this).stop().animate({
			height:$h2,width:$w2,left:"-10px",top:"-10px"
		},500);
	},function(){
		$(this).stop().animate({
			height:$h,width:$w,left:"0px",top:"0px"
		},500);
	});	
});
</script>


转载请注明:七彩悠悠博客 | 心悠悠 情悠悠 » jquery简单的图片放大特效

高效,专业,悠悠博客

联系我们