用过Arcgis的筒子们对于Arcmap里面的一个卷帘效果肯定记忆很深刻,想把它搬到自己的WebGIS系统中去,抱着同样的想法,我也对这种比较炫的卷帘效果做了一下研究,吼吼,出来了,给大家汇报一下成果
看到这样的效果,你是不是小鸡动了一下,嘿嘿,别急,听我慢慢道来。
首先,容器。分别用两个DIV来显示两个不同时期的影像。接下来设置两个容器的样式,代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
#after{
position : absolute ;
top : 0px ;
left : 0px ;
background-image : url (../images/ 24 .jpg);
width : 940px ;
height : 529px ;
background-repeat : no-repeat ;
}
#bef ore{
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的宽度,如何去设置呢,就是获取鼠标的位置,代码如下:
1
2
3
4
5
6
|
function RollImage(evt){
var x=evt.pageX;
console.log(x);
$( "#before" ).css( "width" ,x+ "px" );
}
/script>
|
这样,卷帘的效果就实现了。源代码如下:
style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
.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 ;
}
#bef ore{
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
< 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 >
|