DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> jq實現酷炫的鼠標經過圖片翻滾效果
jq實現酷炫的鼠標經過圖片翻滾效果
編輯:JavaScript綜合知識     

 一個酷炫的圖片翻滾效果要實現這個效果並不難,只要思路對了,一切都好辦,下面有個不錯的示例,大家可以參考下

短短的十多行代碼就實現了一個酷炫的圖片翻滾代碼,要實現這個效果並不難,只要思路對了,一切都好辦,不多說了,直接上代碼看效果!    html結構:   代碼如下: <ul class="list">  <li><img src="images/10.jpg" alt="" /><a href="#"><span>1</span></a></li>  <li><img src="images/11.jpg" alt="" /><a href="#"><span>2</span></a></li>  <li><img src="images/12.jpg" alt="" /><a href="#"><span>3</span></a></li>  <li><img src="images/13.jpg" alt="" /><a href="#"><span>4</span></a></li>  <li><img src="images/10.jpg" alt="" /><a href="#"><span>5</span></a></li>  <li><img src="images/11.jpg" alt="" /><a href="#"><span>6</span></a></li>  <li><img src="images/12.jpg" alt="" /><a href="#"><span>7</span></a></li>  <li><img src="images/13.jpg" alt="" /><a href="#"><span>8</span></a></li>    </ul>    css代碼:   代碼如下: *{ margin:0; padding:0;}  .list{ width:640px; margin:100px auto; border:1px solid #ddd; overflow:hidden;}  .list li{ float:left; width:150px; height:80px; overflow:hidden; list-style:none; margin:5px; display:inline; position:relative;}  .list li img{ float:left; width:150px; height:80px; border:none;}  .list li a{ position:absolute; left:0; top:0; width:150px; height:0; background:#999; margin-top:40px; display:inline; text-align:center; line-height:80px; overflow:hidden; color:#fff; text-decoration:none;}    jq代碼(注意要引入jq庫):  代碼如下: $(function () {  $('.list li').hover(function () {  $(this).children('a,img').stop();  $(this).children('img').stop().animate({ 'marginTop': 40, 'height': 0 }, 200, function () {  $(this).siblings('a').stop().animate({ 'height': 80, 'marginTop': 0 }, 200);  });    }, function () {  $(this).children('a,img').stop();  $(this).children('a').stop().animate({ 'height': 0, 'marginTop': 40 }, 200, function () {  $(this).siblings('img').stop().animate({ 'marginTop': 0, 'height': 80 }, 200);    });  });    });    是不是很簡單的幾句jq代碼?親,不妨copy下來看下效果呗! 
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved