原生js實(shí)現(xiàn)星星閃爍效果
更新時(shí)間：2021年03月06日 08:51:05 作者：會(huì)做飯的技術(shù)男
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)星星閃爍效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)星星閃爍效果的具體代碼，供大家參考，具體內(nèi)容如下
星星閃爍的原理其實(shí)很簡(jiǎn)單：
html代碼：
<body style="background:#000"> <div id="stars_box"></div> </body>
js：
var stars_box=document.getElementById('stars_box'); //獲取id為star_box的元素
var Obj=function(){} //創(chuàng)建一個(gè)對(duì)象
Obj.prototype.drawStar=function(){ //增加對(duì)象原型方法drawStar
var odiv=document.createElement('div'); //創(chuàng)建div
odiv.style.width='7px';
odiv.style.height='7px';
odiv.style.position='relative'; //設(shè)置div為相對(duì)定位
odiv.style.left=Math.floor(document.body.clientWidth*Math.random()) 'px'; //div的left值不能超出屏幕的寬度
odiv.style.top=Math.floor(document.body.clientHeight*Math.random()) 'px';//div的left值不能超出屏幕的高度
odiv.style.overflow='hidden'; //設(shè)置div的overflow為hidden
stars_box.appendChild(odiv); //添加div到stars_box元素上
var ostar=document.createElement('img'); //再創(chuàng)建img元素
ostar.style.width='49px';
ostar.style.height='7px';
ostar.src='star.png';
ostar.style.position='absolute'; //設(shè)置img為絕對(duì)定位
ostar.style.top='0px';
odiv.appendChild(ostar); //把img添加到div中
Play(ostar); //實(shí)現(xiàn)動(dòng)畫閃爍的方法Play();
}
function Play(ele){
var i=Math.floor(Math.random()*7); //為了使星星不同時(shí)閃爍，設(shè)置隨機(jī)值
var timer=setInterval(function(){ //每100ms執(zhí)行一次匿名方法
if(i<7){
ele.style.left=-i*7 'px';
i ;
}else{
i=0;
}
},100);
}
//使用for循環(huán)創(chuàng)建30個(gè)不同的對(duì)象
for(var i=0;i<30;i ){
var obj=new Obj();
obj.drawStar();
}
星星閃爍靜態(tài)效果圖：
最后附上星星img圖：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript中this關(guān)鍵字使用方法詳解
JavaScript中this關(guān)鍵字使用方法詳解...2007-03-03
微信小程序?qū)崿F(xiàn)動(dòng)態(tài)渲染Markdown示例詳解
這篇文章主要為大家介紹了微信小程序?qū)崿F(xiàn)動(dòng)態(tài)渲染Markdown示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
這篇文章主要介紹了Bootstrap表單布局的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07
uni-app 組件里面獲取元素寬高的實(shí)現(xiàn)
這篇文章主要介紹了uni-app 組件里面獲取元素寬高的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
這篇文章主要介紹了ECMAscript新特性對(duì)象，對(duì)象（object）是JavaScript最重要的數(shù)據(jù)結(jié)構(gòu)。ECMAScript 2015對(duì)它進(jìn)行了重大升級(jí)，下面我們來(lái)看一下它的改變2021-12-12
一起來(lái)了解一下JavaScript的預(yù)編譯(小結(jié))
這篇文章主要介紹了一起來(lái)了解一下JavaScript的預(yù)編譯(小結(jié))，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
這篇文章主要介紹了JS匹配日期和時(shí)間的正則表達(dá)式,結(jié)合實(shí)例形式分析了JS匹配日期、時(shí)間及日期+時(shí)間等時(shí)間格式的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-05-05
javascript定時(shí)變換圖片實(shí)例代碼
javascript定時(shí)變換圖片實(shí)例代碼，需要的朋友可以參考一下2013-03-03
這篇文章主要為大家詳細(xì)介紹了js模擬實(shí)現(xiàn)百度搜索，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
一個(gè)簡(jiǎn)單的JS鼠標(biāo)懸停特效具體方法
這個(gè)特效最終實(shí)現(xiàn)效果就是當(dāng)鼠標(biāo)移動(dòng)到鏈接上，文字會(huì)橫向移動(dòng)一定距離，貌似總有人喜歡這些花花草草。添加此效果方法很簡(jiǎn)單。2013-06-06