JavaScript与CSS实现影像卷帘对比效果

作者：像素漫游时间：2026-10-28 15:04:40浏览：274

本文介绍如何在WebGIS系统中实现类似ArcMap的影像卷帘对比效果。通过两个绝对定位的DIV分别展示不同时期的影像，利用JavaScript监听鼠标移动事件动态调整前层DIV宽度，配合CSS样式控制背景与边框，最终实现平滑的卷帘对比交互功能。

影像卷帘效果概述

熟悉ArcGIS的用户对ArcMap中的卷帘工具印象深刻，许多开发者希望将此功能移植到WebGIS系统中。针对这一需求，本文研究并实现了基于Web技术的影像卷帘效果，现将具体实现方案分享如下。

这种视觉效果直观展示了影像对比，接下来将详细解析其实现原理。

容器构建与样式设置

首先构建基础容器结构。使用两个独立的DIV元素分别承载不同时间点的影像数据。随后配置容器的CSS样式，关键代码片段如下：


#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; 
}

完成上述设置后，影像即可在网页端正常渲染显示。

卷帘交互逻辑实现

卷帘效果的核心在于动态控制前层影像（ID为before）的宽度。具体实现方式是监听鼠标位置，根据鼠标横坐标实时修改前层DIV的宽度属性，相关JavaScript代码如下：


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>

作者最新文章

D3.js 处理大规模数据点的性能优化策略

2026-11-05 15:37:25

JS实现网页摄像头实时扫码：结合getUserMedia与jsQR教程

2026-11-05 15:27:28

D3.js v5 迁移到 v7 的 API 变更与注意事项

2026-11-05 11:57:17

使用 animate.js 实现多元素协同的序列动画

2026-11-04 22:27:53

JS拖拽排序时怎么添加平滑动画效果？FLIP技术实战

2026-11-04 10:12:22