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

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

WBOY

Lepaskan： 2016-05-16 15:22:14

asal

1082 orang telah melayarinya

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>

Salin selepas log masuk

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 )%4<2?"0px":"4px", kod ini ialah bahagian teras, nilai operasi modulo b%2 ialah 0 atau 1, Ini menjadi nilai indeks tatasusunan a dan digunakan untuk mendapatkan nilai dalam tatasusunan. Kesan gaya[a[b%] dan gaya.atas adalah sama. ]]=(b )%4<2?"0px":"4px", dengan cara ini, atribut atas dan kiri div diberikan nilai dengan mengambil modulo untuk menentukan sama ada nilainya kurang daripada 2.
6.if(b>15) {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>

Salin selepas log masuk

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.