Javascript+CSS实现影像卷帘效果思路及代码


Posted in Javascript onOctober 20, 2014

用过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 相关文章推荐
JQuery 常用操作代码
Mar 14 Javascript
JavaScript 匿名函数(anonymous function)与闭包(closure)
Oct 04 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 Javascript
from表单多个按钮提交用onclick跳转不同action
Apr 24 Javascript
基于javascript简单实现对身份证校验
Jan 25 Javascript
canvas 实现中国象棋
Feb 17 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
Mar 21 Javascript
Node 升级到最新稳定版的方法分享
May 17 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
Jun 28 Javascript
Layui给switch添加响应事件的例子
Sep 03 Javascript
layer弹出层倒计时关闭的实现方法
Sep 27 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
利用jquery操作Radio方法小结
Oct 20 #Javascript
利用a标签自动解析URL分析网址实例
Oct 20 #Javascript
JavaScript严格模式禁用With语句的原因
Oct 20 #Javascript
jquery中页面Ajax方法$.load的功能使用介绍
Oct 20 #Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
Oct 20 #Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
Oct 19 #Javascript
js添加select下默认的option的value和text的方法
Oct 19 #Javascript
You might like
php正则过滤html标签、空格、换行符的代码(附说明)
2010/10/25 PHP
php基础教程 php内置函数实例教程
2012/08/21 PHP
PDO预处理语句PDOStatement对象使用总结
2014/11/20 PHP
PHP strip_tags保留多个HTML标签的方法
2016/05/22 PHP
PHP插件PHPMailer发送邮件功能
2017/02/28 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
一个JavaScript继承的实现
2006/10/24 Javascript
用按钮控制iframe显示的网页实现方法
2013/02/04 Javascript
随窗体滑动的小插件sticky源码
2013/06/21 Javascript
可以浮动某个物体的jquery控件用法实例
2015/07/24 Javascript
JavaScript制作淘宝星级评分效果的思路
2020/06/23 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
2016/05/16 Javascript
详解react-webpack2-热模块替换[HMR]
2017/08/03 Javascript
基于js中的原型(全面讲解)
2017/09/19 Javascript
JavaScript生成简单等差数列
2017/11/28 Javascript
jQuery基于Ajax实现读取XML数据功能示例
2018/05/31 jQuery
Openlayers实现扩散的动态点(水纹效果)
2020/08/17 Javascript
vue实现可移动的悬浮按钮
2021/03/04 Vue.js
[03:55]TI9战队采访——TNC Predator
2019/08/22 DOTA
探寻python多线程ctrl+c退出问题解决方案
2014/10/23 Python
Python实现提取谷歌音乐搜索结果的方法
2015/07/10 Python
wxPython之解决闪烁的问题
2018/01/15 Python
python字符串的方法与操作大全
2018/01/30 Python
python特性语法之遍历、公共方法、引用
2018/08/08 Python
在Python中获取两数相除的商和余数方法
2018/11/10 Python
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
美国二手复古奢侈品包包购物网站:LXRandCo
2019/06/18 全球购物
Nordgreen台湾官网:极简北欧设计手表
2019/08/21 全球购物
比较一下entity bean和session bean
2013/12/27 面试题
老师的检讨书
2014/02/23 职场文书
作风整顿个人剖析材料
2014/10/06 职场文书
违章停车检讨书
2014/10/21 职场文书
合理化建议书范文
2015/09/14 职场文书
小学教师暑期培训心得体会
2016/01/09 职场文书
python用tkinter开发的扫雷游戏
2021/06/01 Python
一文了解Java动态代理的原理及实现
2022/07/07 Java/Android