Javascript CSS实现影像卷帘效果思路及代码_javascript技巧-js教程-PHP中文网

首页

web前端

js教程

Javascript CSS实现影像卷帘效果思路及代码_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:33 PM

影像

用过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>

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

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 AISPMar 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的滤镜转接环，让手机

See all articles