微客导航 » 文章资讯 » 原生js实现星星闪烁效果

原生js实现星星闪烁效果

2023-07-04 15:42:11 141

本文实例为大家分享了js实现星星闪烁效果的具体代码，供大家参考，具体内容如下

星星闪烁的原理其实很简单：

html代码：

js：

varstars_box=document.getElementById('stars_box');//获取id为star_box的元素

varObj=function(){}//创建一个对象

Obj.prototype.drawStar=function(){//增加对象原型方法drawStar
varodiv=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元素上
varostar=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();
}

functionPlay(ele){
vari=Math.floor(Math.random()*7);//为了使星星不同时闪烁，设置随机值
vartimer=setInterval(function(){//每100ms执行一次匿名方法
if(i<7){
ele.style.left=-i*7'px';
i;
}else{
i=0;
}
},100);
}

//使用for循环创建30个不同的对象
for(vari=0;i<30;i){
varobj=newObj();
obj.drawStar();
}

星星闪烁静态效果图：

最后附上星星img图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

原生js实现星星闪烁效果

热门推荐

随机推荐