Javascript CSS实现影像卷帘效果思路及代码_javascript技巧
用过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> 
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
iPhone 16揭示全部摄像功能：为Vision Pro打下基础？
Jan 25, 2024 am 08:15 AM
在去年苹果秋季发布会上，iPhone15ProMax绝对是最受关注的主角之一，只因它是苹果第一款配备了潜望式长焦镜头的智能手机。当然，iPhone15ProMax最高仅支持到5倍光学变焦，且由于传感器尺寸较小，大多数场景中的表现都稍显遗憾。（图源：Apple）在Android阵营中，1英寸大底传感器几乎已经成为旗舰机型的标配，随着2023年高端市场再度刮起「大底长焦」的风，连往年不是太受到厂商关注的长焦镜头也迎来了巨大变化。只看硬件的话，iPhone的确落后太多了。或许苹果也意识到了这个问题，在
华为影像XMAGE：十大趋势定调未来移动影像新走向
Jun 01, 2024 pm 12:27 PM
P系列的发展史，就是移动影像的发展史。P系列诞生12周年之际，华为带着对移动影像的深刻理解和未来规划，再一次出发。从移动影像的概念出现，到逐渐发展壮大，成为千千万万用户记录生活的主要方式，华为始终扮演着引领者的重要角色。时至今日，当业内都在堆硬件、拼画质、捆绑传统影像品牌风格三个维度拼命内卷的时候，我们清晰地看到，同质化的硬件堆叠和算法优化无法真正拉开各品牌的影像实力差距，更重要的是，特定的影像风格已经难以适应消费者的个性化需求。站在更高的维度，思考移动影像接下来的发展方向，对于华为来说是引领者
旗舰同款！小米Civi 4 Pro升级影像大脑3.0：搭载Xiaomi AISP
Mar 22, 2024 pm 12:02 PM
3月21日消息，小米Civi4Pro今日正式发布，搭载原汁原味的徕卡专业三摄，配备光影猎人800定制专业传感器。据介绍，小米Civi4Pro还继承了旗舰机型的实力，搭载XiaomiAISP。通过小米澎湃OS深入硬件层，重构技术管线，深入SoC每个模块，全面整合CPU、GPU、NPU和ISP的算力，总算力高达42TOPS，连拍速度提升69%。同时，新机融合四大计算摄影模型，将算法与光学巧妙融合，带来立体感的影调、临场感的色彩和电影级的层次。全新的人像大模型还融入了全新的AIGAN美颜算法，拍摄出的
OPPO Find X7 绝绝子！用影像定格你的每一刻
Aug 07, 2024 pm 07:19 PM
在这个快节奏的时代，OPPOFindX7可以用它的影像力量，让我们去细细品味生活中的每一个美好瞬间。无论是壮丽的山川湖海，还是温馨的家庭聚会，亦或是街头的偶遇与惊喜，它都能以"绝绝子"的画质，帮你记录下来。从外头看，在摄像头Deco的设计上，FindX7与Ultra版如出一辙，采用了同心圆弧的造型，参考了专业相机镜头的全棱线设计，还有经典的哈苏"H"大logo，整体看起来很有辨识度，也很有高级感。而内里也是一绝，首先是基础的硬件配置。FindX7维持了上一
2亿像素影像灭霸！vivo X100 Ultra真机上手：硕大环形相机
May 07, 2024 am 09:50 AM
5月7日消息，vivo将于5月13日举行新品发布会，将发布vivoX100s系列、vivoX100Ultra。另外，vivo全新影像技术品牌蓝图影像，也将在发布会上亮相。日前，vivo官方旗舰店发布vivoX100Ultra真机上手视频，新机背部采用全新镜头布局，拥有硕大的环形相机模组，包含主摄、潜望长焦和超广角镜头。vivo还在镜头圆环外加入了一圈金属拉丝纹理，细节十分精致。vivo品牌副总裁贾净东在预热中表示，vivoX100Ultra是“影像灭霸”，由来原本是vivo内部研发
小米14 Ultra专业摄影套装亮相：新增自定义波轮、支持Type-C直连
Feb 23, 2024 am 08:01 AM
2月22日消息，小米14Ultra影像旗舰今晚正式登场，搭载全新光学系统——徕卡“全明星”四摄。据官方介绍，小米14Ultra升级了“专业影像套装”，包括科纳皮保护壳、67mm滤镜转接环、多彩装饰圈、Type-C专业摄影手柄、镜头盖以及手柄挂绳。其中专业摄影手柄内置1500mAh电池，实现了Type-C直连，支持90W小米澎湃有线快充，当手机电量低于80%，连接手柄自动充电。此外，专业摄影手柄新增自定义波轮，普通模式下，快速调节EV；
前华为首席影像工程师罗巍加入荣耀：公开晒照
Jul 29, 2024 am 09:01 AM
消息称，曾经担任华为首席影像工程师的罗巍，已经低调加入荣耀的影像团队，必将给荣耀手机影像表现带来一个质的提升。就在今天，罗巍个人微博发了一组黄花水长城主题的照片，来自荣耀Magic6至臻版、荣耀Magic5Pro，并配文称“测试一下”。这无疑从侧面佐证了罗巍已经加盟荣耀的说法，并已开始工作。在微博评论中，还有网友询问荣耀Magic6Pro的微距问题，靠近拍摄时广角、长焦镜头冲突，会反复横跳切换镜头。对此，罗巍很快给出回应，称升级版本之后就不会有问题了。另外，荣耀MagicV3推送了
小米14 Ultra搭配专业摄影手柄，手机实现瞬间升级为相机
Jan 17, 2024 pm 03:36 PM
1月17日消息，小米14Ultra未发，配件先行，日前，小米一款“专业摄影手柄（移动电源）”的新品通过3C认证，生产商为蓝思科技。参考小米13Ultra的专业摄影套装，这款全新专业摄影手柄显然是为小米14Ultra准备的，预计会带来新的玩法。小米13Ultra专业影像套装据了解，小米13Ultra发布时同步推出了该机专业摄影套装，售价999元，在二手平台一度被炒至1500元左右，相当受欢迎。摄影套装包含科技纳米皮的保护壳、无线摄影手柄，保护壳还能外接一个67mm的滤镜转接环，让手机
