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>
<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技术,我还没有接触过,要等下再研究。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 深入理解 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 构建精确任务处理应用