首页 > 代码库 > 原生js实现星星闪烁的效果
原生js实现星星闪烁的效果
星星闪烁的原理其实很简单：
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=http://www.mamicode.com/‘star.png‘;>
星星闪烁静态效果图：
最后附上星星img图：
原生js实现星星闪烁的效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。