注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

米欧互联

No matter what you want to express……

 
 
 

日志

 
 
关于我

{ note: ‘不会编程的设计狮不是好科研狗’ }

网易考拉推荐

遮罩层js代码  

2013-11-10 15:36:08|  分类: js |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

效果图:
遮罩层js代码 - 湖小叶叶 - 米欧光影工作室
 
本质就是两层,显示一个img,hidden一个出下界的div;
当鼠标移动到img层时,下面的div层向上移动并显示出来。


1.外框架设置
position: relative;
overflow: hidden;

写两个并列的div,
第一个直接是img,
第二个设置绝对坐标;
position: absolute;
left: 0;
top: 234px;
并设置半透明:
background-color: #000;
filter: alpha(opacity=70); /*兼容IE*/
background-color: rgba(0,0,0,.7);  /* css3 */

2.引用jq库,js代码如下:
$(this).hover(function(){
$(this).find('.vms-al-text').animate({'top':'0'},_pace);
},function(){
$(this).find('.vms-al-text').animate({'top':'234px'},_pace);
});


具体代码:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VMS-微电影制作与传播</title>
<link rel="shortcut icon" href="http://vms.vmovier.com/images/favicon.ico" />
<meta name="keywords" content="VMS|微电影制作|微电影传播|微电影发行|新媒体视频" />
<meta name="application-name" content="VMS_微电影制作与传播" />
<meta name="description" content="VMS-VMS依托于国内最大的微电影平台V电影,是一家专注于互联网影视内容的制作,传播与发行的影视机构.这是一个广告既内容,内容既广告的互联网影视时代,我们更加了解如何将品牌需求与互联网影视内容结合.">

<style>
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
width: 100%
}

body {
width: 100%;
margin: 0;
font-family: "Microsoft Yahei",Arial,sans-serif;
font-size: 12px;
line-height: 1.8em;
color: #FFF;
cursor: default;
background-color: #000;
background: url(../images/vms-bg.png) repeat 0 0 transparent
}

img {
outline: 0;
border: 0
}

p {
margin-top: 0
}

a {
text-decoration: none;
color: #fff
}

a:hover {
color: #4bf
}

.inb {
display: inline-block;
*display: inline;
zoom: 1
}

.inb-f {
letter-spacing: -0.31em;
word-spacing: -0.43em;
font-size: 0;
*letter-spacing: normal
}

.inb-f>* {
letter-spacing: normal;
word-spacing: normal;
font-size: 12px;
}

.tl {
text-align: left
}



.w960 {
width: 960px;
margin-left: auto;
margin-right: auto
}


.vt {
vertical-align: top
}

.vm {
vertical-align: middle
}


.ft14 {
font-size: 14px
}


.ft16 {
font-size: 16px
}


.mb10 {
margin-bottom: 10px
}


.vms-s-t {
font-size: 64px;
font-weight: 500;
line-height: 80px;
margin-bottom: 40px;
height: 80px;
}

.vms-ror {
width: 100%
}

.vms-ror img {
width: 100%;
height: auto
}

.vms-intro {
text-indent: 2em;
font-size: 16px;
line-height: 1.8em;
width: 800px;
height: 84px;
margin: 0 auto 60px
}

.vms-s-item {
width: 33%
}

.vms-s-intro {
margin: 0 10px 0 15px;
text-indent: 2em;
color: #8a8a8a;
font-size: 14px
}

.vms-al-item {
position: relative;
width: 230px;
height: 230px;
padding: 2px;
overflow: hidden;
cursor: pointer
}

.vms-al-item span.num {
font-size: 18px;
color: #f09609;
margin-right: 2px
}

.vms-al-text {
position: absolute;
left: 0;
top: 234px;
width: 190px;
height: 190px;
padding: 22px;
background-color: #000;
filter: alpha(opacity=70);
background-color: rgba(0,0,0,.7)
}

.vms-al-text p {
margin-top: 0;
color: #FFF;
line-height: 2em
}

.vms-al-text p:last-child {
margin-bottom: 0
}




</style>
</head>
<body style="background-color:#000;">

