DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> 基於jquery的熱點內容輪換效果
基於jquery的熱點內容輪換效果
編輯:JQuery特效代碼     
核心代碼:
代碼如下:
<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="http://www.poluoluo.com/jzxy/UploadFiles_333/201110/2011101614581564.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="http://www.poluoluo.com/jzxy/UploadFiles_333/201110/2011101614581547.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="http://www.poluoluo.com/jzxy/UploadFiles_333/201110/2011101614581571.jpg" alt="性感美女黑色內衣" border="0"></a> <span><a href="http://meinv.vs2010.com/topic/6/201107/show-id2254.html" target="_blank">性感美女黑色內衣</a></span> </li>
<li><a href="http://meinv.vs2010.com/topic/6/201106/show-id2211.html" target="_blank"><img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201110/2011101614581517.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需刷新才能執行]
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved