js 模拟搜狐视频纪录片列表展示

来源：互联网发布：python random.sample 编辑：程序博客网时间：2024/05/16 01:48

效果图大致如下：

代码如下：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>搜狐视频记录片列表展示</title> <style> html, body, div, h2, ul, li, p { padding: 0; margin: 0; } li { list-style: none; } a { color: black; text-decoration: none; } #ranking { padding-left: 5px; padding-right: 8px; background-color: #DEE7E7; width: 267px; overflow: hidden; } h2 { height: 38px; line-height: 38px; font-size: 18px; color: #2C4C5D; padding-left: 13px; padding-right: 43px; float: left; border-bottom: 1px solid #B4CFDD; } #tabNav { overflow: hidden; margin-top: 13px; } #tabNav li { float: left; font-size: 12px; line-height: 24px; height: 24px; border: 1px solid #b4cfdd; border-right: 0px; padding: 0 6px; color: #497790; cursor: pointer; } #tabNav li:last-child { border-right: 1px solid #b4cfdd; } #tabContent { clear: left; } #tabContent ul li { line-height: 28px; font-size: 12px; position: relative; } #tabContent ul span { position: absolute; height: 14px; line-height: 18px; width: 18px; text-align: center; background-color: #1A68A2; color: #fff; font-size: 8px; font-weight: bold; left: 6px; top: 6px; z-index: 1; } #tabContent li a { display: inline-block; margin-left: 37px; } #tabContent li { border-bottom: 1px dashed #fff; cursor: pointer; } #tabContent ul li:last-child { border-bottom: none; } #tabContent ul div { height: 82px; background: #fff; overflow: hidden; display: none; } #tabContent div img { height: 70px; border: 1px solid #000; margin: 6px; margin-left: 30px; float: left; } #tabContent p { float: left; width: 150px; line-height: 16px; padding-top: 10px; } #tabContent div a { position: absolute; right: 10px; bottom: 4px; color: #fff; background: #1A68A2; padding: 0 5px; font-size: 10px; line-height: 20px; } #tabContent ul li:last-child { text-align: right; } #daily, #monthly, #all { display: none; } .show { display: block !important; } .active { color: #000; font-weight: bold; background: #fff; border-bottom: 1px solid #fff !important; } </style> <script> window.onload = function(){ var oDaily = document.getElementById('daily'), oMonthly = document.getElementById('monthly'), oAll = document.getElementById('all'), oTabNav = document.getElementById('tabNav'), aNav = oTabNav.getElementsByTagName('li'), oContent = document.getElementById('tabContent'), aUl = oContent.getElementsByTagName('ul'); prevTab = aNav[0]; function fnTab(num){ for(var i=0; i<aNav.length; i++) { aNav[i].className = ''; aUl[i].className = ''; } aNav[num].className = 'active'; aUl[num].className = 'show'; } for (var i=0; i<aNav.length; i++) { aNav[i].index = i; aNav[i].onclick = function(){ num = this.index; fnTab(num); } } for (var i=0; i<aUl.length; i++) { hover(aUl[i]); } function hover(ul) { var aLi = ul.getElementsByTagName('li'); for(var i=0; i<aLi.length; i++){ aLi[i].onmouseover = function(){ this.getElementsByTagName('a')[0].style.display = 'none'; this.getElementsByTagName('div')[0].style.display = 'block'; } aLi[i].onmouseout = function(){ this.getElementsByTagName('a')[0].style.display = 'block'; this.getElementsByTagName('div')[0].style.display = 'none'; } } } } </script> </head> <body> <div id="ranking"> <h2>观看排行榜</h2> <ul id="tabNav"> <li class="active">每日</li> <li>每周</li> <li>全部</li> </ul> <div id="tabContent"> <ul id="daily" class="show"> <li> <span>1</span> <a href="#"onclick = "javascript:">解密：关于地球与人类的一千零一问</a> <div> <img src="img/pen.png"alt="pen"> <p> 解密：关于地球与人类的一千零一问 </p> <a href="#">播放</a> </div> </li> <li> <span>2</span> <a href="#"onclick = "javascript:">经典传奇：探索全世界重大历史事件</a> <div> <img src="img/pen.png"alt="pen"> <p> 解密：关于地球与人类的一千零一问 </p> <a href="#">播放</a> </div> </li> <li> <span>3</span> <a href="#"onclick = "javascript:">眼界：展现普通人的曲折命运和动人...</a> <div> <img src="img/pen.png"alt="pen"> <p> 解密：关于地球与人类的一千零一问 </p> <a href="#">播放</a> </div> </li> <li> <span>4</span> <a href="#"onclick = "javascript:">档案（BTV）：惊人事件和传奇背...</a> <div> <img src="img/pen.png"alt="pen"> <p> 解密：关于地球与人类的一千零一问 </p> <a href="#">播放</a> </div> </li> <li> <span>5</span> <a href="#"onclick = "javascript:">世界十最：30个震惊世界的Top...</a> <div> <img src="img/pen.png"alt="pen"> <p> 解密：关于地球与人类的一千零一问 </p> <a href="#">播放</a> </div> </li> <li> <span>6</span> <a href="#"onclick = "javascript:">身边的毛泽东：警卫员解密毛泽东秘...</a> <div> <img src="img/pen.png"alt="pen"> <p> 解密：关于地球与人类的一千零一问 </p> <a href="#">播放</a> </div> </li> <li> <span>7</span> <a href="#"onclick = "javascript:">新电影传奇：每一步电影都有自己的...</a> <div> <img src="img/pen.png"alt="pen"> <p> 解密：关于地球与人类的一千零一问 </p> <a href="#">播放</a> </div> </li> <li> <span>8</span> <a href="#"onclick = "javascript:">档案（上视纪实频道）：解密档案中...</a> <div> <img src="img/pen.png"alt="pen"> <p> 解密：关于地球与人类的一千零一问 </p> <a href="#">播放</a> </div> </li> <li> <span>9</span> <a href="#"onclick = "javascript:">探寻传世国宝的千古传奇</a> <div> <img src="img/pen.png"alt="pen"> <p> 解密：关于地球与人类的一千零一问 </p> <a href="#">播放</a> </div> </li> <li> <span>10</span> <a href="#"onclick = "javascript:">纪实系列：讲述社会百态，透视事实...</a> <div> <img src="img/pen.png"alt="pen"> <p> 解密：关于地球与人类的一千零一问 </p> <a href="#">播放</a> </div> </li> <li> <a href="#">更多>></a> </li> </ul> <ul id="monthly" > <li> <span>1</span> <a href="#"onclick = "javascript:">每月：关于地球与人类的一千零一问</a> <div> <img src="img/pen.png"alt="pen"> <p> 解密：关于地球与人类的一千零一问 </p> <a href="#">播放</a> </div> </li> <li> <span>2</span> <a href="#"onclick = "javascript:">每月传奇：探索全世界重大历史事件</a> <div> <img src="img/pen.png"alt="pen"> <p> 解密：关于地球与人类的一千零一问 </p> <a href="#">播放</a> </div> </li> <li> <span>3</span> <a href="#"onclick = "javascript:">每月：展现普通人的曲折命运和动人...</a> <div> <img src="img/pen.png"alt="pen"> <p> 解密：关于地球与人类的一千零一问 </p> <a href="#">播放</a> </div> </li> <li> <span>4</span> <a href="#"onclick = "javascript:">每月（BTV）：惊人事件和传奇背...</a> <div> <img src="img/pen.png"alt="pen"> <p> 解密：关于地球与人类的一千零一问 </p> <a href="#">播放</a> </div> </li> <li> <span>5</span> <a href="#"onclick = "javascript:">每月十最：30个震惊世界的Top...</a> <div> <img src="img/pen.png"alt="pen"> <p> 解密：关于地球与人类的一千零一问 </p> <a href="#">播放</a> </div> </li> <li> <span>6</span> <a href="#"onclick = "javascript:">每月的毛泽东：警卫员解密毛泽东秘...</a> <div> <img src="img/pen.png"alt="pen"> <p> 解密：关于地球与人类的一千零一问 </p> <a href="#">播放</a> </div> </li> <li> <span>7</span> <a href="#"onclick = "javascript:">每月影传奇：每一步电影都有自己的...</a> <div> <img src="img/pen.png"alt="pen"> <p> 解密：关于地球与人类的一千零一问 </p> <a href="#">播放</a> </div> </li> <li> <span>8</span> <a href="#"onclick = "javascript:">每月（上视纪实频道）：解密档案中...</a> <div> <img src="img/pen.png"alt="pen"> <p> 解密：关于地球与人类的一千零一问 </p> <a href="#">播放</a> </div> </li> <li> <span>9</span> <a href="#"onclick = "javascript:">每月传世国宝的千古传奇</a> <div> <img src="img/pen.png"alt="pen"> <p> 解密：关于地球与人类的一千零一问 </p> <a href="#">播放</a> </div> </li> <li> <span>10</span> <a href="#"onclick = "javascript:">每月系列：讲述社会百态，透视事实...</a> <div> <img src="img/pen.png"alt="pen"> <p> 解密：关于地球与人类的一千零一问 </p> <a href="#">播放</a> </div> </li> <li> <a href="#">更多>></a> </li> </ul> <ul id="all" > <li> <span>1</span> <a href="#"onclick = "javascript:">全部：关于地球与人类的一千零一问</a> <div> <img src="img/pen.png"alt="pen"> <p> 解密：关于地球与人类的一千零一问 </p> <a href="#">播放</a> </div> </li> <li> <span>2</span> <a href="#"onclick = "javascript:">全部传奇：探索全世界重大历史事件</a> <div> <img src="img/pen.png"alt="pen"> <p> 解密：关于地球与人类的一千零一问 </p> <a href="#">播放</a> </div> </li> <li> <span>3</span> <a href="#"onclick = "javascript:">全部：展现普通人的曲折命运和动人...</a> <div> <img src="img/pen.png"alt="pen"> <p> 解密：关于地球与人类的一千零一问 </p> <a href="#">播放</a> </div> </li> <li> <span>4</span> <a href="#"onclick = "javascript:">全部（BTV）：惊人事件和传奇背...</a> <div> <img src="img/pen.png"alt="pen"> <p> 解密：关于地球与人类的一千零一问 </p> <a href="#">播放</a> </div> </li> <li> <span>5</span> <a href="#"onclick = "javascript:">全部十最：30个震惊世界的Top...</a> <div> <img src="img/pen.png"alt="pen"> <p> 解密：关于地球与人类的一千零一问 </p> <a href="#">播放</a> </div> </li> <li> <span>6</span> <a href="#"onclick = "javascript:">全部的毛泽东：警卫员解密毛泽东秘...</a> <div> <img src="img/pen.png"alt="pen"> <p> 解密：关于地球与人类的一千零一问 </p> <a href="#">播放</a> </div> </li> <li> <span>7</span> <a href="#"onclick = "javascript:">全部影传奇：每一步电影都有自己的...</a> <div> <img src="img/pen.png"alt="pen"> <p> 解密：关于地球与人类的一千零一问 </p> <a href="#">播放</a> </div> </li> <li> <span>8</span> <a href="#"onclick = "javascript:">全部（上视纪实频道）：解密档案中...</a> <div> <img src="img/pen.png"alt="pen"> <p> 解密：关于地球与人类的一千零一问 </p> <a href="#">播放</a> </div> </li> <li> <span>9</span> <a href="#"onclick = "javascript:">全部传世国宝的千古传奇</a> <div> <img src="img/pen.png"alt="pen"> <p> 解密：关于地球与人类的一千零一问 </p> <a href="#">播放</a> </div> </li> <li> <span>10</span> <a href="#"onclick = "javascript:">全部系列：讲述社会百态，透视事实...</a> <div> <img src="img/pen.png"alt="pen"> <p> 解密：关于地球与人类的一千零一问 </p> <a href="#">播放</a> </div> </li> <li> <a href="#">更多>></a> </li> </ul> </div> </div> </body> </html>

阅读全文

0 0