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 showModalDialog 内跳转页面的问题
Nov 25 Javascript
HTML中的setCapture和releaseCapture使用介绍
Mar 21 Javascript
checkbox选中与未选中判断示例
Aug 04 Javascript
AngularJS 实现按需异步加载实例代码
Oct 18 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
Oct 30 Javascript
基于javascript实现全屏漂浮广告
Mar 31 Javascript
Javascript操作dom对象之select全面解析
Apr 24 Javascript
微信小程序实现弹出菜单功能
Jun 12 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
Jul 31 Javascript
微信小程序bindtap事件与冒泡阻止详解
Aug 08 Javascript
layui 弹出层值回传解决方式
Nov 14 Javascript
JS如何使用剪贴板操作Clipboard API
May 17 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中变量及部分适用方法
2008/03/27 PHP
Laravel 中使用简单的方法跟踪用户是否在线(推荐)
2019/10/30 PHP
javascript GUID生成器实现代码
2009/10/31 Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
2010/12/22 Javascript
jQuery动态添加、删除元素的方法
2014/01/09 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
2014/05/02 Javascript
21个JavaScript事件(Events)属性汇总
2014/12/02 Javascript
javascript实现的固定位置悬浮窗口实例
2015/04/30 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
2016/10/24 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
2017/10/30 Javascript
vue watch监听对象及对应值的变化详解
2018/02/24 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
2018/03/20 jQuery
vue-router 前端路由之路由传值的方式详解
2019/04/30 Javascript
Vue函数式组件-你值得拥有
2019/05/09 Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
2019/08/06 Javascript
node.js express捕获全局异常的三种方法实例分析
2019/12/27 Javascript
Javascript如何实现双指控制图片功能
2020/02/25 Javascript
[01:23:35]Ti4主赛事胜者组 DK vs EG 1
2014/07/19 DOTA
zookeeper python接口实例详解
2018/01/18 Python
tensorflow实现简单逻辑回归
2018/09/07 Python
python将txt文件读取为字典的示例
2018/12/22 Python
对PyQt5中的菜单栏和工具栏实例详解
2019/06/20 Python
python networkx 包绘制复杂网络关系图的实现
2019/07/10 Python
django 使用 PIL 压缩图片的例子
2019/08/16 Python
matplotlib基础绘图命令之bar的使用方法
2020/08/13 Python
html5 canvas 简单画板实现代码
2012/01/05 HTML / CSS
html5教程实现Photoshop渐变色效果
2013/12/04 HTML / CSS
西部世纪.net笔试题面试题
2014/04/03 面试题
思想政治教育专业个人求职信范文
2013/12/20 职场文书
食品行业求职人的自我评价
2014/01/19 职场文书
会计电算化个人求职信范文
2014/01/24 职场文书
民族学专业求职信
2014/07/28 职场文书
工程索赔意向书
2014/08/30 职场文书
转让协议书范本
2014/09/13 职场文书
Python3 多线程(连接池)操作MySQL插入数据
2021/06/09 Python
Python3中PyQt5简单实现文件打开及保存
2021/06/10 Python