CCTV网站菜单技术学习

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

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

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

            
</ul>
        
</div>
        
<href="" class="previous"></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技术,我还没有接触过,要等下再研究。

posted on   Sammy  阅读(289)  评论(0编辑  收藏  举报

编辑推荐:
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
阅读排行:
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 《HelloGitHub》第 106 期
· 数据库服务器 SQL Server 版本升级公告
· 深入理解Mybatis分库分表执行原理
· 使用 Dify + LLM 构建精确任务处理应用
< 2009年2月 >
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
1 2 3 4 5 6 7
8 9 10 11 12 13 14

导航

统计

点击右上角即可分享
微信分享提示