基于jquery的熱點(diǎn)內(nèi)容輪換效果
更新時(shí)間:2011年07月09日 23:05:11 投稿:mdxy-dxy
jquery輪換效果網(wǎng)上已經(jīng)很多了,不過這個(gè)效果挺有特色的。需要的朋友可以看下。
效果圖:
核心代碼:
復(fù)制代碼 代碼如下:
<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彈出框插件jquery.ui.dialog用法分析
這篇文章主要介紹了jquery彈出框插件jquery.ui.dialog用法,結(jié)合實(shí)例形式分析了彈出框插件jquery.ui.dialog的功能、下載、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-08-08jquery實(shí)現(xiàn)垂直無限輪播的方法分析
這篇文章主要介紹了jquery實(shí)現(xiàn)垂直無限輪播的方法,結(jié)合實(shí)例形式分析了jQuery無限輪播相關(guān)界面布局、樣式與頁面元素動(dòng)態(tài)操作實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-07-07jquery動(dòng)態(tài)改變onclick屬性導(dǎo)致失效的問題解決方法
onclick屬性失效的問題,相信很多的朋友都有遇到過吧,jquery動(dòng)態(tài)改變onclick屬性就會(huì)導(dǎo)致此問題的發(fā)生,解決方法如下,希望對大家有所幫助2013-12-12深入解析jQuery中Deferred的deferred.promise()方法
這篇文章主要介紹了jQuery中Deferred的deferred.promise()方法,提醒千萬要注意deferred.promise()與jQuery的.promise() 實(shí)例方法的區(qū)別,需要的朋友可以參考下2016-05-05jQuery實(shí)現(xiàn)的導(dǎo)航條切換可顯示隱藏
用jQuery實(shí)現(xiàn)一些導(dǎo)航條切換,顯示隱藏,主要用到slideToggle( ),toggeClass( ),toggle()2014-10-10jQuery 實(shí)現(xiàn)DOM元素拖拽交換位置的實(shí)例代碼
這篇文章主要介紹了jQuery 實(shí)現(xiàn)DOM元素拖拽交換位置,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07正則驗(yàn)證小數(shù)點(diǎn)后面只能有兩位數(shù)的方法
下面小編就為大家?guī)硪黄齽t驗(yàn)證小數(shù)點(diǎn)后面只能有兩位數(shù)的方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02