以前一直以为遮罩都是鼠标移上去,改变透明度实现的,后来看到过这样的一个遮罩动画,然后今天自己写了一个,因为弹出的遮罩是圆形的,所以从美观上来说,这个遮罩效果更适合于方形图片。

<div class="container">
<ul class="bannerHolder">
<li>
<div class="banner">
<a href="#"><img src="1.jpg" width="150" height="150"></a>
<p>这是第一张图片</p>
<div class="cornerTL"></div>
<div class="cornerTR"></div>
<div class="cornerBL"></div>
<div class="cornerBR"></div>
</div>
</li>
<li>
<div class="banner">
<a href="#"><img src="2.jpg" width="150" height="150"></a>
<p>这是第二张图片</p>
<div class="cornerTL"></div>
<div class="cornerTR"></div>
<div class="cornerBL"></div>
<div class="cornerBR"></div>
</div>
</li>
<li>
<div class="banner">
<a href="#"><img src="3.jpg" width="150" height="150"></a>
<p>这是第三张图片</p>
<div class="cornerTL"></div>
<div class="cornerTR"></div>
<div class="cornerBL"></div>
<div class="cornerBR"></div>
</div>
</li>
<li>
<div class="banner">
<a href="#"><img src="4.jpg" width="150" height="150"></a>
<p>这是第四张图片</p>
<div class="cornerTL"></div>
<div class="cornerTR"></div>
<div class="cornerBL"></div>
<div class="cornerBR"></div>
</div>
</li>
<li>
<div class="banner">
<a href="#"><img src="5.jpg" width="150" height="150"></a>
<p>这是第五张图片</p>
<div class="cornerTL"></div>
<div class="cornerTR"></div>
<div class="cornerBL"></div>
<div class="cornerBR"></div>
</div>
</li>
<li>
<div class="banner">
<a href="#"><img src="6.jpg" width="150" height="150"></a>
<p>这是第六张图片</p>
<div class="cornerTL"></div>
<div class="cornerTR"></div>
<div class="cornerBL"></div>
<div class="cornerBR"></div>
</div>
</li>
</ul>
</div>

首先,是一个class名为container的div作为容器来放置这些图片,然后用ul li标签来排列图片,这里需要着重说明的是,将图片,文字,还有四周遮罩都放在一个class名为banner的div里。

 @charset "utf-8";
html, body, p {
border: 0 ;
margin:;
padding:;
outline-style: none;
font-size: 12px;
}
.container{
margin: 50px; }
.bannerHolder{
width: 1020px;
padding: 20px 10px 20px 10px;
background-color: #f7f7f7;
overflow: hidden; border-radius: 12px;
}
.bannerHolder li {
list-style: none;
display: inline;
}
.banner{
width: 150px;
height: 150px;
cursor: pointer;
position: relative;
float: left;
overflow: hidden; margin: 0 10px;
}
.banner img {
display: block;
border: none;
}
.banner div{
width: 60px;
height:60px;
background-color: #222;
opacity: 0.3;
z-index:;
position: absolute;
border-radius: 100px;
}
.banner .cornerTL { left:-63px; top:-63px; }
.banner .cornerTR { right:-63px; top:-63px; }
.banner .cornerBL { left:-63px; bottom:-63px; }
.banner .cornerBR { right:-63px; bottom:-63px; }
.banner p{
width: 100%;
left:;
position: absolute;
color: #fff;
z-index:;
text-align: center;
display: none;
top:65px;
cursor: pointer;
}

这是css的部分,.banner中设置左浮动使图片等行排列,并且.banner的宽和高与图片的宽和高一致,这样弹出的遮罩的圆才会在中心处。将遮罩cornerTL  cornerTR  cornerBL  cornerBR放在四个角上,然后通过div的overflow: hidden将遮罩隐藏起来

<script type="text/javascript">
$('.banner').hover(function(){
var el = $(this);
el.find('div').stop().animate({width:220,height:220},'slow',function(){
el.find('p').fadeIn('fast');
});
},function(){
var el = $(this);
el.find('p').hide();
el.find('div').stop().animate({width:60,height:60},'fast');
}).click(function(){
window.open($(this).find('a').attr('href'));
});
</script>

这是jquery的部分,注意首先要引入jquery的库。

然后通过hover来实现鼠标移进移出的功能。用animate动画将遮罩的宽和高放大,四角重叠,实现好看的遮罩,并且文字的出现和消失,以及点击会打开一个新的页面。

这是最后实现的效果图,遮罩会从四周弹出,自己下载代码看一下吧。

