原生js实现星星闪烁效果

2024-08-27 09:14:36

本文实例为大家分享了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图：

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

js实现小星星游戏

本文实例为大家分享了js实现小星星游戏的具体代码,供大家参考,具体内容如下功能简介如图:实现一个点击游戏准备准备一个星星的图片(这里我重命名为xxx.png) 开搞新建一个html文件,并将其与准备好的图片放在同一目录下(东西多了不建议这样搞,但这个就俩) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小
js实现漫天星星效果

本文实例为大家分享了漫天小星星效果的实现代码,供大家参考,具体内容如下效果图: 实现代码: <html onclick="init(event)"> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <script ty
js实现星星闪特效

本文实例为大家分享了js实现星星闪特效的具体代码,供大家参考,具体内容如下效果如下思路: 1.准备一张星星的图片 2.创建多个星星(可以利用for循坏) 3.求出可视网页的宽高 clientWidth,clientHeight 4.设置星星的随机坐标利用 Math.random() 5.设置星星的缩放可以用css中的scale 6.设置星星的缩放延迟频率 animationDelay 7.给星星加动画(鼠标移动时,星星方法旋转) 代码如下 <style> *{ margin: 0; pa
JS实现小星星特效

本文实例为大家分享了JS实现小星星特效的具体代码,供大家参考,具体内容如下鼠标点击窗口实现如图效果: 看起来是不是很像小星星呀代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body style="background-color: #000000;"&g
原生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=f
原生JS实现旋转木马式图片轮播插件

本人自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的,淡入淡出切换的.现在想做一个酷一点的放在博客或者个人网站,到时候可以展示自己的作品.逛了一下慕课网,发现有个旋转木马的jquery插件课程,有点酷酷的,于是就想着用原生JS封装出来.做起来才发现,没有自己想象中的那么容易...不啰嗦了,讲解一下实现过程吧. 二.效果由于自己的服务器还没弄好.在线演示不了(ORZ...),只能放一张效果图了. 从图片上还是可以看出大概效果的,我就不多说了.想看
原生JS实现-星级评分系统的简单实例

今天我又写了个很酷的实例:星级评分系统(可自定义星星个数.显示信息) sufuStar.star(); 使用默认值5个星星,默认信息 var msg = [........]; sufuStar.star(10,msg); 自定义星星个数为10.显示信息msg格式参考默认值,条数必须和星星个数一致: 自己实现一些实例,有个好处,能增加应用各知识点的熟练度,还能检验出自己的薄弱项!一经发现,立即翻API文档恶补! 不知道是不是我太笨,这个实例居然写了整整一天! 不废话了,先说下这个实例涉及的知识点
原生js封装添加class,删除class的实例

一.添加class function addClass(ele,cName) { var arr = ele.className.split(' ').concat(cName.split(" ")); for(var i=0;i<arr.length;i++){ for(var k=arr.length-1;k>i;k--){ (arr[k]==="")&&arr.splice(k,1); (arr[i]===arr[k])&&
利用Angularjs和原生JS分别实现动态效果的输入框

在刚开始没有给输入框添加焦点之前,没有任何效果.见下图: 然后点击其中任何一个,焦点就会触发一个动画,动画的结果见图二: 中间的输入登录密码文字,会自动添加到顶部(原谅我没有截取到动画过程的图片). 我测试了一下,这样的效果只有高级浏览器支持(IE只有IE10.IE11.Edge支持). 下面我来把代码贴上来,原理很简单,就是通过事件触发类名的增加和删除.具体的动画由CSS3来实现,这也是为什么低级浏览器不支持的原因. 原生JS实现示例: <!DOCTYPE html> <html la
原生js的ajax和解决跨域的jsonp(实例讲解)

最近慢慢感觉,学再多框架,库,都不如老老实实先把基础弄扎实了. 不说废话,先上一个用ajax请求下本地的一个.txt文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload =function(){ var oBtn = d
原生JS实现的放大镜效果实例代码

这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML> <html> <head> <title>js放大镜效果</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <style
原生js实现手风琴功能（支持横纵向调用）

话不多说,请看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>手风琴-支持横纵向调用-原生js封装</title> <link rel="shortcut icon" href="../public/image/favicon.ico" type=&q
原生js实现class的添加和删除简单代码

实例代码: function hasClass( elements,cName ){ return !!elements.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") ); }; function addClass( elements,cName ){ if( !hasClass( elements,cName ) ){ elements.className += " "
限制字符输入数功能(jquery版和原生JS版)

已知BUG: Ubuntu系统下, onkeyup事件失效,详见: Ubuntu系统下onkeyup/onkeydown对中文输入失效bug. 查看演示: 点此查看DEMO 核心代码: 复制代码代码如下: //原生JavaScript版本 window.onload=function(){ var js=document.getElementById('js');//获取文本域 var info=document.getElementsByTagName('p')[0];//获取要插入提示信息

原生js实现星星闪烁效果

相关推荐

随机推荐