基于jquery的熱點內(nèi)容輪換效果
更新時間：2011年07月09日 23:05:11 投稿：mdxy-dxy
jquery輪換效果網(wǎng)上已經(jīng)很多了，不過這個效果挺有特色的。需要的朋友可以看下。
效果圖:
核心代碼:
復制代碼 代碼如下:
<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í)行]
相關文章
JQuery+Bootstrap 自定義全屏Loading插件的示例demo
這篇文章主要介紹了JQuery+Bootstrap 自定義全屏Loading插件，本文通過示例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-07-07
jQuery中的$是什么意思及 $. 和 $().的區(qū)別
這篇文章主要介紹了jQuery中的$是什么意思及 $. 和 $().的區(qū)別,需要的朋友可以參考下2018-04-04
jQuery使用動態(tài)渲染表單功能完成ajax文件下載
使用ajax實現(xiàn)文件下載，方便，快捷，時尚，多么有挑戰(zhàn)的一個功能，首先獲取url和data然后把參數(shù)組裝成form的input再利用request發(fā)送請求，也就是動態(tài)渲染表單，提交表單后再刪除，本例將實現(xiàn)文件下載功能，感興趣的朋友可以聊解下2013-01-01
jquery+CSS3實現(xiàn)淘寶移動網(wǎng)頁菜單效果
這篇文章主要介紹了jquery+CSS3實現(xiàn)淘寶移動網(wǎng)頁菜單效果,實例分析了jquery操作頁面樣式動態(tài)變換及熱區(qū)的選擇技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
這篇文章主要為大家詳細介紹了基于jquery實現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
JQuery調(diào)webservice實現(xiàn)郵箱驗證(檢測是否可用)
JQuery調(diào)webservice實現(xiàn)郵箱驗證:判斷郵箱是否存在如果不存在提示可以使用否從提示該郵箱已存在請重新輸入，感興趣的朋友可以參下哈，希望對你有所幫助2013-05-05
使用jQuery實現(xiàn)一個類似GridView的編輯,更新,取消和刪除的功能
在項目中遇到這樣的需求當用戶點擊編輯時，在點擊行下動態(tài)產(chǎn)生一行，編輯銨鈕變?yōu)閐isabled,新產(chǎn)生的一行有更新和取消的銨鈕，點擊“取消”銨鈕，刪除剛剛動態(tài)產(chǎn)生的行，編輯銨鈕狀態(tài)恢復。下面小編給大家分享實例代碼，一起看看吧2017-03-03
jQuery實現(xiàn)的3D版圖片輪播示例【滑動輪播】
這篇文章主要介紹了jQuery實現(xiàn)的3D版圖片輪播,涉及jQuery針對頁面元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2019-01-01
jQuery實現(xiàn)加入收藏夾功能(主流瀏覽器兼職)
jQuery實現(xiàn)加入收藏夾功能，代碼比較簡單，兼容主流瀏覽器，下面給大家分享下2016-12-12
jquery實現(xiàn)table鼠標經(jīng)過變色代碼
table鼠標經(jīng)過變色的效果想必大家都有見到過吧，其實實現(xiàn)很簡單，在本文有個不錯的示例，感興趣的朋友可以學習下2013-09-09