未加星标

js仿搜狐视频记录片列表展示效果

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

本文实例为大家分享了js搜狐视频记录片列表展示效果,供大家参考,具体内容如下

js仿搜狐视频记录片列表展示效果
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0;padding:0;}
ul{list-style:none;}
#list{width:300px;height:500px;margin:40px auto;border:1px solid #ccc;}
#list .lis{width:300px;height:auto;line-height:50px;border-bottom:1px solid #ccc;float:left;}
#list .lis ul {width:300px;height:50px;}
#list .lis ul li {width:300px;height:50px;line-height:50px;display:none;}
#list .lis ul li span {display:inline-block;margin:10px;width:30px;height:30px;text-align:center;line-height:30px;background:#3366FF;color:#fff;}
#list .lis ul li p {display:inline-block;width:150px;height:50px;line-height:30px;}
#list .lis ul li div.index {float:left;width:50px;height:150px;display:line-block;}
#list .lis ul li div.index span.blur {font-weight:bold;background:#fff;color:blue;}
#list .lis ul li img {width:120px;height:120px;margin:15px;float:left;display:inline-block;}
#list .lis ul li div.desc {position:relative;float:left;width:100px;height:150px;}
#list .lis ul li div.desc p {position:absolute;left:0px;top:20px;color:#000;width:100px;height:30px;line-height:30px;}
#list .lis ul li div.desc a {width:60px;height:30px;position:absolute;bottom:5px;right:5px;text-decoration:none;background:blue;color:#fff;font-size:20px;padding:5px;border-radius:8px;dispaly:inline-block;line-height:30px;text-align:center;}
#list .lis ul li:first-child{display:block;}
</style>
<script>
window.onload = function (){
var oUl = document.getElementById('list');
var aUl = oUl.getElementsByTagName('ul');
var lis = oUl.getElementsByClassName('lis');
var arr = [
['小兵张嘎', 'img/1.png', '小兵张嘎的简介'],
['大耳朵图图', 'img/2.png', '大耳朵图图的简介'],
['海贼王', 'img/3.png', '海贼王的简介'],
['火影忍者', 'img/4.png', '火影忍者的简介'],
['奥特曼', 'img/1.png', '奥特曼的简介'],
['熊出没', 'img/2.png', '熊出没的简介'],
['小鬼到家', 'img/3.png', '小鬼到家的简介'],
['游戏王', 'img/4.png', '游戏王的简介'],
['哈利波特', 'img/1.png', '哈利波特的简介'],
];
for ( var i = 0; i < aUl.length; i ++ ) {
var aLi = aUl[i].getElementsByTagName('li');
aLi[0].getElementsByTagName('span')[0].innerHTML = i + 1;
aLi[0].getElementsByTagName('p')[0].innerHTML = arr[i][0];
var aSpan = aLi[1].getElementsByTagName('span');
var index = i + 1;
for ( var j = 0; j < aSpan.length; j ++) {
aSpan[j].innerHTML = index++;
}
aLi[1].getElementsByTagName('img')[0].src = arr[i][1];
aLi[1].getElementsByTagName('p')[0].innerHTML = arr[i][2];
}
for ( var i = 0; i < aUl.length; i ++ ) {
aUl[i].onmouseover = function () {
this.getElementsByTagName('li')[0].style.display = 'none';
//this.style.cssText = 'height:150px;line-height:150px;';
this.getElementsByTagName('li')[1].style.display = 'block';
}
aUl[i].onmouseout = function () {
this.getElementsByTagName('li')[1].style.display = 'none';
this.getElementsByTagName('li')[0].style.display = 'block';
}
}
}
</script>
</head>
<body>
<ul id="list">
<li class="lis">
<ul>
<li>
<span></span>
<p></p>
</li>
<li>
<div class="index">
<span></span>
<span class="blur"></span>
<span class="blur"></span>
</div>
<img/>
<div class="desc">
<p></p>
<a href="javascript:;">播放</a>
</div>
</li>
</ul>
</li>
<li class="lis">
<ul>
<li>
<span></span>
<p></p>
</li>
<li>
<div class="index">
<span></span>
<span class="blur"></span>
<span class="blur"></span>
</div>
<img/>
<div class="desc">
<p></p>
<a href="javascript:;">播放</a>
</div>
</li>
</ul>
</li>
<li class="lis">
<ul>
<li>
<span></span>
<p></p>
</li>
<li>
<div class="index">
<span></span>
<span class="blur"></span>
<span class="blur"></span>
</div>
<img/>
<div class="desc">
<p></p>
<a href="javascript:;">播放</a>
</div>
</li>
</ul>
</li>
<li class="lis">
<ul>
<li>
<span></span>
<p></p>
</li>
<li>
<div class="index">
<span></span>
<span class="blur"></span>
<span class="blur"></span>
</div>
<img/>
<div class="desc">
<p></p>
<a href="javascript:;">播放</a>
</div>
</li>
</ul>
</li>
<li class="lis">
<ul>
<li>
<span></span>
<p></p>
</li>
<li>
<div class="index">
<span></span>
<span class="blur"></span>
<span class="blur"></span>
</div>
<img/>
<div class="desc">
<p></p>
<a href="javascript:;">播放</a>
</div>
</li>
</ul>
</li>
<li class="lis">
<ul>
<li>
<span></span>
<p></p>
</li>
<li>
<div class="index">
<span></span>
<span class="blur"></span>
<span class="blur"></span>
</div>
<img/>
<div class="desc">
<p></p>
<a href="javascript:;">播放</a>
</div>
</li>
</ul>
</li>
<li class="lis">
<ul>
<li>
<span></span>
<p></p>
</li>
<li>
<div class="index">
<span></span>
<span class="blur"></span>
<span class="blur"></span>
</div>
<img/>
<div class="desc">
<p></p>
<a href="javascript:;">播放</a>
</div>
</li>
</ul>
</li>
<li class="lis">
<ul>
<li>
<span></span>
<p></p>
</li>
<li>
<div class="index">
<span></span>
<span class="blur"></span>
<span class="blur"></span>
</div>
<img/>
<div class="desc">
<p></p>
<a href="javascript:;">播放</a>
</div>
</li>
</ul>
</li>
<li class="lis">
<ul>
<li>
<span></span>
<p></p>
</li>
<li>
<div class="index">
<span></span>
<span class="blur"></span>
<span class="blur"></span>
</div>
<img/>
<div class="desc">
<p></p>
<a href="javascript:;">播放</a>
</div>
</li>
</ul>
</li>
</ul>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: HTML搜狐
分页:12
转载请注明
本文标题:js仿搜狐视频记录片列表展示效果
本站链接:http://www.codesec.net/view/524292.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(60)