使用原生JavaScript来做成星星闪烁效果的代码示例
发布时间：2022-04-20 09:14:52 所属栏目：语言 来源：互联网
导读：本文实例为大家分享了js实现星星闪烁效果的具体代码，供大家参考，具体内容如下。使用JavaScript能够实现很多酷炫的效果，这篇文章就给大家分享下用原生JS实现星星闪烁的效果，用作星空背景动画一定很具个性和炫酷。感兴趣的朋友就继续往下看吧。 html代码：
|
本文实例为大家分享了js实现星星闪烁效果的具体代码，供大家参考，具体内容如下。使用JavaScript能够实现很多酷炫的效果，这篇文章就给大家分享下用原生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元素 以上就是实现星星闪烁效果js代码实例，有需要的朋友可以自动动手实现一下，更多JavaScript相关内容大家可以关注其他文章。 （编辑：常州站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
