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>

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

赞 (0)

相关推荐

  • jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表

    对于问题从后台获取json数据,将内容填充到下拉列表,代码非常简单,具体过程请看下面代码. 需求:url:链接     par:ID       sel:下拉列表选择器 //获取下拉列表 function BuildSelectBox(url, par, sel) { $(sel).empty(); $.getJSON(url, { id: par }, function (json, textStatus) { for (var i = json.length - 1; i >= 0; i--

  • extjs 列表框(multiselect)的动态添加列表项的方法

    因为它这个是创建时自动加载的ArrayStore(关键字是:data: ds),没有动态增加的示例,但我们的项目需要有三个列表框,并且后两个的内容要根据第一个列表框内容动态的加载,因此要在选择第一个列表框的内容时,动态填充后两个的内容.我比较佩服exjts的示例写作人员,这些应该在示例中体现的功能,他们都没有写到,包括之前的2.2版本的示例,网上也没有搜索到,害我找了一天如何动态控制列表数据的功能.首先说明一下,我的方法也不是官方的方法,只是自己灵机一动想到的,下面是动态增加列表项的方法. 在方

  • javascript 输入框提示列表效果

    代码可以更简洁些,有更简便的方法欢迎贡献出来啊. 输入框提示列表效果_我们 function showAndHide(obj,types){ var Layer=window.document.getElementById(obj); switch(types){ case "show": Layer.style.display="block"; break; case "hide": Layer.style.display="none

  • extJs 文本框后面加上说明文字+下拉列表选中值后触发事件

    复制代码 代码如下: var showForm; function panelShowForm() { showForm=null; showForm = new Ext.FormPanel({ renderTo:"showPanel", region:'north', border:false, bodyBorder:false, frame:true, waitMsgTarget: true, labelAlign:'right', id:"showForm",

  • js select多选列表传值代码

    js select /*移除左边选中的列表项到右边*/ function fMoveSelectedOptionsLeftToRight(oLeft,oRight) { if(!(oLeft&&oRight)) { return; } if(!hasOptions(oLeft)) { return; } if(oLeft.selectedIndex==-1) { oLeft.selectedIndex=0; } for(var i=0;i0) { oSelect.remove(ops.le

  • js实现下拉列表选中某个值的方法(3种方法)

    本文实例讲述了js实现下拉列表选中某个值的方法.分享给大家供大家参考,具体如下: 方法1: <select id="aa"> <option>1</option> <option>2</option> </select> <input type="button" value=" 选中" onclick="checkOption()" /> &l

  • javascript级联下拉列表实例代码(自写)

    javascript级联下拉列表实例代码(自写)

    Html dom 是指在w3c规范出现之前,各个浏览器支持的一些dom操作. 1,Select对象. 属性 a,selectedIndex:用户选择的选项的下标,下标从0开始 b,length: 获取或者设置选项的个数 c,options: 返回一个数组,数组元素是Option对象 2,Options对象 属性: a,text:选项的文本内容 b,value:选项的値 c,selected: 当该选项被选上,值为true,否则为false 小知识:创建一个Option对象 复制代码 代码如下:

  • jquery+json 通用三级联动下拉列表

    Author: shaoyun Email: shaoyun (at) yeah.net Date: 2010-03-10 02:03 Blog: http://shaoyun.cnblogs.com/ 用Jquery实现,原始代码只支持IE,这里我改了一下,我的代码里面有三个版本的实现 第一个是通过读取XML构建,支持IE/firefox,chrome不支持,有兴趣的可以将读取XML的部分改成AJAX的方式,这样chrome支持就不成问题 第二个是采用Json数据格式构建,是我的第二次尝试改进

  • JS无限树状列表实现代码

    JS无限树状列表实现代码

    tree.js 复制代码 代码如下: /******************************** 树形组织框架列表 v1.0 2011年1月6日 作者:flycrosscloud ********************************/ //初始化框架 var allImages = { HasNodeClose: "<img src='image/ftv2pnode.gif'/>", //包含子节点,闭合状态(不是最后一个) HasNodeOpen: &

  • javascript获取下拉列表框当中的文本值示例代码

    近日碰到一个问题,就是需要将用户点击下拉列表当中某个选项后,将其所选的内容保存起来,例如下面的HTML代码: 复制代码 代码如下: <select onchange="isSelected(this.value);" id="city"> <option value="1">北京</option> <option value="2" >上海</option> <

随机推荐