jquery动画遮罩的更多相关文章

  1. jQuery动画的实现

    没有引入deferred机制,其余流程都有了 //////////// //创建动画缓动对象 // //////////// function Tween(value, prop, animation ...

  2. 深入学习jQuery动画控制

    × 目录 [1]动画状态 [2]停止动画 [3]动画延迟[4]全局控制 前面的话 jQuery动画可以使用fade.hide.slide等方法实现基本动画效果,可以使用animate实现自定义动画,甚 ...

  3. 深入学习jQuery动画队列

    前面的话 队列实现是jQuery非常棒的一个拓展,使用动画队列可以使动画更容易实现.本文将详细介绍jQuery动画队列 queue() queue()方法用来显示在匹配的元素上的已经执行的函数队列 q ...

  4. jquery动画,基础以及我发现的新大陆

    $.animate()在jquery官方介绍有2中方式,其实我发现的新大陆也是第二种方式的扩展! 一.$.animate( properties [, duration ] [, easing ] [ ...

  5. 让网站动起来!12款优秀的 jQuery 动画插件推荐

    如今,大多数设计师和开发人员被要客户要求开发动态的网站.创造视觉震撼和醒目的动态网站是艰巨的任务,因为它需要大量的努力和创造力.在网络上有大量的工具和插件可用于创建网站动画.许多开发人员正在使用 HT ...

  6. jQuery动画特效实例教程

    本文以实例形式详细讲述了jQuery动画特效的实现方法. 1.自制折叠内容块 内容块如下:     <div class="module">   <div cla ...

  7. JQuery动画效果

    jquery动画效果常用方法 1.show()显示效果语法:show(speed,callback)Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slo ...

  8. jQuery动画特效笔记

    show().hide().fadeIn().fadeOut().slideDown.slideUp.slideToggle()都接受可选的时长和回调参数(选项对象参数). toggle(durati ...

  9. Velocity – 另外一款加速的 jQuery 动画插件

    Velocity 是一款 jQuery 插件,重新实现了 $.animate() 方法,提供更高的性能(比 CSS 动画还更快),同时包括一些新的功能,以改进动画工作流程.Velocity 除了包括所 ...

随机推荐

  1. Could not write metadata for '/taiping-sol-insu-composite'.

    Could not write metadata for '/taiping-sol-insu-composite'. 这是由于删除一个项目时,没有同时在硬盘上删除该项目,而后又到硬盘文件系统中删除了 ...

  2. 在CentOS之上搭建VMware Player 7

    1.下载VMware-Player-7.1.2安装包 百度网盘下载地址: 链接:http://pan.baidu.com/s/1nudfo6H 密码:oemc 直接下载地址: https://down ...

  3. tcpproxy:基于 Swoole 实现的 TCP 数据包转发工具的方法

    假设我们希望有一台机器A(ip 192.168.1.101)要开放端口6379给用户访问,但可能实际情况是用户无法直接访问到A(ip 192.168.1.101), 但却有一台机器B(ip 192.1 ...

  4. PostgreSQL中如何查看一个表所对应的文件

    通过pg_relation_filepath可以直接表(索引)对象对应的物理文件在哪里? 上面截图是“德哥”做的ppt:上面有详细解释! 当然也可以通过 系统表 pg_class 可以直接查出对应的物 ...

  5. 《深度探索C++对象模型》3

    第六章:执行期语意学 全局对象的初始化: 局部静态对象的初始化: 构建对象数组的vec_new()函数: 针对数组的new操作: placement operator new: 反聚合提高效率: 模板 ...

  6. Linux下Date命令的用法

    转自http://blog.chinaunix.net/uid-8223172-id-2511672.html linux下date的用法比较复杂,但是也用的比较多,尤其是shell里面.现总结一下自 ...

  7. [OSG][转]osg格式文件

    转自:http://blog.csdn.net/timothyfly/article/details/7826139 osg格式文件中如何处理多个节点共享一个子节点 下面一段程序中,共有三个Group ...

  8. Oracle 11gR2中启动Scott用户的方法

    Oracle 中启动 Scott 用户 的方法 , 在 Oracle11gR2, (g 代表‘网络’的意思) 数据库中 Scott 这个用户 安装时是被锁定的,安装 Oracle的时候 ,你可以直接选 ...

  9. Android 自定义ScrollView ListView 体验各种纵向滑动的需求

      分类: [android 进阶之路]2014-08-31 12:59 6190人阅读 评论(10) 收藏 举报 Android自定义ScrollView纵向拖动     转载请标明出处:http: ...

  10. 查找练习 hash——出现过的数字 分类: 查找 2015-06-18 17:30 7人阅读 评论(0) 收藏

    查找练习 hash--出现过的数字 *Time Limit: 1000ms Memory limit: 65536K 有疑问?点这里^_^ 题目描述 有一个数据字典,里面存有n个数字(n<=10 ...