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

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. 3-19bug随即

    #方案录入 ### 国外网络访问,录入添加图片,上传后图片显示不出. ``` * 后台有返回数据,前端显示巨慢,待检查 * ``` ### 产品信息,富文本信息加载不出

  2. Codeforces Round #162 (Div. 2) A~D 题解

    A. Colorful Stones (Simplified Edition) time limit per test 2 seconds memory limit per test 256 mega ...

  3. Qt C++ libcaffe.so无法调用

    在用QT编写调用caffe的工程时,发现一直有个错误: error while loading shared libraries libcaffe.so.1.0.0-rc3: cannot open ...

  4. angluarJs与后台交互get

    <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <met ...

  5. tornado 01 路由、输入与输出

    tornado 01 路由.输入与输出 一.安装tornado pyvip@Vip:~$ workon py3env #安装python3的虚拟环境 (py3env) pyvip@Vip:~$ pip ...

  6. Subsequence（二分）

    A sequence of N positive integers (10 < N < 100 000), each of them less than or equal 10000, a ...

  7. [转] electron实战开发详细流程

    [From] http://www.myk3.com/arc-8856.html 很久没有更新博客,人越来越懒了,唉 说好做的electron教程距离上次玩electron已经过去了好几个月了.. 这 ...

  8. 从source安装python3.5和pip

    按顺序来,先装上python3.5,source安装,命令是 ./configure --prefix="你想要的路径" make make install 然后是安装pip,但是 ...

  9. Q541 反转字符串 II

    给定一个字符串和一个整数 k,你需要对从字符串开头算起的每个 2k 个字符的前k个字符进行反转.如果剩余少于 k 个字符,则将剩余的所有全部反转.如果有小于 2k 但大于或等于 k 个字符,则反转前 ...

  10. Android百分比布局方案

    百分比布局让其中的控件在指定高度,宽度,margin时使用屏幕宽高的百分比,不使用dp,px.这样一套布局可以适应多个屏幕,方便适配.如: app:layout_heightPercent=" ...