Home >Web Front-end >JS Tutorial >Javascript CSS ideas and code to implement image rolling shutter effect_javascript skills

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

WBOYOriginal: 2016-05-16 16:33:151573browse

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

Previous article：Detailed explanation of default parameters in Javascript_Basic knowledgeNext article：Detailed explanation of default parameters in Javascript_Basic knowledge

See more

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

Related articles