操作方法
效果虽然看起来很好，但是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>
当然喽，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;}
因为有点复杂，所以呢，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 }); }); });有不懂的地方可以认真钻研一下，顺便可以认识的学习一下基础知识哦
下面来看效果吧，这个呢是鼠标没放上去的效果
鼠标放上去效果很不错的，这个是捕捉瞬间的效果
最后的效果呢，差不多是这个样式的嘀，鼠标放上去还会恢复原来图片的大小