您當前位置：首頁 > web前端 > jquery > jquery熱點內容輪換效果，縱向帶箭頭導航

jquery熱點內容輪換效果，縱向帶箭頭導航

來源：程序員人生發布時間：2014-02-09 03:03:32 閱讀次數：3002次

　　以前給大家介紹的jQuery切換大多是純圖片的形式，今天網小編在網上看到一款熱點內容導航的效果，就是圖文效果的那種，還有箭頭和焦點邊框的定向功能，非常不錯的東西。

　　為解決一些網頁特效運行后不能顯示效果（例如：jQuery則需要刷新）問題，特別新增網頁版演示。

　　點擊查看：網頁特效

　　運行演示：

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><title></title><script src="/uploads/common/js/jquery-1.4.2.min.js" type="text/javascript"></script><style>/* 全局CSS定義 */div,form,ul,ol,li,span,p,dl,dt,dd,img{margin:0;padding:0;border:0;}h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-size:12px;font-weight:normal;}ul,ol,li{list-style:none}table,td,input,textarea{font-size:12px}.blockB{margin-bottom:22px;margin-right:11px;padding-bottom:22px;border-bottom:1px solid #e8eee0;background:url(/uploads/allimg/1107/5be_3a3a0e4c_8287_4943_af03_c18af22f9115_0.gif) no-repeat 0 99px;}.blockB .pp{margin-left:51px;height:223px;position:relative;top:0;overflow:hidden;width:248px;}.blockB .tabs{float:left;width:68px;font-size:14px;font-weight:700;line-height:16px;}.blockB .tabs a{width:38px;padding:5px 24px 0 6px;height:36px;display:block;color:#fff;margin-bottom:12px;background:#639805 url(/uploads/allimg/1107/5be_6cc7350b_e6db_424d_9969_352ad305ea29_0.gif) no-repeat 0 -45px;text-decoration:none;}.blockB .tabs a.on{background-position:0 0;background-color:#ff8c10;cursor:default;}.blockB ul{width:130px;float:left;position:relative;top:0;}.blockB li{padding:4px;background:#639805;height:211px;overflow:hidden;width:120px;}.blockB li a{color:#fff;}.blockB li span {display:block;padding-top:5px;height:15px;font-size:12px;text-align:center}h2 {height: 35px;line-height: 33px;margin-bottom: 5px;text-align: right;}h2 span {display: none;float: left;font-weight: bold;}.pp img {display: block;margin: 0 auto;}</style></head><body><form name="form1" method="post" action="default.aspx" id="form1"><div><input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE5MzA0NTQyMjBkZG+UVHG49qJ6+Z0+M6kmIB4HSppG" /></div><div class="blockB" collection="Y" ><h2><span>王牌欄目 Regular features</span></h2><div id="regular_features" class="pp"><div class="tabs"> <a class="on" href="#" target="_blank">世界最美</a><a href="#" target="_blank">哇！好玩</a><a href="#" target="_blank">窮游世界</a><a href="#" target="_blank">周末駕到</a> </div><ul><li><a href="#"target="_blank"><img src="/uploads/allimg/1107/sc50a2e249f11402c9ad62fc95cc6ec9c.jpg" alt="少女傲人雙峰自拍" border="0"></a> <span><a href="#" target="_blank">少女傲人雙峰自拍</a></span> </li><li><a href="#" target="_blank"><img alt="日本酥胸美女杉原杏" src="/uploads/allimg/1107/s1b77b22af4c24b1dbae673a0088c2757.jpg"></a> <span><a href="#" target="_blank">日本酥胸美女杉原杏</a></span> </li><li><a href="#" target="_blank"><img src="/uploads/allimg/1107/s612d1ce2d8b34795bcdc5094a086bdb5.jpg" alt="性感美女黑色內衣" border="0"></a> <span><a href="#" target="_blank">性感美女黑色內衣</a></span> </li><li><a href="#" target="_blank"><img src="/uploads/allimg/1107/s6af1526e7e58439b8dcd39537b61b792.jpg" alt="絕美性感黑絲美眉" border="0"></a> <span><a href="#" 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></form></body></html><br /><center>如不能顯示效果，請按Ctrl+F5刷新本頁，更多網頁代碼：<a href='http://www.vxbq.cn/' target='_blank'>http://www.vxbq.cn/</a></center>
提示：可修改后代碼再運行!

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 DIV+CSS兼容IE6/7和火狐的完美解決方案

下一篇 Linux 腳本刪除大于指定大小的文件

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

jquery熱點內容輪換效果，縱向帶箭頭導航