Heim > Artikel > Web-Frontend > Verwenden Sie js, um den 360-Boot-Effekt zu imitieren
Verwenden Sie js, um den 360-Boot-Effekt zu imitieren
- 王林nach vorne
- 2020-04-07 09:24:322614Durchsuche
Um den Effekt zu erzielen:
Klicken Sie zum Verlassen auf die Schaltfläche „Bild schließen“, zuerst nach unten und dann nach rechts.
Implementierungsschritte:
1. Bewegungsfunktion kapseln
2. Klicken Sie auf das Bild, um es zu schließen Feld Nach dem Klicken
4. Die Höhe des unteren Bildes beträgt 0, legen Sie eine Beschleunigungsanimation fest
Die Breite des oberen Bildes beträgt 0, legen Sie eine Beschleunigungsanimation fest
Erleichternder Animationscode (mit Rückruffunktion): „
function getStyle(obj,attr){ //兼容性写法获得样式
if(window.getComputedStyle){
return window.getComputedStyle(obj, null)[attr];
}else{
return obj.currentStyle[attr];
}
}
function animate(obj, json, speed, callback){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var flag = true;
for(var attr in json){
var current = parseInt(getStyle(obj,attr));
var step = (json[attr] - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
obj.style[attr] = current + step +'px';
if(current != json[attr]){
flag = false;
}
}
if(flag){
clearInterval(obj.timer);
if(callback && typeof callback == 'function'){ //验证callback是否传递，传递的话看是否是函数类型
callback();
}
}
},speed);
}Startbild, das aus zwei Bildern besteht
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 322px;
position: fixed;
bottom:0;
right:0;
}
span{
position: absolute;
top:0;
right:0;
width:30px;
height: 20px;
cursor: pointer;
}
.box img{
vertical-align: top;
}
</style>
<script type="text/javascript" src="函数封装.js"></script>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
window.onload = function(){
var span = document.getElementsByTagName('span')[0];
var box = $('box');
var bottom = $('bt');
var top = $('hd');
span.onclick = function(){
var json = {"height": 0};
animate(bottom,json,20,function(){
animate(box,{"width":0},20);
});
}
}
</script>
</head>
<body>
<div id="box">
<span></span>
<div id="hd">
<img src="images/t.jpg" alt=""/>
</div>
<div id="bt">
<img src="images/b.jpg" alt=""/>
</div>
</div>
</body>
</html>Der Effekt ist wie folgt:
Verwandte Tutorial-Empfehlungen:
Das obige ist der detaillierte Inhalt vonVerwenden Sie js, um den 360-Boot-Effekt zu imitieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!