原生js实现星星闪烁效果
更新时间：2021年03月06日 08:51:05 作者：会做饭的技术男
这篇文章主要为大家详细介绍了原生js实现星星闪烁效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现星星闪烁效果的具体代码，供大家参考，具体内容如下
星星闪烁的原理其实很简单：
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(){} //创建一个对象
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();
}
星星闪烁静态效果图：
最后附上星星img图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
在网页展示中经常会碰到，标题过长，需要截取字符串，用CSS的实现的话各种兼容问题，下面为大家介绍下javascript如何按字节截取字符串2014-04-04
这是一段调用图片流动的代码？为什么我在首页同时复制出二段代码后图片不能流动显示了？遇此问题很是疑惑，于是搜集整理一些实用技巧以解大伙们的燃眉之急，需要了解的朋友可以参考下2012-12-12
这篇文章主要介绍了js replace替换字符串同时替换多个方法 的相关资料,需要的朋友可以参考下2018-11-11
这篇文章主要介绍了webpack多页面开发实践，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
下面小编就为大家分享一篇JS删除数组里的某个元素方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了BootStrap中Tab页签切换实例代码的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下2016-05-05
本文给大家分享的是类似QQ窗口的抖动效果,只是觉得好玩，没什么技术含量，推荐给大家，有需要的小伙伴可以参考下。2015-05-05
本篇文章主要介绍了css3元素简单的闪烁效果实现(html5 jquery) 需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
这篇文章主要介绍了js实现仿Discuz文本框弹出层效果的方法,可实现点击文本框弹出窗口选择数据的效果,涉及鼠标事件及页面自定义弹出窗口的相关操作技巧,需要的朋友可以参考下2015-08-08
最近在网上查阅了不少Javascript闭包(closure)相关的资料，写的大多是非常的学术和专业。对于初学者来说别说理解闭包了，就连文字叙述都很难看懂。撰写此文的目的就是用最通俗的文字揭开Javascript闭包的真实面目。2010-12-12
最新评论