用过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. 批量编译目录下文件的Makefile

    1.多C文件生成各自可执行文件的Makefile如果一个目录下有很多C文件,且每个C文件都能生成一个独立的可执行文件,那么想全编译这些C文件并生成各作的可执行文件,在该目录下编写一个Makefile文 ...

  2. Python（迭代、三元表达式、列表生成、生成器、迭代器）

    迭代 什么是迭代 1 重复 2 下次重复一定是基于上一次的结果而来 如果给定一个list或tuple,我们可以通过for循环来遍历这个list或tuple,这种遍历我们称为迭代(Iteration). ...

  3. 《TCP/IP详解：卷一》-TCP部分讲解

    TCP/IP协议 作者:Danbo 2015-7-2 本文为参考TCP/IP详解卷一,某些知识点加上了作者自己的理解,如有错误,欢迎指正,可以微博联系我! TCP包格式和IP包格式如下: TCP的正常 ...

  4. poj2993

    #include<stdio.h> #include<string.h> #include<algorithm> using namespace std; stru ...

  5. 存储库之mongodb，redis，mysql

    一.简介 MongoDB是一款强大.灵活.且易于扩展的通用型数据库 MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统. 在高负载的情况下,添加更多的节点,可以保证服务器性 ...

  6. CSS3 文本常用属性

    CSS 常用属性 text-shadow属性文字阴影:第一个值背景相对原本文字居左的距离,第二个值据当前文本上方的距离,第三个值清晰度(越小越清晰),第四个值颜色 word-wrap:自动换行,如果是 ...

  7. J2EE--Struts2基础开发笔记

    内容中包含 base64string 图片造成字符过多,拒绝显示

  8. tinyxml优化之一

    原文链接:http://www.cnblogs.com/zouzf/p/4154569.html 最近在搞XML解析优化,公司引擎用了tinyxml1和tinyxml2两个XML库,后者的效率比前者高 ...

  9. Hadoop:eclipse配置hadoop-eclipse-plugin(版本hadoop2.7.3)

    配置hadoop-eclipse-plugin(版本hadoop2.7.3): 1:首先下载我们需要的  hadoop-eclipse-plugin-2.7.3.jar,winutils.exe 和 ...

  10. 第九节课-CNN架构

    2017-08-21 这次的课程比较偏向实际的运用,介绍了当前几种比较主流的CNN网络: 主要是AlexNet,GoogleNet, VGG, ResNet 需要把课后习题做了才能更好的理解.