您当前位置：首页 > web前端 > jquery > jquery热点内容轮换效果，纵向带箭头导航

jquery热点内容轮换效果，纵向带箭头导航

来源：程序员人生发布时间：2014-02-09 03:03:32 阅读次数：2823次

　　以前给大家介绍的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.wfuyu.com/' target='_blank'>http://www.wfuyu.com/</a></center>
提示：可修改后代码再运行!

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

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

下一篇 Linux 脚本删除大于指定大小的文件

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点