Javascript-CSS-Ideen und Code zur Implementierung von Bild-Rolling-Shutter-Effekt_Javascript-Fähigkeiten-js-Tutorial-php.cn

Javascript-CSS-Ideen und Code zur Implementierung von Bild-Rolling-Shutter-Effekt_Javascript-Fähigkeiten

WBOY

Freigeben： 2016-05-16 16:33:15

Original

1573 Leute haben es durchsucht

Wer Arcgis verwendet hat, muss sich gut an den Rollo-Effekt in Arcmap erinnern und ihn in sein eigenes WebGIS-System verschieben. Mit der gleichen Idee gefällt mir auch dieser relativ coole Rollo über die Wirkung, und hier ist es, lassen Sie mich die Ergebnisse allen mitteilen

Hat sich dein Huhn ein wenig bewegt, als du diesen Effekt gesehen hast? Hehe, mach dir keine Sorgen, hör mir langsam zu.

Zuerst der Behälter. Verwenden Sie zwei DIVs, um Bilder aus zwei verschiedenen Zeiträumen anzuzeigen. Als nächstes legen Sie die Stile der beiden Container fest, 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; 
}

Nach dem Login kopieren

Auf diese Weise wird das Bild im Web angezeigt.

Als nächstes implementieren Sie den Rolling-Shutter-Effekt. Um einen Rolling Shutter zu implementieren, ist es am wichtigsten, die Breite vorher festzulegen. Der Code lautet wie folgt:

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

Nach dem Login kopieren

Auf diese Weise wird die Wirkung von Rollos erzielt. Der Quellcode lautet wie folgt:

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

Nach dem Login kopieren

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>

Nach dem Login kopieren