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

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. Hadoop文章

    hadoop入门--简单的MapReduce案例:https://blog.csdn.net/zhangt85/article/details/42077281?utm_source=blogxgwz ...

  2. linux 检测服务器端口工具

    #nmp# nmap 127.0.0.1 #netstat# netstat -anlp | grep 22 #telnet# 服务器端口即使处于监听状态,但是防火墙iptables屏蔽了该端口,是无 ...

  3. UVALive - 7061 区间DP初步

    题意:杀一只狼i会收到a[i]+b[i当前左边]+b[i当前右边]的攻击,求杀死所有狼的最小代价 #include<iostream> #include<algorithm> ...

  4. maven tomcat eclipse 配置 debug

    1.单击Eclipse菜单"Run"中的"Run Configurations". 2.在弹出的对话框中的左侧树中找"到Maven Build&quo ...

  5. 学习python-跨平台获取键盘事件

    class _Getch: """Gets a single character from standard input. Does not echo to the sc ...

  6. Oracle DG --检查

    检查DG是否同步 01,  查看主备可切换状态 select switchover_status from v$database;select db_unique_name,open_mode,dat ...

  7. zabbix CentOS7 配置安装

    一,LAMP+zabbix环境安装 官网: https://www.zabbix.com/download rpm -ivh https://mirrors.aliyun.com/zabbix/zab ...

  8. 9 Essential Free Linux Transcoders（转码）

    需要转码的理由千万种,所幸除了硬件转码之外,Linux平台还有很多开源工具可以借鉴,如该文章所示: 原文来自:9 Essential Free Linux Transcoders(http://www ...

  9. Ubuntu系统里下载安装配置redis-2.2.13.tar.gz

    不多说,直接上干货! Redis是一个NoSQL数据库,在数据需要频繁更新,并且数据的访问热点范围比较广的应用场景下,Redis的效率很不错. 下面介绍Redis的安装过程,如下面的步骤所示. 第一步 ...

  10. 017-Servlet抽取时的BaseServlet模板代码

    package www.test.web.servlet; import java.io.IOException; import java.lang.reflect.Method; import ja ...