jquery画廊效果【百科全说】

最近一直在学习jquery，有时候学着学着很不想学了，但是还是得坚持努力学习，这个效果弄好好长时间呢，有兴趣的快来看看吧，效果很不错哦，学习其实不是在写某种效果，主要是理解其中的精髓，彻底的掌握

操作方法

01

效果虽然看起来很好，但是html代码很简单的<div class="wrapper"> <div class="gallery"> <ul class="reset"> <li><img src="img/img1.jpg" alt="" title="" /></li> <li><img src="img/img2.jpg" alt="" title="" /></li> <li><img src="img/img3.jpg" alt="" title="" /></li> <li><img src="img/img4.jpg" alt="" title="" /></li> <li><img src="img/img5.jpg" alt="" title="" /></li> <li><img src="img/img6.jpg" alt="" title="" /></li> <li><img src="img/img7.jpg" alt="" title="" /></li> <li><img src="img/img8.jpg" alt="" title="" /></li> </ul> </div> </div>
02

当然喽，css也很简单的body {font-family:Arial, Helvetica, sans-serif;background:#fff;font-size:11px;} .wrapper {margin:200px auto 0;width:840px;} ul.reset, ul.reset li {display:block;list-style:none;padding:0;margin:0;} .gallery ul li {width:200px;height:200px;margin:0 10px 10px 0;float:left;position:relative;} .holder {position:absolute;top:0;left:0;margin:-100px 0 0 -100px;} a img {border:none;}
03

因为有点复杂，所以呢，js也会麻烦了点 $(function(){ var li = $('.gallery').find('li'); li.each(function(i){ var t = $(this), img = t.find('img'), src = img.attr('src'), width = li.width(), height = li.height(); img.hide().after($('<div />').attr('id', 'holder'+i).addClass('holder')); var r = Raphael('holder'+i, width*2, height*2), rimg = r.image(src, width/2, height/2, width, height); rimg.hover(function(event) { this.animate({ scale: 2, rotation : 360 }, 1200, 'elastic'); }, function (event) { this.animate({ scale: 1, rotation : 0 }, 1200, 'elastic'); }); }); li.hover(function(){ li.css({ 'z-index': 1 }); $(this).css({ 'z-index': 2 }); }); });有不懂的地方可以认真钻研一下，顺便可以认识的学习一下基础知识哦
04

下面来看效果吧，这个呢是鼠标没放上去的效果
05

鼠标放上去效果很不错的，这个是捕捉瞬间的效果
06

最后的效果呢，差不多是这个样式的嘀，鼠标放上去还会恢复原来图片的大小

jquery画廊效果

操作方法

相关推荐