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

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. SDUT OJ 顺序表应用2：多余元素删除之建表算法

    顺序表应用2:多余元素删除之建表算法 Time Limit: 3 ms Memory Limit: 600 KiB Submit Statistic Discuss Problem Descripti ...

  2. json_decode转换数组过程中，结果为null处理办法，百分之百有效

    json_decode这个函数是json_encode的反函数,一般传递数据的时候为了压缩数据,会将数组格式的数据转换成json格式,用到的函数就是json_encode,然后接收到数据之后再用jso ...

  3. 分享记录一批免费VIP视频解析接口，不定时更新！

    VIP视频接口的作用相信大家都懂,那么,由于接口的维护.开发具有不稳定性,失效率很高.这里收集一些目前可用的接口,如果不能用,请反馈给我删除,感谢大家! 电影<西虹市首富>优酷链接:htt ...

  4. mysql的主从与读写分离

    首先我们搭建两个MySQL服务器,这一步地球人都知道. 搭建好后,把两个数据库的数据同步.这一步就要用到我们前面说的备份和还原了.注意:我们只要同步MySQL以外的数据,MySQL库中的帐号密码肯定不 ...

  5. Qt 学习之路 2（45）：模型

    Home / Qt 学习之路 2 / Qt 学习之路 2(45):模型 Qt 学习之路 2(45):模型  豆子  2013年2月26日  Qt 学习之路 2  23条评论 在前面两章的基础之上,我们 ...

  6. java 加载properties

    /** * 取得属性值,无值时返回默认值 * @param name String 属性名称 * @param defaultValue String 属性名称 * @return String 属性 ...

  7. 洛谷 P3616 富金森林公园题解（树状数组）

    P3616 富金森林公园 题目描述 博艾的富金森林公园里有一个长长的富金山脉,山脉是由一块块巨石并列构成的,编号从1到N.每一个巨石有一个海拔高度.而这个山脉又在一个盆地中,盆地里可能会积水,积水也有 ...

  8. 关于cin 与 cout 的加速

    在用cin 与 cout 的时候 可以使用 ios::sync_with_stdio(); cin.tie(); cout.tie(); 这样在输入大数据的时候可以加快许多

  9. SPOJ - DISUBSTR 求串中子串的个数

    \(height\)简单应用 #include<iostream> #include<cstdio> #include<cstring> #include<c ...

  10. SQL批量提交修改业务

    把你需要批量提交修改的东西在内存中修改完毕 然后执行以下代码 SqlConnection conn = new SqlConnection(ConnectionString);SqlDataAdapt ...