jq實(shí)現(xiàn)酷炫的鼠標(biāo)經(jīng)過圖片翻滾效果
更新時(shí)間:2014年03月12日 16:03:47 作者:
一個(gè)酷炫的圖片翻滾效果要實(shí)現(xiàn)這個(gè)效果并不難,只要思路對(duì)了,一切都好辦,下面有個(gè)不錯(cuò)的示例,大家可以參考下
短短的十多行代碼就實(shí)現(xiàn)了一個(gè)酷炫的圖片翻滾代碼,要實(shí)現(xiàn)這個(gè)效果并不難,只要思路對(duì)了,一切都好辦,不多說了,直接上代碼看效果!
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下來看下效果唄!
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下來看下效果唄!
您可能感興趣的文章:
- 兼容ie和firefox的鼠標(biāo)經(jīng)過(onmouseover和onmouseout)實(shí)現(xiàn)--簡(jiǎn)短版
- js實(shí)現(xiàn)圖片顯示局部,鼠標(biāo)經(jīng)過顯示全部的效果
- Javascript實(shí)現(xiàn)的鼠標(biāo)經(jīng)過時(shí)播放聲音
- 鼠標(biāo)經(jīng)過導(dǎo)航菜單時(shí)顏色改變效果
- javascript學(xué)習(xí)筆記(二) 鼠標(biāo)經(jīng)過時(shí),改變div塊的背景色的代碼
- javascript中onmouse事件在div中失效問題的解決方法
- jquery插件實(shí)現(xiàn)鼠標(biāo)經(jīng)過圖片右側(cè)顯示大圖的效果(類似淘寶)
- 鼠標(biāo)經(jīng)過顯示二級(jí)菜單js特效
- CSS鼠標(biāo)響應(yīng)事件經(jīng)過、移動(dòng)、點(diǎn)擊示例介紹
- jquery左右滾動(dòng)焦點(diǎn)圖banner圖片鼠標(biāo)經(jīng)過顯示上下頁(yè)按鈕
- jquery給圖片添加鼠標(biāo)經(jīng)過時(shí)的邊框效果
- jquery簡(jiǎn)單實(shí)現(xiàn)鼠標(biāo)經(jīng)過導(dǎo)航條改變背景圖
- 鼠標(biāo)經(jīng)過tr時(shí),改變tr當(dāng)前背景顏色
- Jquery中國(guó)地圖熱點(diǎn)效果-鼠標(biāo)經(jīng)過彈出提示層信息的簡(jiǎn)單實(shí)例
- jQuery 鼠標(biāo)經(jīng)過(hover)事件的延時(shí)處理示例
- 使用mouse事件實(shí)現(xiàn)簡(jiǎn)單的鼠標(biāo)經(jīng)過特效
相關(guān)文章
JQuery標(biāo)簽頁(yè)效果實(shí)例詳解
這篇文章主要介紹了JQuery標(biāo)簽頁(yè)效果,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)遍歷及切換標(biāo)簽頁(yè)的技巧,需要的朋友可以參考下2015-12-12jQuery實(shí)現(xiàn)簡(jiǎn)單三級(jí)聯(lián)動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單三級(jí)聯(lián)動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09jQuery時(shí)間戳和日期相互轉(zhuǎn)換操作示例
這篇文章主要介紹了jQuery時(shí)間戳和日期相互轉(zhuǎn)換操作,結(jié)合實(shí)例形式分析了jQuery針對(duì)日期與時(shí)間戳的轉(zhuǎn)換、運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2018-12-12jQuery在vs2008及js文件中的無智能提示的解決方法
我通過下面方法實(shí)現(xiàn)了jQuery在VS2008及js文件中的智能提示的,希望對(duì)朋友們有所幫助。2010-12-12jQuery實(shí)現(xiàn)鎖定頁(yè)面元素(表格列)
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)鎖定頁(yè)面元素,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02jquery實(shí)現(xiàn)的淡入淡出下拉菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)的淡入淡出下拉菜單效果,涉及jquery操作頁(yè)面屬性的動(dòng)態(tài)添加與刪除相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08