jq實(shí)現(xiàn)酷炫的鼠標(biāo)經(jīng)過(guò)圖片翻滾效果
更新時(shí)間：2014年03月12日 16:03:47 作者：
一個(gè)酷炫的圖片翻滾效果要實(shí)現(xiàn)這個(gè)效果并不難，只要思路對(duì)了，一切都好辦，下面有個(gè)不錯(cuò)的示例，大家可以參考下
短短的十多行代碼就實(shí)現(xiàn)了一個(gè)酷炫的圖片翻滾代碼，要實(shí)現(xiàn)這個(gè)效果并不難，只要思路對(duì)了，一切都好辦，不多說(shuō)了，直接上代碼看效果！
html結(jié)構(gòu)：
<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庫(kù)）：
$(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);
});
});
});
是不是很簡(jiǎn)單的幾句jq代碼？親，不妨copy下來(lái)看下效果唄！
html結(jié)構(gòu)：
復(fù)制代碼 代碼如下:
<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代碼：
復(fù)制代碼 代碼如下:
*{ 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庫(kù)）：
復(fù)制代碼 代碼如下:
$(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);
});
});
});
是不是很簡(jiǎn)單的幾句jq代碼？親，不妨copy下來(lái)看下效果唄！
您可能感興趣的文章:
- 兼容ie和firefox的鼠標(biāo)經(jīng)過(guò)(onmouseover和onmouseout)實(shí)現(xiàn)--簡(jiǎn)短版
- js實(shí)現(xiàn)圖片顯示局部，鼠標(biāo)經(jīng)過(guò)顯示全部的效果
- Javascript實(shí)現(xiàn)的鼠標(biāo)經(jīng)過(guò)時(shí)播放聲音
- 鼠標(biāo)經(jīng)過(guò)導(dǎo)航菜單時(shí)顏色改變效果
- javascript學(xué)習(xí)筆記（二） 鼠標(biāo)經(jīng)過(guò)時(shí)，改變div塊的背景色的代碼
- javascript中onmouse事件在div中失效問(wèn)題的解決方法
- jquery插件實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)圖片右側(cè)顯示大圖的效果(類似淘寶)
- 鼠標(biāo)經(jīng)過(guò)顯示二級(jí)菜單js特效
- CSS鼠標(biāo)響應(yīng)事件經(jīng)過(guò)、移動(dòng)、點(diǎn)擊示例介紹
- jquery左右滾動(dòng)焦點(diǎn)圖banner圖片鼠標(biāo)經(jīng)過(guò)顯示上下頁(yè)按鈕
- jquery給圖片添加鼠標(biāo)經(jīng)過(guò)時(shí)的邊框效果
- jquery簡(jiǎn)單實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)導(dǎo)航條改變背景圖
- 鼠標(biāo)經(jīng)過(guò)tr時(shí),改變tr當(dāng)前背景顏色
- Jquery中國(guó)地圖熱點(diǎn)效果-鼠標(biāo)經(jīng)過(guò)彈出提示層信息的簡(jiǎn)單實(shí)例
- jQuery 鼠標(biāo)經(jīng)過(guò)(hover)事件的延時(shí)處理示例
- 使用mouse事件實(shí)現(xiàn)簡(jiǎn)單的鼠標(biāo)經(jīng)過(guò)特效
相關(guān)文章
jquery實(shí)現(xiàn)紅色豎向多級(jí)向右展開(kāi)的導(dǎo)航菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)紅色豎向多級(jí)向右展開(kāi)的導(dǎo)航菜單效果,涉及jquery鼠標(biāo)hover事件結(jié)合class樣式動(dòng)態(tài)添加與刪除的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
今天發(fā)現(xiàn)HotKeys插件的功能真的很強(qiáng)大,且使用簡(jiǎn)單,以后再也不用考慮鍵值的問(wèn)題了,自己定義每個(gè)鍵的函數(shù)就行了2008-08-08
jquery數(shù)組封裝使用方法分享(jquery數(shù)組遍歷)
JQuery對(duì)數(shù)組的處理非常便捷并且功能強(qiáng)大齊全，一步到位的封裝了很多原生js數(shù)組不能企及的功能。下面來(lái)看看JQuery數(shù)組的強(qiáng)大之處在哪。2014-03-03
本文將結(jié)合實(shí)際,使用PHP讀取Mysql數(shù)據(jù)表中的數(shù)據(jù),并將獲取的數(shù)據(jù)按照要求輸出給前端JS,再通過(guò)配置調(diào)用Highcharts圖表庫(kù)生成餅狀圖。2015-05-05
Jquery實(shí)現(xiàn)上下移動(dòng)和排序代碼
這篇文章主要介紹了Jquery實(shí)現(xiàn)上下移動(dòng)和排序,想要學(xué)習(xí)Jquery的同學(xué)可以來(lái)了解一下。具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2016-10-10
本篇文章是對(duì)jQuery中的自動(dòng)完成組件進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-06-06
輕松學(xué)習(xí)jQuery插件EasyUI EasyUI實(shí)現(xiàn)樹(shù)形網(wǎng)絡(luò)基本操作(2)
這篇文章主要幫助大家輕松學(xué)習(xí)jQuery插件EasyUI，針對(duì)EasyUI實(shí)現(xiàn)樹(shù)形網(wǎng)絡(luò)基本操作，分為三大方面：動(dòng)態(tài)加載、添加分頁(yè)、以及惰性加載節(jié)點(diǎn)，感興趣的小伙伴們可以參考一下2015-11-11
jquery特效中的幻燈片想必大家已不陌生吧，下面為大家分享個(gè)比較不錯(cuò)的幻燈片效果，附有源碼，感興趣的朋友可以學(xué)習(xí)下哈2013-07-07
分享一些常用的jQuery動(dòng)畫(huà)事件和動(dòng)畫(huà)函數(shù)
在jquery中，jquery動(dòng)畫(huà)事件和動(dòng)畫(huà)函數(shù)經(jīng)常用的到，今天小編抽時(shí)間給大家整理了些關(guān)于常用的jquery動(dòng)畫(huà)事件和動(dòng)畫(huà)函數(shù)，對(duì)jquery動(dòng)畫(huà)函數(shù)和動(dòng)畫(huà)事件相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-11-11
jquery dialog鍵盤(pán)事件代碼，檢測(cè)回車等事件的觸發(fā)問(wèn)題。2010-08-08