Javascript+CSS实现影像卷帘效果思路及代码
用过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轮播停留效果的实现思路，包括了JavaScript轮播停留效果的实现思路的使用技巧和注意事项，需要的朋友参考一下 一、思路 1.轮播停留与无线滚动十分类似，都是利用属性及变量控制移动实现轮播； 2.不同的是轮播停留需要添加过渡属性搭配定时器即可实现轮播停留效果； 二、步骤 1.写基本结构样式 需在末尾多添加一张与第一张相同的图片，消除切换时的抖动； 2.添加轮播停
-
本文向大家介绍javascript实现圣旨卷轴展开效果（代码分享），包括了javascript实现圣旨卷轴展开效果（代码分享）的使用技巧和注意事项，需要的朋友参考一下 效果图： 代码如下： 以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持呐喊教程！
-
本文向大家介绍Flex4 DataGrid中嵌入RadioButton实现思路及代码，包括了Flex4 DataGrid中嵌入RadioButton实现思路及代码的使用技巧和注意事项，需要的朋友参考一下 MXML页面
-
本文向大家介绍JavaScript实现轮播图效果代码实例，包括了JavaScript实现轮播图效果代码实例的使用技巧和注意事项，需要的朋友参考一下 这篇文章主要介绍了JavaScript实现轮播图效果代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 HTML部分： CSS部分 JavaScript部分 以上就是本文的全部内容，希望对大家的学
-
本文向大家介绍Python实现时钟显示效果思路详解，包括了Python实现时钟显示效果思路详解的使用技巧和注意事项，需要的朋友参考一下 语言：Python IDE：Python.IDE 1.编写时钟程序，要求根据时间动态更新 2.代码思路 需求：5个Turtle对象， 1个绘制外表盘+3个模拟表上针+1个输出文字 Step1：建立Turtle对象并初始化 Step2：静态表盘绘制 Step3：根据
-
本文向大家介绍JavaScript实现弹窗效果代码分析，包括了JavaScript实现弹窗效果代码分析的使用技巧和注意事项，需要的朋友参考一下 效果图： 话不多说，请看代码： 以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持呐喊教程！