Javascript CSS ideas and code to implement image rolling shutter effect

Home

Web Front-end

JS Tutorial

Javascript CSS ideas and code to implement image rolling shutter effect_javascript skills

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:33 PM

image

Those who have used Arcgis must have a deep memory of the roller shutter effect in Arcmap, and want to move it to their own WebGIS system. With the same idea, I also like this relatively cool roller shutter. I did some research on the effect, hahaha, it’s out, I’ll report the results to everyone

Seeing this effect, did your chicken move a little bit? Hehe, don’t worry, listen to me slowly.

First, the container. Use two DIVs to display images from two different periods. Next set the styles of the two containers, code:

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

In this way, the image is displayed on the web.

Next, implement the rolling shutter effect. To implement a rolling shutter, the most important thing is to set the width of before. How to set it is to get the position of the mouse. The code is as follows:

function RollImage(evt){ 
var x=evt.pageX; 
console.log(x); 
$("#before").css("width",x+"px"); 
} 
/script>

In this way, the effect of roller blinds is achieved. The source code is as follows:

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>

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact 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维持了上一

小米14 Ultra专业摄影套装亮相：新增自定义波轮、支持Type-C直连Feb 23, 2024 am 08:01 AM

2月22日消息，小米14Ultra影像旗舰今晚正式登场，搭载全新光学系统——徕卡“全明星”四摄。据官方介绍，小米14Ultra升级了“专业影像套装”，包括科纳皮保护壳、67mm滤镜转接环、多彩装饰圈、Type-C专业摄影手柄、镜头盖以及手柄挂绳。其中专业摄影手柄内置1500mAh电池，实现了Type-C直连，支持90W小米澎湃有线快充，当手机电量低于80%，连接手柄自动充电。此外，专业摄影手柄新增自定义波轮，普通模式下，快速调节EV；

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内部研发

前华为首席影像工程师罗巍加入荣耀：公开晒照Jul 29, 2024 am 09:01 AM

消息称，曾经担任华为首席影像工程师的罗巍，已经低调加入荣耀的影像团队，必将给荣耀手机影像表现带来一个质的提升。就在今天，罗巍个人微博发了一组黄花水长城主题的照片，来自荣耀Magic6至臻版、荣耀Magic5Pro，并配文称“测试一下”。这无疑从侧面佐证了罗巍已经加盟荣耀的说法，并已开始工作。在微博评论中，还有网友询问荣耀Magic6Pro的微距问题，靠近拍摄时广角、长焦镜头冲突，会反复横跳切换镜头。对此，罗巍很快给出回应，称升级版本之后就不会有问题了。另外，荣耀MagicV3推送了

肇庆暴走 30000 步，沉浸式体验努比亚 Z60 Ultra 影像魅力Aug 10, 2024 pm 09:34 PM

你拍照时最喜欢的镜头是什么？我的答案是35mm定焦（以等效全画幅焦距计算，下同）。而在手机市场，配备原生35mm主摄的，只有努比亚这一家。在各家都以"影像旗舰"自称的时候，努比亚Z60Ultra领先版是我们今年用过的手机中最有相机感的，低畸变18mm超广角、35mm人文主摄和85mm长焦这三颗镜头素质都很不错，配合滑动键可以快速打开/关闭相机，很有卡片机的感觉。因为这台手机很特别，所以这次体验也会有点特别，我将用这台努比亚Z60Ultra领先版，记录在肇庆渡过的一个周末。松弛

See all articles