<div class="vms-s-t w960">我们的案例.</div>
<div class="tl inb-f w960" id="id-al">
<a href="http://www.56.com/u65/v_OTQ1OTM1NDI.html" target="_blank" class="vms-al-item inb vt">
<img src="http://vms.vmovier.com/images/haokelai.jpg" alt="这些年一路有你_VMS_微电影制作与发行" width="230px" height="230px">
<div class="vms-al-text tl ft14">
<p class="mb10 ft16">豪客来感人微电影《这些年一路有你》 </p>
<p><span class="num">17</span>家视频网站首页推荐<br><span class="num">20</span>个微博名人转发<br><span class="num">3</span>家传统媒体报道<br>全网播放超<span class="num">500</span>万次</p>
</div>
</a>
<a href="http://v.youku.com/v_show/id_XNjEwMzg1MzM2.html" target="_blank" class="vms-al-item inb vt">
<img src="http://vms.vmovier.com/images/9gay.jpg" alt="九个Gay教你治愈失恋_VMS_微电影制作与发行" width="230px" height="230px">
<div class="vms-al-text tl ft14">
<p class="mb10 ft16">Zank推广微电影《九个Gay教你治愈失恋》 </p>
<p><span class="num">9</span>家视频网站首页推荐<br><span class="num">10</span>个微博名人转发<br>全网播放超<span class="num">300</span>万次</p>
</div>
</a>
<a href="http://www.56.com/u78/v_ODU2NzgxODc.html" target="_blank" class="vms-al-item inb vt">
<img src="http://vms.vmovier.com/images/dongrinuanyang.jpg" alt="冬日暖阳_VMS_微电影制作与发行" width="230px" height="230px">
<div class="vms-al-text tl ft14">
<p class="mb10 ft16">顺风车活动微电影《冬日暖阳》 </p>
<p><span class="num">10</span>家视频网站首页推荐<br><span class="num">20</span>个微博名人转发<br>全网播放超<span class="num">500</span>万次</p>
</div>
</a>
<a href="http://v.youku.com/v_show/id_XNDg5NjU5NTYw.html" target="_blank" class="vms-al-item inb vt">
<img src="http://vms.vmovier.com/images/dongmian.jpg" alt="冬眠_VMS_微电影制作与发行" width="230px" height="230px">
<div class="vms-al-text tl ft14">
<p class="mb10 ft16">科幻微电影《冬眠》 </p>
<p>上百人线下首映礼<br><span class="num">17</span>家视频网站首页推荐<br><span class="num">10</span>个微博名人转发<br><span class="num">3</span>家传统媒体报道<br>全网播放超<span class="num">1000</span>万次</p>
</div>
</a>
<a href="http://www.56.com/u77/v_OTUxNDc3Nzg.html" target="_blank" class="vms-al-item inb vt">
<img src="http://vms.vmovier.com/images/anna.jpg" alt="想念安娜_VMS_微电影制作与发行" width="230px" height="230px">
<div class="vms-al-text tl ft14">
<p class="mb10 ft16">爱情微电影《想念安娜》</p>
<p><span class="num">14</span>家视频网站首页推荐<br><span class="num">10</span>个微博名人转发<br>全网播放超<span class="num">1000</span>万次</p>
</div>
</a>
<a href="http://www.56.com/u33/v_ODk4NjM1MTA.html" target="_blank" class="vms-al-item inb vt">
<img src="http://vms.vmovier.com/images/los.jpg" alt="洛城往事_VMS_微电影制作与发行" width="230px" height="230px">
<div class="vms-al-text tl ft14">
<p class="mb10 ft16">美国微电影《洛城往事》 </p>
<p><span class="num">17</span>家视频网站首页推荐<br><span class="num">10</span>个微博名人转发<br>全网播放超<span class="num">1000</span>万次</p>
</div>
</a>
<a href="http://v.youku.com/v_show/id_XNTkyNTMwOTE2.html" target="_blank" class="vms-al-item inb vt">
<img src="http://vms.vmovier.com/images/red-daisy.jpg" alt="红菊_VMS_微电影制作与发行" width="230px" height="230px">
<div class="vms-al-text tl ft14">
<p class="mb10 ft16">亲情疏离微电影《红菊》</p>
<p><span class="num">10</span>家视频网站<br><span class="num">10</span>个微博名人转发<br>全网<span class="num">200</span>万播放量</p>

</div>
</a>
<a href="http://v.youku.com/v_show/id_XNjE0MDM4ODY4.html" target="_blank" class="vms-al-item inb vt">
<img src="http://vms.vmovier.com/images/jobs.jpg" alt="电影《乔布斯传》映前短片_VMS_微电影制作与发行" width="230px" height="230px">
<div class="vms-al-text tl ft14">
<p class="mb10 ft16">电影《乔布斯传》映前短片</p>
<p><span class="num">20</span>余名互联网知名人士参与<br><span class="num">10</span>个微博名人转发<br>全网播放超<span class="num">500</span>万次</p>
</div>
</a>
<a href="http://www.56.com/u88/v_OTgxNzIyNjE.html" target="_blank" class="vms-al-item inb vt">
<img src="http://vms.vmovier.com/images/du.jpg" alt="感人微电影《独臂父亲》_VMS_微电影制作与发行" width="230px" height="230px">
<div class="vms-al-text tl ft14">
<p class="mb10 ft16">感人微电影《独臂父亲》</p>
<p><span class="num">6</span>家视频网站首页推荐<br>全网播放超<span class="num">200</span>万次<br><span class="num">15</span>个微博名人转发</p>
</div>
</a>
<a href="http://v.youku.com/v_show/id_XNjIxNTM2OTY0.html" target="_blank" class="vms-al-item inb vt">
<img src="http://vms.vmovier.com/images/80-ontheway.jpg" alt="创业励志微电影《80后在路上》_VMS_微电影制作与发行" width="230px" height="230px">
<div class="vms-al-text tl ft14">
<p class="mb10 ft16">创业励志微电影《80后在路上》</p>
<p><span class="num">10</span>余名互联网创业精英参与<br><span class="num">8</span>个微博名人转发<br><span class="num">6</span>家视频网站首页推荐<br>全网播放<span class="num">80</span>万次</p>
</div>
</a>
</div>



<script type="text/javascript" src="http://vms.vmovier.com/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
var _pace = 300;//设置遮罩上升下降的速度
$('#id-al>a').each(function(){
$(this).hover(function(){
$(this).find('.vms-al-text').animate({'top':'0'},_pace);
},function(){
$(this).find('.vms-al-text').animate({'top':'234px'},_pace);
});
});
});
</script>

</body>
</html>


refer
1.此网页 我们的案例部分的效果:http://vms.vmovier.com
  评论这张
 
阅读(283)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018