Maison > Questions et réponses > le corps du texte
Le débutant n'est pas très familier avec js, alors dites-moi s'il vous plaît, si j'utilise js pour cliquer sur un bouton, puis que p se déplace vers une position de 500 pixels à droite après 5 secondes, quelle est l'idée de faire cela effet?
Devrions-nous d'abord écrire une classe pour obtenir tous ces effets, puis utiliser js pour changer le nom de classe ?
Mais dans l'événement click, écrire tous les effets CSS ? QUQ
PHP中文网2017-06-26 10:56:58
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p
{
width:100px;
height:100px;
background:red;
transition:all 5s;
}
p:hover
{
width:300px;
}
#p1{
position:relative;
width:100px;
height:100px;
}
#p2{
position:absolute;
width:100%;
height:100%;
background:#0f0;
}
#p2.p2{
width:200%;
height:200%;
}
</style>
</head>
<body>
<input type='button' id='btn1'/>
<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>
<p></p>
<p id='p1'>
<p id='p2'></p>
</p>
<p>鼠标移动到 p 元素上，查看过渡效果。</p>
</body>
<script>
window.onload=function(){
var oBtn=document.getElementById("btn1"),op=document.getElementById("p2");
oBtn.onclick=function(){
op.className='p2';
}
}
</script>
</html>
Je vais vous faire une démo simple et vous le saurez. Ce n’est qu’une des méthodes, il y en a bien d’autres !
伊谢尔伦2017-06-26 10:56:58
Est-ce ce que tu veux ? Voir le code ci-dessous. p se déplace vers 500px en 5s. Vous pouvez d'abord définir l'effet de transition pour p et ajouter une classe qui se déplace vers la droite. Ce que js fait principalement, c'est ajouter une classe à l'élément
.ps : C'est juste un code de démonstration, sans tenir compte de la compatibilité, etc...
css3
.demo{
border:1px solid #fff;
width:100px;
height:50px;
position:relative;
left:0;
transition: left 2s;
}
.run{
left:500px;
}<p class="demo">
</p>(function(){
document.getElementsByClassName('demo')[0].onclick = function(){
this.className +=' run';
};
})()
女神的闺蜜爱上我2017-06-26 10:56:58
Vous pouvez utiliser du CSS ou écrire directement en js. Pour CSS, utilisez la transition pour l'écrire. Pour Baidu spécifiquement, lorsqu'un événement de clic se produit, ajoutez une classe à l'élément et modifiez le style. Pour js, utilisez settimeout, prenez la marge gauche que vous avez mentionnée comme exemple, modifiez la marge gauche petit à petit et arrêtez-vous lorsqu'elle atteint la valeur spécifiée, qui est cleartimeout
代言2017-06-26 10:56:58
Comme mentionné ci-dessus, s'il s'agit d'une version ie9 ou inférieure, vous devez utiliser une minuterie
var ele = document.getElementsByClassName('demo')[0]
ele.onclick = function(){
var btn = this;
setInterval(function(){
btn.style.left = parseInt(btn.style.left) + 1 + "px"
},1)
}習慣沉默2017-06-26 10:56:58
Habituellement, css3 est utilisétransition实现过渡效果，要动画的话用animation L'utilisation de js nécessite plus de performances. Voici quelques articles de référence