文档章节

视频分享网站首页:最热视频特效

别寒
 别寒
发布于 2014/12/02 13:58
字数 602
阅读 14
收藏 0

<!DOCTYPE>
<html>
<head>
    <title></title>
 
 <style>
  .hostVideo{
   width:208px;
   height:116px;
   border:0px solid #000;
   position:relative;
   cursor:pointer;
  }
  .hostVideoImg{
   position:relative;
   width:100%;
   height:100%;
  }
  .hostImg{
   width:208px;
   height:116px;
  }
  .hostMask{
   position:absolute;
   left:0;
   top:0;
   width:100%;
   height:100%;
   filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
   opacity:0;
  }
  .hostLonger{
   position:absolute;
   z-indent:2;
   left:7px;
   top:91px;
  }
  .hostVideomeg2{
   font-style:Tahoma;
   font-weight:400;
   color:#FFFFFF;
  }
  .hostVideomeg3{
   font:Tahoma, Helvetica, sans-serif;
   font-size:13px;
   color:#B2B2B2;
  }
  .hostAdd{
   z-indent:2;left:188px;top:95px; background-color:#737372;
  }
  .hostPlay{
   z-indent:2;left:7px;top:85px; background-color:#737372;
  }
  .hostVideoMeg{
   position:absolute;z-indent:2;left:7px;top:10px;
  }
  
 </style>

</head>
<body>

<h2>最热</h2>

<div class="hostVideo">

 <div class="hostVideoImg">   
  <img src="drfIMG.jpg" class="hostImg"/>
  <img src="shenmask.png" class="hostMask" title="行车记录仪"/>
  
  <div class="hostLonger">
   <font class="hostVideomeg2"><strong><大锅fun>歪果仁玩坏西游</strong></font><br>
  </div>
  
  <!-- 视频信息 -->
  <div style="display:none" class="hostVideoMeg">       
   <font class="hostVideomeg2"><strong><大锅fun>歪果仁玩坏西游</strong></font><br>
   <font class="hostVideomeg3">无节操上演男男“拥吻"</font><br>
   <font class="hostVideomeg3">1453次播放</font>
  </div>

  <!-- 立即播放 -->
  <div style="position:absolute;display:none" class="hostPlay">       
   <img src="play.png"/>
  </div>
  
  <!-- 添加 -->
  <div style="position:absolute; display:none;" class="hostAdd">
   <img src="add.png"/>
  </div>
  
 </div>

</div>

<hr>

<div class="hostVideo">

 <div class="hostVideoImg">   
  <img src="drfIMG.jpg" class="hostImg"/>
  <img src="shenmask.png" class="hostMask" title="行车记录仪"/>
  
  <div class="hostLonger">
   <font class="hostVideomeg2"><strong><大锅fun>歪果仁玩坏西游</strong></font><br>
  </div>
  
  <!-- 视频信息 -->
  <div style="display:none" class="hostVideoMeg">       
   <font class="hostVideomeg2"><strong><大锅fun>歪果仁玩坏西游</strong></font><br>
   <font class="hostVideomeg3">无节操上演男男“拥吻"</font><br>
   <font class="hostVideomeg3">1453次播放</font>
  </div>

  <!-- 立即播放 -->
  <div style="position:absolute;display:none" class="hostPlay">       
   <img src="play.png"/>
  </div>
  
  <!-- 添加 -->
  <div style="position:absolute; display:none" class="hostAdd">
   <img src="add.png"/>
  </div>
  
 </div>

</div>


<script type="text/javascript">
var hostVideo = document.getElementsByClassName("hostVideo");
var hostMask = document.getElementsByClassName("hostMask");
var hostLonger = document.getElementsByClassName("hostLonger");
var hostAdd = document.getElementsByClassName("hostAdd");
var hostPlay = document.getElementsByClassName("hostPlay");
var hostVideoMeg = document.getElementsByClassName("hostVideoMeg");

