java制作闪星星,原生js实现星星闪烁效果

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

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

html代码：

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图：

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

java制作闪星星,原生js实现星星闪烁效果相关推荐

深圳java培训：使用原生JS重构简单的音乐播放器
深圳java培训:使用原生JS重构简单的音乐播放器上次,我们使用Jquery开发了一款简单的音乐播放器(如下图), 后来学生希望能够用原生的JS重构一次, 那么,下面就来看看如何使用原生的JS重构吧 ...
star评星点亮星星原生js评星 vue评星
类似于淘宝订单交易成功后,会进行评价. 项目结构如下: 一:原生js进行评星 <!DOCTYPE html><html lang="en"><head ...
java心电图_使用原生js+canvas实现模拟心电图
从2016年2月转行进入IT行业,到现在也有将近两年的时间了,从最开始的java到现在的前端,前进的路上一直靠自己摸索,一路走到现在,前端大神是绝对谈不上的,最多算一只刚入门的菜鸟. 从最开始的懵懵懂 ...
如何用html5制作抽奖游戏,原生js实现抽奖小游戏
这个小游戏可以设置为抽奖小游戏,也可以设置为随机点名器,这个软件实现可以多次获取同一个元素的 1.HTML结构代码如下: 开始点名停止幸运的的你 2.css样式设置页面代码如下: css代码不仅仅 ...
html制作日历备忘录,原生JS代码制作带记事备忘功能的双月份显示效果的日历
原生JS写的日历月历 - demo by js.alixixi.com window.onload = function(){ function $(id){return typeof id === ...
java制作闪星星_Silverlight之我见——制作星星闪烁动画
圣诞节来了,无聊,做点东西纪念一下. 原理很简单,生成1000个圆,从随机数来布置它们的位置,通过动画来处理它们的透明度,动画时长也是随机生成. 1.创建图形数组并设置背景透明,渐变笔触,大小等,而后 ...
Ajax和JSON-学习笔记01【原生JS方式实现Ajax】
Java后端学习路线笔记汇总表[黑马程序员] Ajax和JSON-学习笔记01[原生JS方式实现Ajax] Ajax和JSON-学习笔记02[JQuery方式实现Ajax] Ajax和JSON-学 ...
JS实现星星评分功能实例代码(两种方法)
转载自 JS实现星星评分功能实例代码(两种方法) 一.方法1 1.用到图片 2.结构和样式 <!DOCTYPE html> <html lang="en"&g ...
java原生的ajax怎么写,用原生js实现 ajax方法
原标题:用原生js实现 ajax方法作者介绍:咔拉宝宝前端工程师,致力于首个情景式购物商城咔拉商城的前端搭建,在咔拉职场栏目作为程序猿担当,与读者朋友们共同探讨前端开发的那些事. 一.ajax介绍: ...
分别用Java应用程序和Applet程序实现星星三角形图案的绘制
一,用Java应用程序和Applet程序实现星星三角形图案的绘制 1,新建java project , project name 为 Triangle 2,新建new class , class na ...

java制作闪星星,原生js实现星星闪烁效果

java制作闪星星,原生js实现星星闪烁效果相关推荐

最新文章

热门文章