jquery畫廊效果

2019-12-12 20:28:46

最近一直在學習jquery，有時候學著學著很不想學了，但是還是得堅持努力學習，這個效果弄好好長時間呢，有興趣的快來看看吧，效果很不錯哦，學習其實不是在寫某種效果，主要是理解其中的精髓，徹底的掌握

1

效果雖然看起來很好，但是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>?

>????<li><img src="img/img7.jpg" alt="" title="" /></li>????<li><img src="img/img8.jpg" alt="" title="" /></li>???</ul>??</div>?</div>?

2

當然嘍，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 {posit

ion:absolute;top:0;left:0;margin:-100px 0 0 -100px;}a img {border:none;}

3

因為有點複雜，所以呢，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 });?});});有不懂的地方可以認真鑽研一下，順便可以認識的學習一下基礎知識哦

on(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 });?});});有不懂的地方可以認真鑽研一下，順便可以認識的學習一下基礎知識哦

4

下面來看效果吧，這個呢是滑鼠沒放上去的效果

5

滑鼠放上去效果很不錯的，這個是捕捉瞬間的效果

6

最後的效果呢，差不多是這個樣式的嘀，滑鼠放上去還會恢復原來圖片的大小

jquery畫廊效果

1

2

3

4

5

6

熱門文章