Heim > Artikel > Web-Frontend > Javascript-CSS-Ideen und Code zur Implementierung von Bild-Rolling-Shutter-Effekt_Javascript-Fähigkeiten

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

WBOYOriginal: 2016-05-16 16:33:151555Durchsuche

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

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>

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

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>

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung der Standardparameter in Javascript_GrundkenntnisseNächster Artikel：Detaillierte Erläuterung der Standardparameter in Javascript_Grundkenntnisse

In Verbindung stehende Artikel

Mehr sehen