jquery 图片遮罩 坠落遮挡效果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="div1" style="margin-top: 30px;width: 160px;height: 160px;background-color: silver;position:relative; ">
<img src="1_chelen_jak.jpg" style="overflow: hidden">
<div class="box" style="width: 100%;height: 100%;position:absolute;opacity: 0.8;background-color: #002a80; top: 220px">
<p style="color: #fff">功夫不负有心人</p>
</div>
</div>
<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
<script type="text/javascript">
$('.div1').hover(
function(){
$('.box').animate({'top':0},300);
},
function(){
$('.box').animate({'top': 300},200);
}
);
</script>
</body>
</html>
下了个例子,结果里面内容太多,很多定位,overflow,一下子没明白过来,我一直不知道那个box遮盖层在哪里,原来box自己设置了top自己top到上面或者底下去了,
再加上被一底层固定高度给overflow:hidden;
这个效果 给整个容器定个位position:relitive;
把box遮盖层定个位position:absolute,top:-px;到对象的上面去或者top:px到对象底部看不见的地方
因为box相对容器绝对定位,所以添加hover(function,function)等鼠标移入容器区域的时候,设置box的top为0,就到覆盖了容器
$("容器").animate({'top':0}); animate是动画效果的移动,我之前还以为加了fadein()呢,鹅鹅鹅
鼠标移除的时候把box的top设置大一点的数字,放到对象的上面或者底部看不见的地方就行了
overflow
jquery 图片遮罩 坠落遮挡效果的更多相关文章
- 基于jQuery图片遮罩滑动文字切换特效
基于jQuery图片遮罩滑动文字切换特效.这是一款jquery hover鼠标滑动选项卡切换透明背景遮罩文字显示特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- SlipHover,能感知鼠标方向的图片遮罩效果jQuery插件
接上一篇博文,介绍完jQuery插件开发后这里上一个自己的作品,也是初次实践,小有成就的感觉. 话说这个插件年前就写好了,然后挂到GitHub,然后就偷偷看着Google Analysis心中暗自激动 ...
- jquery图片放大镜和遮罩层效果
图片放大镜效果将借助于jqzoom插件,遮罩层借助于thickbox插件. 1.引入样式表 /*整体样式*/ <link rel="stylesheet" href=&quo ...
- 基于jquery hover图片遮罩层滑动
分享一款基于jquery hover图片遮罩层滑动.这是一款仿腾讯课堂的鼠标悬停经过图片遮罩透明层滑动效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div clas ...
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
- [读码][js,css3]能感知鼠标方向的图片遮罩效果
效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果]近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证.读码就要读比较全面的,读像是原著的代码.代码 ...
- 纯CSS3写的10个不同的酷炫图片遮罩层效果【转】
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...
- 纯CSS3写的10个不同的酷炫图片遮罩层效果
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- 支持移动触摸的jQuery图片Lightbox插件
简介 这是一款支持移动触摸设备的简洁jQuery图片Lightbox插件.该LightBox插件可以在移动手机和桌面设备中运行,它具有响应式,预加载图片,键盘支持等特点,非常实用.它的特点还有: 响应 ...
随机推荐
- 刚下载的几个开源的Android项目
Android-Universal-Image-Loader Android上最让人头疼的莫过于从网络获取图片.显示.回收,任何一个环节有问题都可能直接OOM,这个项目或许能帮到你. Universa ...
- WisDom .net开发框架设计 2
随笔- 10 文章- 0 评论- 57 WisDom .net开发框架设计 (二) WisDom .net 权限设计 1.前言 几乎在所有的管理的系统,都离不开用户,角色,权 ...
- Oracle 补丁及opatch 工具介绍
一. CPU(Critical Patch Update) 一个CPU内包含了对多个安全漏洞的修复,并且也包括相应必需的非安全漏洞的补丁.CPU是累积型的,只要安装最新发布的CPU即可,其中包括之前发 ...
- 10.26最后的模拟DAY2 改造二叉树[中序遍历+严格递增的最长不下降子序列]
改造二叉树 [题目描述] 小Y在学树论时看到了有关二叉树的介绍:在计算机科学中,二叉树是每个结点最多有两个子结点的有序树.通常子结点被称作“左孩子”和“右孩子”.二叉树被用作二叉搜索树和二叉堆.随后他 ...
- 基于 Aliexpress API 的小程序 : 批量 Copy 产品到不同的店铺
第一个基于 Aliexpress API 的小程序 : 批量 Copy 产品到不同的店铺 还没来得及用 API 重写软件, 先写个小程序来缓解一下手工压力: 批量Copy 产品到不同的店铺. 开网店 ...
- 一键搭键php网站环境的系统
QzzmServer v2.0正式版发布 首先,感谢网友的热情的测评及反馈,现QzzmServer 2.0正式版已发布.有些朋友反馈制作一个服务器专用版本,在下已将此列入计划中,敬请大家耐心等候. Q ...
- Git命令行连Github与TortoiseGit 连Github区别
如果是用git 通过命令行的方式连接github,那么只需要通过命令 $ ssh-keygen -t rsa -C "your_email@youremail.com" 生成rsa ...
- 限制某个进程只能在某个CPU上运行
首先可以调用GetSystemInfo查看有多少个CPU,再通过调用: BOOL WINAPI SetProcessAffinityMask( __in HANDLE hProcess, __in D ...
- 使用Varnish+ESI实现静态页面的局部缓存(思路篇)
使用Varnish+ESI实现静态页面的局部缓存(思路篇) 页面静态化是搭建高性能网站必用的招式之一,页面静态化可以有效提升系统响应速度,同时也有利于搜索引擎优化.但在页面静态化后,静态页面之间包含( ...
- php三中页面跳转方式(header、location、refresh) 乐杨俊
反法三:也是用的比较多的