原生jsは星の点滅効果を実現します。
本論文の例では、jsが星のシンチレーション効果を実現する具体的なコードを共有しています。
星の瞬きの原理は実は簡単です。
htmlコード:
最後に星を添付します。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
星の瞬きの原理は実は簡単です。
htmlコード:
<body style="background:#000">
<div id="stars_box"></div>
</body>
var stars_box=document.getElementById('stars_box'); // id star_box
var Obj=function(){} //
Obj.prototype.drawStar=function(){ // drawStar
var odiv=document.createElement('div'); // div
odiv.style.width='7px';
odiv.style.height='7px';
odiv.style.position='relative'; // 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'; // div overflow hidden
stars_box.appendChild(odiv); // div stars_box
var ostar=document.createElement('img'); // img
ostar.style.width='49px';
ostar.style.height='7px';
ostar.src='star.png';
ostar.style.position='absolute'; // img
ostar.style.top='0px';
odiv.appendChild(ostar); // img div
Play(ostar); // Play();
}
function Play(ele){
var i=Math.floor(Math.random()*7); // ，
var timer=setInterval(function(){ // 100ms
if(i<7){
ele.style.left=-i*7 'px';
i ;
}else{
i=0;
}
},100);
}
// for 30
for(var i=0;i<30;i ){
var obj=new Obj();
obj.drawStar();
}最後に星を添付します。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。