Rumah > Soal Jawab > teks badan
Newbie tidak begitu biasa dengan js, jadi sila beritahu saya, jika saya menggunakan js untuk mengklik butang, dan kemudian p bergerak ke kedudukan 500px di sebelah kanan selepas 5 saat, apakah idea untuk membuat ini kesan?
Perlukah kita menulis kelas dahulu untuk mencapai semua kesan ini, dan kemudian menggunakan js untuk menukar nama kelas?
Tetapi dalam acara klik, tulis semua kesan 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>
Saya akan memberikan anda demo yang mudah dan anda akan mengetahuinya Ini hanya salah satu kaedah, terdapat banyak lagi!
伊谢尔伦2017-06-26 10:56:58
Adakah ini yang anda mahukan? Lihat kod di bawah. p bergerak ke 500px dalam 5s Anda boleh menetapkan kesan peralihan untuk p terlebih dahulu dan menambah kelas yang bergerak ke kanan ialah menambahkan kelas pada elemen
ps: Ini hanyalah kod demo, tidak mengambil kira keserasian, dll...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
Anda boleh menggunakan css atau menulis terus dalam js. Untuk css, gunakan peralihan untuk menulisnya Untuk Baidu secara khusus, apabila peristiwa klik berlaku, tambahkan kelas pada elemen dan tukar gaya. Untuk js, gunakan settimeout, ambil margin kiri yang anda nyatakan sebagai contoh, tukar margin kiri sedikit demi sedikit dan berhenti apabila ia mencapai nilai yang ditentukan, iaitu cleartimeout
代言2017-06-26 10:56:58
Seperti yang dinyatakan di atas, jika ia adalah ie9 atau ke bawah, anda perlu menggunakan pemasa
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
Biasanya css3 digunakantransition实现过渡效果，要动画的话用animation Menggunakan js lebih intensif prestasi Berikut adalah beberapa artikel rujukan