CCTV网站菜单技术学习

以前的一个项目中左右菜单太长，想实现可以左右滚动的效果，可是一直没有找到理想的解决方案，今天突然看到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技术，我还没有接触过，要等下再研究。