CCTV网站菜单技术学习

最新推荐文章于 2025-09-13 11:59:05 发布

weixin_34018169

最新推荐文章于 2025-09-13 11:59:05 发布

阅读量101

点赞数

文章标签： javascript ViewUI

以前的一个项目中左右菜单太长，想实现可以左右滚动的效果，可是一直没有找到理想的解决方案，今天突然看到CCTV上菜单很炫，实现了我当时想要的效果。赶快来学习一下。

我判断前台是用下面的代码实现：

< div id ="image_page_view_01"   class ="md_bd image_page_view" >
         < div class ="image_list_box" >
             < ul class ="" >
                 < li class ="" >< a href ="http://tv.cctv.com/cctv1/index.shtml" target ="_blank" > CCTV-1 </ a ></ li >< li class ="" >< a href ="http://tv.cctv.com/cctv2/index.shtml" target ="_blank" > CCTV-2 </ a ></ li >< li class ="" >< a href ="http://tv.cctv.com/cctv3/index.shtml" target ="_blank" > CCTV-3 </ a ></ li >< li class ="" >< a href ="http://tv.cctv.com/cctv4/index.shtml" target ="_blank" > CCTV-4 </ a ></ li >< li class ="" >< a href ="http://tv.cctv.com/cctv5/index.shtml" target ="_blank" > CCTV-5 </ a ></ li >< li class ="cur" >< a href ="http://tv.cctv.com/cctv6/index.shtml" target ="_blank" > CCTV-6 </ a ></ li >< li class ="" >< a href ="http://tv.cctv.com/cctv7/index.shtml" target ="_blank" > CCTV-7 </ a ></ li >< li class ="" >< a href ="http://tv.cctv.com/cctv8/index.shtml" target ="_blank" > CCTV-8 </ a ></ li >< li class ="" >< a href ="http://english.cctv.com/index.shtml" target ="_blank" > CCTV-9 </ a ></ li >< li class ="" >< a href ="http://tv.cctv.com/cctv10/index.shtml" target ="_blank" > CCTV-10 </ a ></ li >< li class ="" >< a href ="http://tv.cctv.com/cctv11/index.shtml" target ="_blank" > CCTV-11 </ a ></ li >< li class ="" >< a href ="http://tv.cctv.com/cctv12/index.shtml" target ="_blank" > CCTV-12 </ a ></ li >< li class ="" >< a href ="http://tv.cctv.com/cctv13/index.shtml" target ="_blank" > CCTV-新闻 </ a ></ li >< li class ="" >< a href ="http://tv.cctv.com/cctv14/index.shtml" target ="_blank" > CCTV-少儿 </ a ></ li >< li class ="" >< a href ="http://tv.cctv.com/cctv15/index.shtml" target ="_blank" > CCTV-音乐 </ a ></ li >< li class ="" >< a href ="http://www.cctv.com/espanol/01/index.shtml" target ="_blank" > CCTV-E </ a ></ li >< li class ="" >< a href ="http://fr.cctv.com/" target ="_blank" > CCTV-F </ a ></ li >< li class ="" >< a href ="http://tv.cctv.com/cctv21/index.shtml" target ="_blank" > CCTV-高清 </ a ></ li >

             </ ul >
         </ div >
         < a href ="" class ="previous" ></ a >
         < a href ="" class ="next" ></ a >
     </ div >
</ div >
< script type ="text/javascript" >
jQuery( function (){
new ImagePageView( ' image_page_view_01 ' , { ' btnPrevExp ' : ' > a.previous ' , ' btnNextExp ' : ' > a.next ' , ' noNavBtn ' : 1 ,
' page ' :( function (a){a = 0 ;jQuery( ' #image_page_view_01 li ' ).each( function (i,e){ if (jQuery(e).hasClass( ' cur ' )){a = i; return false }}); return (a / 12)|0})()});
});
</ script >

用到的JS函数和样式在下面两个文件中：/Files/songsh96/js_and_style.rar

因为用到的JQuery技术，我还没有接触过，要等下再研究。