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

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='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实现星星闪烁的效果的更多相关文章

  1. 怎么实现类似星星闪烁的效果（box-shadow）

    有时候设计希望我们能够在页面实现类似星星闪烁的效果,如图: 我的解决办法是用box-shadow: html <div class="star04 active-blink" ...

  2. 原生js实现canvas气泡冒泡效果

    说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单2, 只需引入J ...

  3. 使用原生js 实现点击消失效果

    JQ版 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title ...

  4. 利用tween，使用原生js实现模块回弹动画效果

    最近有一个需求,就是当屏幕往下一定像素时,下方会有一个隐藏的模块马上显现出来,向上运动后带有回弹效果.然后屏幕滚回去时这个模块能够原路返回 其实这个效果css3就可以很轻松实现,但是公司要求最低兼容i ...

  5. 原生JS实现幻灯片轮播效果

    在以往的认知中,一直以为用原生JS写轮播是件很难得事情,今天上班仿照网上的写了一个小demo.小试牛刀. 大致效果: html结构很简单,两个列表,一个代表图片列表,一个是右下角序号列表. <d ...

  6. 原生js简单实现拖拽效果

    实现弹窗拖拽效果的原理是:按下鼠标并移动——拖拽移动物体,抬起鼠标——停止移动.主要触发三个事件:onmousedown.onmousemove以及onmouseup: 首先搭建结构:一个宽350px ...

  7. 原生js实现图片轮播效果

    思路:设置父容器(一定宽度,一定高度,相对定位,子容器超出部分进行隐藏),子容器图片并排(浮动,绝对定位,每次点击进行相应的左或右偏移量) 1.html: <!DOCTYPE html> ...

  8. 第54天：原生js实现轮播图效果

    一.轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量利用定时器实现自动播放,或通过手动点击事件切换图片. 二.Html布局 首先父容器containe ...

  9. 原生js实现简单的放大镜效果

    前言:相信很多同学在浏览购物网站的时候都会用到过放大镜的功能,这个功能在日常的网站也会经常用到.接下来我们开始实现一下它吧: (1)首先了解一下放大镜效果的html架构:如下图,它由两部分组成. ht ...

随机推荐

  1. [AHOI2009]中国象棋 BZOJ1801 dp

    题目描述 这次小可可想解决的难题和中国象棋有关,在一个N行M列的棋盘上,让你放若干个炮(可以是0个),使得没有一个炮可以攻击到另一个炮,请问有多少种放置方法.大家肯定很清楚,在中国象棋中炮的行走方式是 ...

  2. 主机和虚拟机互Ping的问题

    主机能ping通虚拟机,虚拟机能ping不通主机. 发现原来是被防火墙阻止了.打开主机防火墙禁止Ping的方式. 在ping不通的电脑上对防火墙进行如下设置:依次单击“防火墙”—“高级设置”—“入站规 ...

  3. C++_基础5-内存模型

    C++为在内存中存储数据提供了多种选择: 可以选择数据保留在内存中的时间长度(存储持续性): 程序的哪一部分可以访问数据(作用域和链接): 可以使用new来动态地分配内存:定位new运算符提供了这种技 ...

  4. poj 1964 City Game

    Bob is a strategy game programming specialist. In his new city building game the gaming environment ...

  5. python-is,==

    在讲is和==这两种运算符区别之前,首先要知道Python中对象包含的三个基本要素,分别是:id(身份标识).python type()(数据类型)和value(值).is和==都是对对象进行比较判断 ...

  6. 找出数组中的最小值（es5/es6）

    1.命令式编程,只需要迭代数组,检查当前最小值是否大于数组元素,如果是更新最小值即可. var s = [2,3,4,5,6,7,8]; for(var i=0,m=s.length;i<m;i ...

  7. 前端页面 script 事件总结

    1. input  失去焦点是触发事件 $("#sn").blur(function(){ alert("sdfasdf"); }); 2.  获取文本框中的 ...

  8. 【网络】CCNA实验一：Vlan、Trunk

    要求: 1:不同楼层物理隔离,但逻辑相连 2:相同楼层物理相连,但逻辑隔离 3:主机可以动态获取IP地址 4:不同VLAN间可以进行通信 5:主机最终访问www.esafenet.com弹出" ...

  9. 【研究】struts2-045漏洞

    攻击者可以通过构造HTTP请求头中的Content-Type值可能造成远程代码执行. 工具: K8(链接:https://pan.baidu.com/s/1kVxgFNx 密码:ygxf) Tomca ...

  10. (转)如何在Linux中统计一个进程的线程数

    如何在Linux中统计一个进程的线程数 原文:http://os.51cto.com/art/201509/491728.htm 我正在运行一个程序,它在运行时会派生出多个线程.我想知道程序在运行时会 ...