jquery画廊效果

来源：互联网 2023-03-17 00:52:04 302

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

jquery画廊效果

工具/原料

P>找几张相关的图片/P>
P>相关制作软件 /P>

方法/步骤

效果虽然看起来很好，但是html代码很简单的div >div >ul >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;}

2本页面未经授权抓取自百度经验

因为有点复杂，所以呢，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 });});});有不懂的地方可以认真钻研一下，顺便可以认识的学习一下基础知识哦

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

jquery画廊效果