Rumah > Artikel > hujung hadapan web > Contoh kod penjelasan terperinci tentang pelaksanaan javascript bagi window jitter dan qq window jitter_javascript kemahiran

Contoh kod penjelasan terperinci tentang pelaksanaan javascript bagi window jitter dan qq window jitter_javascript kemahiran

WBOYasal: 2016-05-16 15:22:141056semak imbas

Kesan jitter tetingkap digunakan di banyak tempat Contohnya, tetingkap log masuk NetEase mempunyai kesan ini Apabila log masuk gagal, kesan jitter akan muncul perenggan seperti ini saya ingin berkongsi contoh kod dengan anda.

Kod adalah seperti berikut:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.softwhy.com/" />
<title>窗口登陆效果</title>
<style type="text/css">
#win
{
 position:relative;
 width:100px;
 height:100px;
 background-color:#666;
}
</style>
<script type="text/javascript"> 
var a=['top','left'];
var b=0; 
var u;
function fudu()
{ 
 win.style[a[b%2]]=(b++)%4<2&#63;"0px":"4px"; 
 if(b>15)
 {
 clearInterval(u);
 b=0
 } 
}
function zd()
{
 clearInterval(u); 
 u=setInterval(fudu,32) 
} 
window.onload=function()
{
 var bt=document.getElementById("bt");
 var win=document.getElementById("win");
 bt.onclick=zd;
}
</script> 
</head> 
<body > 
<button id="bt">点击振动</button> 
<div id="win"></div> 
</body> 
</html>

Dalam kod di atas, apabila butang diklik, div akan mempunyai kesan jitter. Ini adalah untuk demonstrasi. Ini adalah pengenalan ringkas kepada proses pelaksanaan.

1. Prinsip pelaksanaan:

Kod ini mudah dan prinsipnya juga sangat mudah. Div menggunakan kedudukan relatif Apabila butang diklik, fungsi fudu() akan dipanggil secara berterusan melalui fungsi pemasa setInterval(). Laraskan kedudukan div secara rawak untuk mencapai kesan kegelisahan Apabila nilai b lebih besar daripada 15, kegelisahan akan berhenti.

2. Kod ulasan:

1.var a=['top','left'], mengisytiharkan tatasusunan yang menyimpan rentetan atas dan kiri.
2.var b=0, isytiharkan pembolehubah b dan berikannya nilai 0.
3.var u, mengisytiharkan pembolehubah sebagai nilai pulangan bagi fungsi pemasa setInterval().
4.function fudu(){}, isytiharkan fungsi.
5.win.style[a[b%2]]=(b )%4d3dfc9256d4eef659637a8a3c121d4f315) {clearInterval(u); b=0}, jika nilai b lebih besar daripada 15, maka hentikan dithering dan tetapkan semula nilai b kepada 0.
7.fungsi zd(){}, isytiharkan fungsi.
8. clearInterval(u), menghentikan fungsi pemasa kod ini adalah untuk mengelakkan masalah kegelisahan yang mungkin tidak berhenti apabila butang diklik secara berterusan, kerana kedua-dua kegelisahan itu mempengaruhi satu sama lain.
9.u=setInterval(fudu,30), gunakan fungsi pemasa untuk terus memanggil fungsi fudu.
10.window.onload=function(){}, laksanakan kod dalam fungsi apabila kandungan dokumen dimuatkan sepenuhnya.
11.var bt=document.getElementById("bt"), dapatkan objek butang.
12.var win=document.getElementById("win"), dapatkan objek div.
13.bt.onclick=zd, daftarkan fungsi pengendali acara untuk butang.

Berikut ialah kod JavaScript yang meniru gegaran tetingkap QQ

Kesan gegaran yang sangat unik, meniru kesan gegaran tetingkap sembang QQ Ia dilaksanakan dengan kod JavaScript Dengan tetingkap sembang palsu ini, saya tidak sangka ia benar-benar serupa dengan kesan gegaran QQ kelakar.

<title>仿QQ窗口抖动</title>
<img id="win" style='position:relative' src="/jscss/demoimg/qqwinows.jpg">
<br /><br />
<button onclick="zd()">让我抖一下！</button>
<script >
function zd(u){ 
 var a=['top','left'],b=0;
 u=setInterval(function(){
 document.getElementById('win').style[a[b%2]]=(b++)%4<2&#63;0:4;
 if(b>15){clearInterval(u);b=0}
 },32)
}
</script>

Melalui contoh kod di atas, saya akan memperkenalkan kepada anda pelaksanaan window jitter dan QQ window jitter menggunakan JavaScript. Saya harap kod ini dapat membantu anda.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：kod pelaksanaan js untuk pengiklanan gambar dalam gambar dalam halaman maklumat (cara memuatkan iklan dalam teks)_kemahiran javascriptArtikel seterusnya：kod pelaksanaan js untuk pengiklanan gambar dalam gambar dalam halaman maklumat (cara memuatkan iklan dalam teks)_kemahiran javascript

Artikel berkaitan

Lihat lagi