这是一款js鼠标放到图片上图片放大拉近,自动出现文字简介特效展示,非常适合用来做网站的产品展示效果,会让网站增添不少色彩。
引入jquery与CSS后 直接调用如下代码即可
<script> $(document).ready(function() { var move = -15 zoom = 1.1; $('.item').hover(function() { width = $('.item').width() * zoom; height = $('.item').height() * zoom; $(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:300}); $(this).find('div.caption').stop(false,true).fadeIn(300); }, function() { $(this).find('img').stop(false,true).animate({'width':$('.item').width(), 'height':$('.item').height(), 'top':'0', 'left':'0'}, {duration:300}); $(this).find('div.caption').stop(false,true).fadeOut(400); }); }); </script>