鼠标经过图片缩小显示效果的jQuery图片缩放代码
- 作者:网页模板
- 大小:0.29MB
- 点击次数:
- 发布时间:2014-04-18 11:08
特效介绍
鼠标经过图片缩小显示效果的jQuery图片缩放代码,当鼠标滑过图片时,该图片会缩小以显示的更全更清晰,并且会高亮显示,并且周围图片会模糊放大。使用方法
1、在head区域引入下面的css样式和js代码:<link rel="stylesheet" type="text/css" href="css/index.css" /> <script type="text/javascript" src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script> <script type="text/javascript"> $(function() { $('#col img').hover( function(){ var $this = $(this); $this.stop().animate({'opacity':'1.0','height':'200px','top':'0px','left':'0px'}); }, function(){ var $this = $(this); $this.stop().animate({'opacity':'0.5','height':'500px','top':'-66.5px','left':'-150px'}); } ); }); </script>2、把以下代码拷贝到你想引用的地方
<div id="col"> <div class="pic"> <a href="http://www.5imoban.net/" target="_blank"> <img src="images/veerles-blog_1.jpg" alt="veerles-blog"/> </a> </div> <div class="pic"> <a href="http://www.5imoban.net" target="_blank"> <img src="images/veerles-blog_2.jpg" alt="veerles-blog"/> </a> </div> <div class="pic"> <a href="http://www.5imoban.net" target="_blank"> <img src="images/veerles-blog_3.jpg" alt="veerles-blog"/> </a> </div> <div class="pic"> <a href="http://www.5imoban.net" target="_blank"> <img src="images/veerles-blog_4.jpg" alt="veerles-blog"/> </a> </div> <div class="pic"> <a href="http://www.5imoban.net" target="_blank"> <img src="images/pics_relove_b.jpg" alt="relove"/> </a> </div> <div class="pic"> <a href="http://www.5imoban.net" target="_blank"> <img src="images/flowergirl-full.jpg" alt="flowergirl"/> </a> </div> </div>
- 本文标签:
- jQuery图片缩放代码