for(var i=0;i<hostVideo.length;i++){
 /*
  之所以用到闭包,原因是:内部函数在使用外部变量时使用引用的方式,其实相当于java中的引用传递,而非值传递。传递进来的引用只相当于一个指针,指向的是一个内存地址,这个内存地址存放的才是具体的值,而外面的循环会不断的修改这个存放地址中的值,所以最后循环结束之后,参数的值只能找到最后一个。
 */
 (function(){
  var p = i;
  hostVideo[p].onmouseover = function()
  {
    hostLonger[p].style.display = "none";
    hostAdd[p].style.display = "";
    hostPlay[p].style.display = "";
    hostVideoMeg[p].style.display = "";
   hostMask[p].style.opacity = "1";
   hostMask[p].style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity=50)"
  }
  hostVideo[p].onmouseout = function()
  {
    hostLonger[p].style.display = "";
    hostAdd[p].style.display = "none";
    hostPlay[p].style.display = "none";
    hostVideoMeg[p].style.display = "none";
   hostMask[p].style.opacity = "0";
   hostMask[p].style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity=0)"
  }
 })();
}

</script>

</body>
</html>

© 著作权归作者所有

别寒
粉丝 30
博文 273
码字总数 155300
作品 0
永州
程序员
私信 提问
短视频开发者大赛震撼来袭,火热 battle 就等你了!

摘要:要问时下什么最潮、最火? 年轻人最爱玩儿? 人机必备----- 短视频 App 15s 拍摄视频,记录生活 人人都是美好生活的导演家 酷炫、魔性、鬼畜短视频 个个都是潮流前线的潜力股 在这个全...

七牛云短视频大赛
2018/12/16
0
0
短视频APP开发:短视频特效SDK功能火爆来袭!

为什么短视频这么火呢?因为它符合了用户碎片化时间的需求,既娱乐了大众,又不会浪费用户太多时间。 短视频APP开发以互联网技术为核心,在原有的基础上不断进行创新,进而拥有多种强大的拍摄...

云豹小王子
2018/06/19
0
0
【抖音资料】送你一份抖音视频制作工具资料

每每看到很多抖音新玩家在群里问各种简单的问题,小编都觉得自己的责任重大。那么今天就帮大家整理一下玩抖音常用的工具吧。 ps:以下内容来自公众号:28推,部分工具涉及到网址,因为怕被关...

喵喵抖音运营分享
03/19
0
0
Manjaro KDE 17.1.12 截图赏

Manjaro KDE 17.1.12 截图赏 IMCN 2018年10月28日暂无评论 阅读 434 次 Manjaro KDE 17.1.12 是最新的稳定版本,最近开始对这款系统非常有兴趣,首先是Manjaro拥有无与伦比的软件数量并且易于...

IMCN
2018/10/28
0
0
一些程序员用到的网站(摘抄的)

1、博客园(http://www.cnblogs.com/) 博客园创立于2004年1月,是一个面向开发者的知识分享社区。自创建以来,博客园一直致力并专注于为开发者打造一个纯净的技术交流社区,推动并帮助开发者通...

AAA年华
2017/11/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Handler简解

Handler 这里简化一下代码 以便理解 Handler不一定要在主线程建 但如Handler handler = new Handler(); 会使用当前的Looper的, 由于要更新UI 所以最好在主线程 new Handler() { mLooper = Lo...

shzwork
21分钟前
3
0
h5获取摄像头拍照功能

完整代码展示: <!DOCTYPE html> <head> <title>HTML5 GetUserMedia Demo</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum......

诗书易经
24分钟前
3
0
正向代理和反向代理

文章来源 运维公会:正向代理和反向代理 1、正向代理 (1)服务对象不同 正向代理服务器的服务对象是客户端,可以将客户端和代理服务器看作一个整体。 (2)配置方法不同 需要在客户端配置代...

运维团
40分钟前
4
0
5个避免意外论文重复率高的方法

即使你不是故意抄袭,但你可能在无意中抄袭了别人的论文, 这个叫做意外抄袭,它可能正发生在你身上,如果你不熟悉学术 道德规范,这里将告诉你5个基本的方法来避免意外抄袭。 Tip1 熟悉其他...

论文辅导员
41分钟前
4
0
Maven通过profiles标签读取不同的配置

<profiles> <profile> <id>dev</id> <properties> <profiles.active>dev</profiles.active> </properties> ......

时刻在奔跑
47分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部