原生js實(shí)現(xiàn)星星閃爍效果
本文實(shí)例為大家分享了js實(shí)現(xiàn)星星閃爍效果的具體代碼,供大家參考,具體內(nèi)容如下
星星閃爍的原理其實(shí)很簡單:
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è)對象 Obj.prototype.drawStar=function(){ //增加對象原型方法drawStar var odiv=document.createElement('div'); //創(chuàng)建div odiv.style.width='7px'; odiv.style.height='7px'; odiv.style.position='relative'; //設(shè)置div為相對定位 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為絕對定位 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è)不同的對象 for(var i=0;i<30;i ){ var obj=new Obj(); obj.drawStar(); }
星星閃爍靜態(tài)效果圖:
最后附上星星img圖:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
跟我學(xué)習(xí)javascript的prototype使用注意事項(xiàng)
跟我學(xué)習(xí)javascript的prototype使用注意事項(xiàng),介紹了在使用prototype的幾點(diǎn)注意事項(xiàng),需要的朋友可以參考下2015-11-11json數(shù)據(jù)處理及數(shù)據(jù)綁定
本文主要介紹了json數(shù)據(jù)處理及數(shù)據(jù)綁定的相關(guān)知識(shí)。具有很好的參考價(jià)值,下面跟著小編一起來看下吧2017-01-01JavaScript數(shù)組的定義及數(shù)字操作技巧
這篇文章主要介紹了JavaScript數(shù)組的定義及數(shù)字操作技巧的相關(guān)資料,需要的朋友可以參考下2016-06-06JS獲取本周周一,周末及獲取任意時(shí)間的周一周末功能示例
這篇文章主要介紹了JS獲取本周周一,周末及獲取任意時(shí)間的周一周末功能,結(jié)合實(shí)例形式分析了js通過擴(kuò)展實(shí)現(xiàn)針對日期的運(yùn)算相關(guān)技巧,需要的朋友可以參考下2017-02-02JS實(shí)現(xiàn)針對給定時(shí)間的倒計(jì)時(shí)功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)針對給定時(shí)間的倒計(jì)時(shí)功能,結(jié)合具體實(shí)例形式分析了javascript日期時(shí)間的正則判定與動(dòng)態(tài)運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2017-04-04js學(xué)習(xí)總結(jié)_選項(xiàng)卡封裝(實(shí)例講解)
下面小編就為大家?guī)硪黄猨s學(xué)習(xí)總結(jié)_選項(xiàng)卡封裝(實(shí)例講解)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07js實(shí)現(xiàn)提交前對列表數(shù)據(jù)的增刪改查
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)提交前對列表數(shù)據(jù)的增刪改查,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-01-01通過微信公眾平臺(tái)獲取公眾號(hào)文章的方法示例
這篇文章主要介紹了通過微信公眾平臺(tái)獲取公眾號(hào)文章的方法示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12