用过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. python s12

    logging模块 很多程序都有记录日志的需求,并且日志中包含的信息即有正常的程序访问日志,还可能有错误.警告等信息输出,python的logging模块提供了标准的日志接口,你可以通过它存储各种格式 ...

  2. 关于OAuth的state参数的作用

    引用: https://blog.csdn.net/gjb724332682/article/details/54428808 在开发 OAuth认证服务器 的时候,开发者的安全意识不高的话,很可能会 ...

  3. Oracle_trunc截取函数

    转:http://blog.sina.com.cn/s/blog_6b58d2fa0100r6ub.html TRUNC函数用于对值进行截断. 用法有两种:TRUNC(NUMBER)表示截断数字,TR ...

  4. Jmeter使用非 GUI 模式，即命令行模式运行实例讲

    转载:http://www.cnblogs.com/leeboke/p/5238269.html 参考资料:https://girliemangalo.wordpress.com/2009/10/29 ...

  5. node操作mongodb

    var mongodb = require('mongodb'); var server = new mongodb.Server('localhost', 27017, {auto_reconnec ...

  6. java没有指针

    先说结论:java没有指针,它使用对象引用来替代指针 备注:c/c++的引用和java的引用完全不是一个东西 c/c++的引用是同一块内存的不同名字 java的引用指向一个对象,引用本身也占用了内存 ...

  7. some words

    For we meet in an hour of change and challenge,              in a dacade of hope and fear,   in an a ...

  8. iOS开发进阶 - 日志输出框架CocoaLumberjack与XcodeColors插件的简单使用（swift版）

    CocoaLumberjack是Mac和iOS上一个集快捷.简单.强大和灵活于一身的日志框架.XcodeColors是用于控制台着色的工具,配合着CocoaLumberjack用有更好的效果,不废话, ...

  9. Apache配置的5个技巧

    AcceptMutex Apache 1.3.21和Apache 2.0中引入了AcceptMutex 指示符,该指示符给调节服务器的性能带来了一个难得的机会.该指示符配置Apache的accept( ...

  10. TCP_AIO_Server_ZC_01

    ZC: 这个例子是,1个skt 投递 1个未决的接收操作 1.package aio.Client; 1.1.这是一个 测试的客户端的代码: package aio.Client; import ja ...