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 相关文章推荐
JavaScript 对话框和状态栏使用说明
Oct 25 Javascript
javascript中的作用域scope介绍
Dec 28 Javascript
js获取图片大小的函数代码
Sep 20 Javascript
使用js解决由border属性引起的div宽度问题
Nov 26 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
Dec 19 Javascript
vue 2.0路由之路由嵌套示例详解
May 08 Javascript
使用Require.js封装原生js轮播图的实现代码
Jun 15 Javascript
在Vue中使用echarts的方法
Feb 05 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
Mar 06 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
May 06 Javascript
在create-react-app中使用sass的方法示例
Oct 01 Javascript
使用Canvas绘制一个游戏人物属性图
Mar 25 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
win7+apache+php+mysql环境配置操作详解
2013/06/10 PHP
php下pdo的mysql事务处理用法实例
2014/12/27 PHP
使用Zookeeper分布式部署PHP应用程序
2019/03/15 PHP
使用composer安装使用thinkphp6.0框架问题【视频教程】
2019/10/01 PHP
php获取微信openid方法总结
2019/10/10 PHP
情人节专属 纯js脚本1k大小的3D玫瑰效果
2012/02/11 Javascript
Web表单提交之disabled问题js解决方法
2015/01/13 Javascript
jQuery实现的AJAX简单弹出层效果代码
2015/11/26 Javascript
js实现继承的5种方式
2015/12/01 Javascript
原生js和css实现图片轮播效果
2017/02/07 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
angularjs定时任务的设置与清除示例
2017/06/02 Javascript
微信小程序滑动选择器的实现代码
2018/08/10 Javascript
教你如何编写Vue.js的单元测试的方法
2018/10/17 Javascript
Element-UI中关于table表格的那些骚操作(小结)
2019/08/15 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
2019/09/10 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
2019/09/25 Javascript
vue自动化路由的实现代码
2019/09/30 Javascript
js实现圆形菜单选择器
2020/12/03 Javascript
python实现ipsec开权限实例
2014/11/11 Python
python清除字符串里非字母字符的方法
2015/07/02 Python
Python内建模块struct实例详解
2018/02/02 Python
Request的中断和ErrorHandler实例解析
2018/02/12 Python
selenium+python自动化测试之使用webdriver操作浏览器的方法
2019/01/23 Python
Python爬虫——爬取豆瓣电影Top250代码实例
2019/04/17 Python
python requests指定出口ip的例子
2019/07/25 Python
python实现统计代码行数的小工具
2019/09/19 Python
NUK奶瓶美国官网:NUK美国
2016/09/26 全球购物
编程用JAVA解析XML的方式
2013/07/07 面试题
竞聘书模板
2014/03/31 职场文书
股权收购意向书
2014/04/01 职场文书
大专生自荐书范文
2014/06/22 职场文书
学校运动会报道稿
2014/09/23 职场文书
股东大会通知
2015/04/24 职场文书
《神奇的鸟岛》教学反思
2016/02/22 职场文书
Python还能这么玩之用Python做个小游戏的外挂
2021/06/04 Python