jq實現酷炫的鼠標經過圖片翻滾

　　學習前端的同學你們知道j怎么通過jq實現酷炫的鼠標經過圖片翻滾效果嗎?不知道的話跟著學習啦小編一起來學習jq實現酷炫的鼠標經過圖片翻滾效果。

　　jq實現酷炫的鼠標經過圖片翻滾效果的方法

　　代碼如下:

　　<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下來看下效果唄!

猜你喜歡：

1.jquery設置鼠標右鍵方法

2.如何用jquery實現右鍵菜單

3.請求ajax失敗或者不執行怎么辦開發中會經常用到jquery中的ajax...

4.id調用js方法

5.鼠標事件屬性詳解

6.基于WebRTC的瀏覽器端Web服務器的研究論文