用过Arcgis的筒子们对于Arcmap里面的一个卷帘效果肯定记忆很深刻，想把它搬到自己的WebGIS系统中去，抱着同样的想法，我也对这种比较炫的卷帘效果做了一下研究，吼吼，出来了，给大家汇报一下成果，先看张图：

卷帘效果

看到这样的效果，你是不是小鸡动了一下，嘿嘿，别急，听我慢慢道来。

首先，容器。分别用两个DIV来显示两个不同时期的影像。接下来设置两个容器的样式，代码：

#after{
    position: absolute;
    top: 0px;
    left: 0px;
    background-image: url(../images/24.jpg);
    width: 940px;
    height: 529px;
    background-repeat: no-repeat;
}
#before{
    position: absolute;
    top: 0px;
    left: 0px;
    border-right: 3px solid #f00;
    background-image: url(../images/23.jpg);
    width: 433px;
    height: 529px;
    background-repeat: no-repeat;
    max-width: 940px;
}

这样，图片就在web上显示出来了。

接下来实现卷帘效果。实现卷帘，最主要的是设置before的宽度，如何去设置呢，就是获取鼠标的位置，代码如下：

        function RollImage(evt){
            var x=evt.pageX;
            console.log(x);
            $("#before").css("width",x+"px");
        }
    </script>

这样，卷帘的效果就实现了。源代码如下：

style.css

.beforeafter{
    width: 940px;
    height: 529px;
}
#after{
    position: absolute;
    top: 0px;
    left: 0px;
    background-image: url(../images/24.jpg);
    width: 940px;
    height: 529px;
    background-repeat: no-repeat;
}
#before{
    position: absolute;
    top: 0px;
    left: 0px;
    border-right: 3px solid #f00;
    background-image: url(../images/23.jpg);
    width: 433px;
    height: 529px;
    background-repeat: no-repeat;
    max-width: 940px;
}

test.html

<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml"><head>
    <title>日本地震灾区前后对比</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Language" content="zh-CN">
    <link href="css/roll.css" type="text/css" rel="stylesheet">
    <script src="../jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        function RollImage(evt){
            <strong>var x=evt.pageX;
          $("#before").css("width",x+"px");</strong>
        }
    </script>
</head>
<body>
<div class="beforeafter" onmousemove="RollImage(event)">
    <div id="after"></div>
    <div id="before"> </div>
</div>
</body>
</html>

Javascript+CSS实现影像卷帘效果的更多相关文章

  1. 应用ArcGIS Server JavaScript API实现地图卷帘效果实现

    var maskDynamicMapServiceLayer = null; var maskDynamicMapServiceLayerDiv = null; var pointNumb = 0; ...

  2. HTML+CSS+Javascript实现轮播图效果

    HTML+CSS+Javascript实现轮播图效果 注意:根据自己图片大小来更改轮播图大小. <!doctype html> <html> <head> < ...

  3. 原生JS、CSS实现的转盘效果（目前仅支持webkit）

    这是一个原生JS.CSS实现的转盘效果(题目在这:http://www.cnblogs.com/arfeizhang/p/turntable.html),花了半个小时左右,准备睡觉,所以先贴一段代码, ...

  4. 实用js+css多级树形展开效果导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. js+css实现带缓冲效果右键弹出菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. CSS 实现图片灰度效果 兼容各种浏览器

    CSS 实现图片灰度效果 兼容各种浏览器如360浏览器 CSS实现图片灰度效果就是通过CSS样式让彩色图片呈现为灰色,相当于把一张图像的颜色模式调整为灰度,CSS可以通过以下几种方法来实现灰度效果. ...

  7. javascript 45种缓动效果BY司徒正美

    javascript 45种缓动效果 参数 类型 说明 el element 必需,为页面元素 begin number 必需,开始的位置 change number 必需,要移动的距离 durati ...

  8. 不可思议的纯 CSS 实现鼠标跟随效果

    直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS 负责表现,JavaScript 负责行为.而鼠标跟随这种效果属于行为,要实现通常都需要 ...

  9. 不可思议的纯 CSS 滚动进度条效果

    结论先行,如何使用 CSS 实现下述滚动条效果? 就是顶部黄色的滚动进度条,随着页面的滚动进度而变化长短. 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS , ...

随机推荐

  1. Linux主从同步监测和利用sendMail来发邮件

    首先介绍下sendMail About SendEmailSendEmail is a lightweight, command line SMTP email client. If you have ...

  2. Django基础——模板层(template) （Day67）

    阅读目录 变量 标签 自定义过滤器和标签 模板层(template) 你可能已经注意到我们在例子视图中返回文本的方式有点特别. 也就是说,HTML被直接硬编码在 Python代码之中. 1 2 3 4 ...

  3. LINQ 获取当前数组中出现次数最多的元素

    LINQ 获取当前数组中出现次数最多的元素 1  List<string> a = new List<string>();              a.Add(        ...

  4. dobbo 简单框架

  5. 学习地址 hadoop生态圈

    http://my.oschina.net/leejun2005/blog/140462 http://www.codelast.com/?p=3621&cpage=1#comment-361 ...

  6. React Native中加载指示器组件ActivityIndicator使用方法

    这里讲一下React Native中的一个组件——ActivityIndicator,这是一个加载指示器,俗称菊花,很常见的,效果如下所示: 可以看到图中有两个加载指示器,一大一小,这是尺寸不是我设置 ...

  7. 在Linux系统下使用Github的基本教程

    1. 安装git: sudo apt-get install git-core git-gui git-doc 2.到https://github.com/ 注册一个帐号,一会儿客户端登录的时候要使用 ...

  8. JavaEE之反射

    反射定义简单表述: 对于任意一个(动态的)运行中的类,我们都可以解剖它,获取类中的构造方法,成员变量,成员方法. 类的加载 (1)加载 就是指将class文件读入内存,并为之创建一个Class对象. ...

  9. 超详细 Linux 下编译安装Redis 以及php配套使用

    一.Linux 下安装Redis 下载地址:http://redis.io/download,下载最新文档版本. 把鼠标移到上图的绿色框上,就会显示下图提示:(直接右键复制链接就好) 本教程使用的旧版 ...

  10. spark数据监控实战

    版权申明:转载请注明出处.文章来源:http://bigdataer.net/?p=248 排版乱?请移步原文获得更好的阅读体验   1.概述 数据准确性,稳定性,时效性是数据开发中需要重点关注的,一 ...