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


Posted in Javascript onMay 30, 2020

本文实例为大家分享了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 相关文章推荐
asp.net HttpHandler实现图片防盗链
Nov 09 Javascript
JavaScript DOM 学习第二章 编辑文本
Feb 19 Javascript
利用JS自动打开页面上链接的实现代码
Sep 25 Javascript
js Form.elements[i]的使用实例
Nov 13 Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
Aug 21 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
Oct 25 Javascript
jQuery实现返回顶部功能
Feb 23 Javascript
AngularJS 自定义指令详解及示例代码
Aug 17 Javascript
jQuery源码分析之sizzle选择器详解
Feb 13 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
Jun 05 Javascript
详解如何实现一个简单的Node.js脚手架
Dec 04 Javascript
React服务端渲染原理解析与实践
Mar 04 Javascript
原生js实现商品放大镜效果
Jan 12 #Javascript
JS 在数组指定位置插入/删除数据的方法
Jan 12 #Javascript
JS图片压缩(pc端和移动端都适用)
Jan 12 #Javascript
原生js实现淘宝购物车功能
Jun 23 #Javascript
jQuery实现拖拽可编辑模块功能代码
Jan 12 #Javascript
jQuery实现倒计时重新发送短信验证码功能示例
Jan 12 #Javascript
js仿京东轮播效果 选项卡套选项卡使用
Jan 12 #Javascript
You might like
PHP 应用程序的安全 -- 不能违反的四条安全规则
2006/11/26 PHP
学习php分页代码实例
2013/10/24 PHP
smarty自定义函数用法示例
2016/05/20 PHP
thinkphp框架实现删除和批量删除
2016/06/29 PHP
php微信开发之关注事件
2018/06/14 PHP
javascript模仿msgbox提示效果代码
2008/06/10 Javascript
JS学习之一个简易的日历控件
2010/03/24 Javascript
DD_belatedPNG,IE6下PNG透明解决方案(国外)
2010/12/06 Javascript
用javascript为页面添加天气显示实现思路及代码
2013/12/02 Javascript
js使用for循环与innerHTML获取选中tr下td值
2014/09/26 Javascript
js在指定位置增加节点函数insertBefore()用法实例
2015/01/12 Javascript
JavaScript中的this关键字使用详解
2015/08/14 Javascript
node.js使用cluster实现多进程
2016/03/17 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
2017/03/17 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
2017/06/17 Javascript
python超简单解决约瑟夫环问题
2015/05/12 Python
Python+Selenium自动化实现分页(pagination)处理
2017/03/31 Python
Python实现pdf文档转txt的方法示例
2018/01/19 Python
浅谈python的dataframe与series的创建方法
2018/11/12 Python
python实现大转盘抽奖效果
2019/01/22 Python
详解python中list的使用
2019/03/15 Python
解析PyCharm Python运行权限问题
2020/01/08 Python
python爬虫实现POST request payload形式的请求
2020/04/30 Python
Python-openpyxl表格读取写入的案例详解
2020/11/02 Python
python爬虫筛选工作实例讲解
2020/11/23 Python
关于canvas.toDataURL 在iOS运行失败的问题解决
2020/09/16 HTML / CSS
美国正版电视节目和电影在线观看:Hulu
2018/05/24 全球购物
葡萄牙语专业个人求职信
2013/12/10 职场文书
仓库班组长岗位职责
2013/12/12 职场文书
任命书模板
2014/06/04 职场文书
专科应届毕业生求职信
2014/06/04 职场文书
数控专业毕业生求职信
2014/06/12 职场文书
行政处罚听证告知书
2015/07/01 职场文书
2016年七夕爱情寄语
2015/12/04 职场文书
Go语言实现Base64、Base58编码与解码
2021/07/26 Golang
Win11怎么把合并的任务栏分开 Win11任务栏合并分开教程
2022/04/06 数码科技