基于jquery的熱點(diǎn)內(nèi)容輪換效果
效果圖:
核心代碼:
<div class="blockB" collection="Y" >
<h2><span>王牌欄目 Regular features</span></h2>
<div id="regular_features" class="pp">
<div class="tabs"> <a class="on" href="http://meinv.vs2010.com/topic/9/201107/show-id2265.html" target="_blank">世界最美</a><a href="http://meinv.vs2010.com/topic/8/201107/show-id2295.html" target="_blank">哇!好玩</a><a href="http://meinv.vs2010.com/topic/6/201107/show-id2254.html" target="_blank">窮游世界</a><a href="http://meinv.vs2010.com/topic/6/201106/show-id2211.html" target="_blank">周末駕到</a> </div>
<ul>
<li><a href="http://meinv.vs2010.com/topic/9/201107/show-id2265.html"target="_blank"><img src="/upload/201107/20110709230421591.jpg" alt="少女傲人雙峰自拍" border="0"></a> <span><a href="http://meinv.vs2010.com/topic/9/201107/show-id2265.html" target="_blank">少女傲人雙峰自拍</a></span> </li>
<li><a href="http://meinv.vs2010.com/topic/8/201107/show-id2295.html" target="_blank"><img alt="日本美女杉原杏" src="/upload/201107/20110709230422324.jpg"></a> <span><a href="http://meinv.vs2010.com/topic/8/201107/show-id2295.html" target="_blank">日本美女杉原杏</a></span> </li>
<li><a href="http://meinv.vs2010.com/topic/6/201107/show-id2254.html" target="_blank"><img src="/upload/201107/20110709230422999.jpg" alt="性感美女黑色內(nèi)衣" border="0"></a> <span><a href="http://meinv.vs2010.com/topic/6/201107/show-id2254.html" target="_blank">性感美女黑色內(nèi)衣</a></span> </li>
<li><a href="http://meinv.vs2010.com/topic/6/201106/show-id2211.html" target="_blank"><img src="/upload/201107/20110709230422847.jpg" alt="絕美性感黑絲美眉" border="0"></a> <span><a href="http://meinv.vs2010.com/topic/6/201106/show-id2211.html" target="_blank">絕美性感黑絲美眉</a></span> </li>
</ul>
</div>
<script type="text/javascript">
jQuery(function (j) {
var r = j('#regular_features'),
btns = r.find('> div.tabs > a'),
el_ani = r.find('> ul'),
el_pages = el_ani.find('> li'),
pages = el_pages.length,
p = 0,
pw = 219;
btns.each(function (idx, btn) {
btn = j(btn);
btn.mouseenter(function (ev) {
if (idx != p) {
j(btns[p]).removeClass('on');
btn.addClass('on');
p = idx;
el_ani.stop().animate({ top: -pw * idx }, 300);
}
return false;
});
}).eq(1).mouseenter();
});
</script>
</div>
演示代碼:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
相關(guān)文章
JQuery+Bootstrap 自定義全屏Loading插件的示例demo
這篇文章主要介紹了JQuery+Bootstrap 自定義全屏Loading插件,本文通過示例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-07-07
jQuery中的$是什么意思及 $. 和 $().的區(qū)別
這篇文章主要介紹了jQuery中的$是什么意思及 $. 和 $().的區(qū)別,需要的朋友可以參考下2018-04-04
jQuery使用動(dòng)態(tài)渲染表單功能完成ajax文件下載
使用ajax實(shí)現(xiàn)文件下載,方便,快捷,時(shí)尚,多么有挑戰(zhàn)的一個(gè)功能,首先獲取url和data然后把參數(shù)組裝成form的input再利用request發(fā)送請(qǐng)求,也就是動(dòng)態(tài)渲染表單,提交表單后再刪除,本例將實(shí)現(xiàn)文件下載功能,感興趣的朋友可以聊解下2013-01-01
jquery+CSS3實(shí)現(xiàn)淘寶移動(dòng)網(wǎng)頁菜單效果
這篇文章主要介紹了jquery+CSS3實(shí)現(xiàn)淘寶移動(dòng)網(wǎng)頁菜單效果,實(shí)例分析了jquery操作頁面樣式動(dòng)態(tài)變換及熱區(qū)的選擇技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
JQuery調(diào)webservice實(shí)現(xiàn)郵箱驗(yàn)證(檢測(cè)是否可用)
JQuery調(diào)webservice實(shí)現(xiàn)郵箱驗(yàn)證:判斷郵箱是否存在如果不存在提示可以使用否從提示該郵箱已存在請(qǐng)重新輸入,感興趣的朋友可以參下哈,希望對(duì)你有所幫助2013-05-05
使用jQuery實(shí)現(xiàn)一個(gè)類似GridView的編輯,更新,取消和刪除的功能
在項(xiàng)目中遇到這樣的需求當(dāng)用戶點(diǎn)擊編輯時(shí),在點(diǎn)擊行下動(dòng)態(tài)產(chǎn)生一行,編輯銨鈕變?yōu)閐isabled,新產(chǎn)生的一行有更新和取消的銨鈕,點(diǎn)擊“取消”銨鈕,刪除剛剛動(dòng)態(tài)產(chǎn)生的行,編輯銨鈕狀態(tài)恢復(fù)。下面小編給大家分享實(shí)例代碼,一起看看吧2017-03-03
jQuery實(shí)現(xiàn)的3D版圖片輪播示例【滑動(dòng)輪播】
這篇文章主要介紹了jQuery實(shí)現(xiàn)的3D版圖片輪播,涉及jQuery針對(duì)頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-01-01
jQuery實(shí)現(xiàn)加入收藏夾功能(主流瀏覽器兼職)
jQuery實(shí)現(xiàn)加入收藏夾功能,代碼比較簡(jiǎn)單,兼容主流瀏覽器,下面給大家分享下2016-12-12
jquery實(shí)現(xiàn)table鼠標(biāo)經(jīng)過變色代碼
table鼠標(biāo)經(jīng)過變色的效果想必大家都有見到過吧,其實(shí)實(shí)現(xiàn)很簡(jiǎn)單,在本文有個(gè)不錯(cuò)的示例,感興趣的朋友可以學(xué)習(xí)下2013-09-09

