이미지 롤링 셔터 효과를 구현하기 위한 Javascript CSS 아이디어 및 코드

집

웹 프론트엔드

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

이런 식으로 이미지가 웹에 표시됩니다.

다음으로 롤링 셔터 효과를 구현합니다. 롤링 셔터를 구현하기 위해 가장 중요한 것은 이전의 너비를 설정하는 것입니다. 설정 방법은 마우스의 위치를 가져오는 것입니다.

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

테스트.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美颜算法，拍摄出的

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

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

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

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

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

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

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

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.