js untuk mencapai kemahiran effect_javascript latar belakang langit berbintang kosmik

Contoh dalam artikel ini menerangkan kaedah menggunakan js untuk mencapai kesan latar belakang langit berbintang kosmik. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut:

Salin kod Kod adalah seperti berikut: Kesan latar belakang langit berbintang kosmik, kesan khas Js .bintang { kedudukan:mutlak; layer-background-color:white; visibility:visible; atas:-50px; lebar:50px; ketinggian:50px; saiz fon:1px; warna latar:putih; } .60pt{font-size:60pt;color:#ff66cc;} var starnum = 75; // Bilangan bintang var isNS = (document.layers); var _all = (isNS)? '' : 'semua.'; var _style = (isNS) ? '' : '.style'; var xoffset, yoffset, w_x, w_y, tmpx, tmpy, scrlx, scrly; function getstartpos(obj) { //Tentukan kedudukan permulaan pergerakan bintang obj.deltay = Math.floor(Math.random() * 12); //Gunakan fungsi rawak untuk membuat keputusan obj.deltax = Math.floor(Math.random() * 12); obj.xdir = (Math.floor(Math.random() * 2) == 1) ? obj.ydir = (Math.floor(Math.random() * 2) == 1) ? obj.kaunter = 1; jika (isNS) { obj.clip.width = 1; obj.clip.height = 1; obj.moveTo(xoffset pageXOffset, yoffset pageYOffset); } lain { obj.width = 1; obj.tinggi = 1; obj.pixelTop = yoffset document.body.scrollTop; obj.pixelLeft = xoffset document.body.scrollLeft; } } function movestar(starN) //Alihkan kedudukan bintang { tmpx = starN.deltax*starN.counter starN.counter; tmpy = starN.deltay*starN.counter starN.counter; jika (isNS) { starN.clip.width = starN.counter / 3; starN.clip.height = starN.counter / 3; scrlx = pageXOffset; scrly = pageYOffset; if ((starN.left tmpx >= w_x scrlx) || (starN.top tmpy >= w_y scrly) || (starN.left-tmpx getstartpos(starN); } lain { eval('starN.moveBy(' starN.xdir tmpx ', ' starN.ydir tmpy ')'); } } lain { starN.width = starN.counter/3; starN.height = starN.counter/3; scrlx = document.body.scrollLeft; scrly = document.body.scrollTop; jika ((starN.pixelLeft tmpx >= w_x scrlx)||(starN.pixelTop tmpy >= w_y scrly) || (starN.pixelLeft-tmpx getstartpos(starN); } lain { eval('starN.pixelTop' starN.ydir '=tmpy'); eval('starN.pixelLeft' starN.xdir '=tmpx'); } } starN.counter ; } function animate() //Jadikan semua bintang bergerak { untuk(i=1; i movestar(eval('star' i)); } setTimeout('animate()', 100); }

function findwindowparams() { //Tentukan kedudukan permulaan pergerakan bintang w_x = (isNS) ? window.innerWidth : document.body.clientWidth; w_y = (isNS) ? window.innerHeight : document.body.clientHeight; xoffset = w_x / 2; yoffset = w_y / 2; untuk (i = 1; i getstartpos(eval('star' i)); } } fungsi resizeNS() { setTimeout('document.location.reload()', 400); } (isNS) ? window.onresize = resizeNS : window.onresize = findwindowparams; window.onload = new Function("findwindowparams(); animate();"); --> untuk (i = 1; i document.writeln(' '); eval('var star' i '=document.' _all 'star' i _style); } --> Terbang di langit berbintang di alam semesta

Der Betriebseffekt ist wie folgt:

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.