用过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. redis.conf配置项说明

    #是否以后台进程运行,默认为no,如果需要以后台进程运行则改为yes daemonize no #如果以后台进程运行的话,就需要指定pid,你可以在此自定义redis.pid文件的位置. pidfil ...

  2. Android 6.0 Kotlin 蓝牙BLE扫描

    package com.arci.myapplication import android.os.Bundleimport android.support.design.widget.Snackbar ...

  3. 【Flask】WTForms基本使用

    # WTForms笔记:这个库一般有两个作用.第一个就是做表单验证,把用户提交上来的数据进行验证是否合法.第二个就是做模版渲染. ### 做表单验证:1. 自定义一个表单类,继承自wtforms.Fo ...

  4. Zabbix 自定义Key

    系统:Linux Centos 7.4 x64.Windos 2008 x64 服务:Zabbix 3.0.16 说明1:自定义Key 主要通过自定义 脚本 或者 命令 来实现自定义监控类型,需要在a ...

  5. jQuery垂直滑动切换焦点图

    在线演示 本地下载

  6. MongoDB快速入门（十二） -- 索引

    MongoDB 索引 索引支持的解析度的查询效率.如果没有索引,MongoDB必须扫描每一个文档的集合,要选择那些文档相匹配的查询语句.这种扫描的效率非常低,会要求 mongod 做大数据量的处理. ...

  7. linux 进阶命令___0002

    #列出重复文件,首先检查文件大小,再检查md5sum find -not -empty -type f -printf "%s\n" | sort -rn | uniq -d | ...

  8. EF Code-First 学习之旅 数据库初始化

    1.CreateDatabaseIfNotExists: 2.DropCreateDatabaseIfModelChanges: 3.DropCreateDatabaseAlways: 4.Custo ...

  9. DPDK l3fwd

    l3fwd负责三层转发,比l2fwd要复杂点. /*- * BSD LICENSE * * Copyright(c) 2010-2014 Intel Corporation. All rights r ...

  10. Linux 通过进程Pid与端口互查

    ps -aux 状态详解 https://blog.csdn.net/whatday/article/details/54409387. linux下通过进程名查看其占用端口: https://www ...