<!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 图片遮罩 坠落遮挡效果的更多相关文章

  1. 基于jQuery图片遮罩滑动文字切换特效

    基于jQuery图片遮罩滑动文字切换特效.这是一款jquery hover鼠标滑动选项卡切换透明背景遮罩文字显示特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  2. SlipHover,能感知鼠标方向的图片遮罩效果jQuery插件

    接上一篇博文,介绍完jQuery插件开发后这里上一个自己的作品,也是初次实践,小有成就的感觉. 话说这个插件年前就写好了,然后挂到GitHub,然后就偷偷看着Google Analysis心中暗自激动 ...

  3. jquery图片放大镜和遮罩层效果

    图片放大镜效果将借助于jqzoom插件,遮罩层借助于thickbox插件. 1.引入样式表 /*整体样式*/ <link rel="stylesheet" href=&quo ...

  4. 基于jquery hover图片遮罩层滑动

    分享一款基于jquery hover图片遮罩层滑动.这是一款仿腾讯课堂的鼠标悬停经过图片遮罩透明层滑动效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div clas ...

  5. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  6. [读码][js,css3]能感知鼠标方向的图片遮罩效果

    效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果]近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证.读码就要读比较全面的,读像是原著的代码.代码 ...

  7. 纯CSS3写的10个不同的酷炫图片遮罩层效果【转】

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...

  8. 纯CSS3写的10个不同的酷炫图片遮罩层效果

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  9. 支持移动触摸的jQuery图片Lightbox插件

    简介 这是一款支持移动触摸设备的简洁jQuery图片Lightbox插件.该LightBox插件可以在移动手机和桌面设备中运行,它具有响应式,预加载图片,键盘支持等特点,非常实用.它的特点还有: 响应 ...

随机推荐

  1. Hdu 1016 Prime Ring Problem (素数环经典dfs)

    Prime Ring Problem Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...

  2. 一个小团队TDD游戏及实践

    介绍的这个游戏是自己根据目前带的团队的实际情况来制定的, 在游戏实践过程中,收到了较好的效果,故打算把这个游戏分享出来,一是分享一下实践,而是集思广益,不断完善,更好的利用游戏来锻炼队伍.下面就将游戏 ...

  3. DNN简介以及安装

    开源框架DNN简介以及安装 donetnuke 是一款免费的开源cms框架,目前也有收费版,不过免费版也可以适应大家大部分的需求.我前些阵子是老板让我在20天内,做好一个官网并且发布,并且指定使用dn ...

  4. logistic回归 c++ 实现

    logistic回归是统计学习中经典的分类方法,他属于对数线性模型.本博文主要给出logistic的c++实现,具体理论请读者自行google. 本文用到的数据集来自于一个医学网站,具体出处不记得了( ...

  5. GTK+编程概述

    目标 什么是GTK? 怎样做一个GTK应用程序 事件(Events).信号(Signals).回调函数(Callbacks) 组件(widgets) 引言 GIMP工具包(GTK+)最初被设计为一个光 ...

  6. AspNetWebApi管线中如果定义两种类型的消息处理程序（全局/路由)

    AspNetWebApi管线中如果定义两种类型的消息处理程序(全局/路由) 在AspNetWebApi管线中存在两种类型的消息处理程序(Message Handler) 1.全局消息处理程序,所有的请 ...

  7. PDF.NET开发框架性能剖析

    PDF.NET开发框架性能剖析 前俩天发布了 关于PDF.NET开发框架对Mysql Sqlite PostgreSQL数据库分页支持的个人看法 ,说明了本人对框架的一些介绍和看法.今天我们一起思考一 ...

  8. javascript中字符串常用操作整理

    javascript中字符串常用操作整理 字符串的操作在js中非常频繁,也非常重要.以往看完书之后都能记得非常清楚,但稍微隔一段时间不用,便会忘得差不多,记性不好是硬伤啊...今天就对字符串的一些常用 ...

  9. revel框架教程之权限控制

    Go语言实战 - revel框架教程之权限控制 一个站点上面最基本都会有三种用户角色,未登录用户.已登录用户和管理员.这一次我们就来看看在revel框架下如何进行权限控制. 因为revel是MVC结构 ...

  10. zabbix实现对磁盘动态监控

    zabbix实现对磁盘动态监控 前言 zabbix一直是小规模互联网公司服务器性能监控首选,首先是免费,其次,有专门的公司和社区开发维护,使其稳定性和功能都在不断地增强和完善.zabbix拥有详细的U ...