Maison >interface Web >js tutoriel >Comment utiliser js pour obtenir des effets de mouvement horizontal et vertical
Comment utiliser js pour obtenir des effets de mouvement horizontal et vertical
- 王林avant
- 2020-04-08 09:20:473359parcourir
Analyse du mouvement horizontal :
peut être vu comme le changement de la marge gauche d'un objet.
Par exemple : se déplacer vers la droite rend la marge de gauche de plus en plus grande (la valeur est positive), vous pouvez ajuster la marge gauche de l'objet pour y parvenir
Se déplacer vers la gauche fait la marge gauche de plus en plus petite (la valeur est positive) est négative), la marge gauche de l'objet peut être ajustée pour obtenir
Le code réel est le suivant :
<style>
*{padding: 0;margin: 0px;}
#box{width: 100px;height: 100px;border-radius: 50%;background: red;position: absolute;top: 50px;left: 0;}
</style>
<body>
<button id="btn">向右</button>
<button id="btn1">向左</button>
<div id="box"></div>
<script>
var box=document.getElementById('box');
//速度
var index=10;
//定时器编号
var b;
//添加向右点击事件
document.getElementById('btn').onclick=function(){
clearInterval(b);//清除上一个定时器执行的事件
b=setInterval(getMove,100,index);//每100毫秒执行一次getMove函数
}
//添加向左点击事件
document.getElementById('btn1').onclick=function(){
clearInterval(b);//清除上一个定时器执行的事件
b=setInterval(getMove,100,-index);//每100毫秒执行一次getMove函数
}
//box移动位置
function getMove(index){
//获取box的左距离
var a=window.getComputedStyle(box,null).left;
a=parseInt(a);//转换为数值
box.style.left=a+index+'px'//计算box的左距离
}
</script>
</body>Analyse du mouvement vertical :
peut être vu comme un changement dans la marge supérieure d'un objet.
Par exemple : lorsque vous déplacez vers le bas, la marge supérieure devient de plus en plus grande (la valeur est positive). Vous pouvez ajuster la marge supérieure de l'objet pour y parvenir.
Déplacer vers le haut rend l'objet plus grand. marge supérieure de plus en plus petite (la valeur est positive). Négative), la marge supérieure de l'objet peut être ajustée pour obtenir
Le code réel est le suivant :
<style>
*{padding: 0;margin: 0px;}
#box{width: 100px;height: 100px;border-radius: 50%;background: red;position: absolute;top: 50px;left: 0;}
</style>
<body>
<button id="btn">向下</button>
<button id="btn1">向上</button>
<div id="box"></div>
<script>
var box=document.getElementById('box');
//速度
var index=10;
//定时器编号
var b;
//添加向下点击事件
document.getElementById('btn').onclick=function(){
clearInterval(b);//清除上一个定时器执行的事件
b=setInterval(getMove,100,index);//每100毫秒执行一次getMove函数
}
//添加向上点击事件
document.getElementById('btn1').onclick=function(){
clearInterval(b);//清除上一个定时器执行的事件
b=setInterval(getMove,100,-index);//每100毫秒执行一次getMove函数
}
//box移动位置
function getMove(index){
//获取box的上距离
var a=window.getComputedStyle(box,null).top;
a=parseInt(a);//转换为数值
box.style.top=a+index+'px'//计算box的上距离
}
</script>
</body>Tutoriels associés recommandés : Tutoriel js
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!