用过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. mongo常用查询

    复杂查询: and: or: lte,gte,=: and+lt:  , 逗号表示and, $lt小于写在值当中 查询实例: 找到含有指定数据文档 查找条件spcode有1个字符长度的文档 db.sp ...

  2. Python（正则 re模块）

    1. 匹配一个字符 表达式 说明 等价表达式 \d 数字 [0-9] \w 字母.数字.下划线 [a-zA-Z0-9_] . 除换行外任意字符   \s 空格 [\t\n\r\f\v] \D 除数字 ...

  3. Python（变量、数据类型）

    常量:python中没有常量,只能通过名字特征来提示例如:全部大写,如 : OLDBOY_AGE=57 一.变量 变量声明变量#!/usr/bin/env python age=18gender1=' ...

  4. Codeforces Round #385 (Div. 1) C. Hongcow Buys a Deck of Cards

    地址:http://codeforces.com/problemset/problem/744/C 题目: C. Hongcow Buys a Deck of Cards time limit per ...

  5. Hadoop2.7.x中所有的DataNode都启动不了解决办法

    参考:Hadoop集群所有的DataNode都启动不了解决办法说明现象:我自己出现这个问题的原因是:自己在namenode格式化之后创建了一些文件,然后重新执行了namenode格式化导致的. 现象就 ...

  6. 每天学点Linux命令之grep 和 wc命令 ---（6/25）

    Linux系统中grep命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹 配的行打印出来.grep全称是Global Regular Expression Print,表示全局正则表达 ...

  7. 手机调取摄像头问题（getUserMedia）

    先说坏消息,苹果机没法玩这个!!! 而且,必须拥有 https 的安全协议!!! 而安卓机想完成这个功能倒是很 easy 的,看一眼代码 主要传入三个参数,配置对象,成功,失败 var mediaOp ...

  8. MySQL-5.7密码策略及用户资源限制

    1.密码策略 在mysql 5.6对密码的强度进行了加强,推出了validate_password 插件.支持密码的强度要求. (1)安装插件 [root@localhost ~]# ll /usr/ ...

  9. Sybase：删除表中的某列

    Sybases:删除表中的某列 alter table tb1(表名) drop clo1(列名); commit;

  10. Number使用笔记

    Numbe函数用于将对象转换为数字 0          0 null       0 空  0 ""         0 true      1 false     0 date ...