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

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. 设置placeholder的样式

    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #f00; } ::-moz-placeholder { /* Mozilla Fir ...

  2. Nuclear Power Plant ZOJ - 3840 树形dp

    There are N (1 ≤ N ≤ 105) cities on land, and there are N - 1 wires connecting the cities. Therefore ...

  3. springboot访问静态资源遇到的坑

    开始是以这种结构进行的,结果页面上一篇红,访问的页面是这样的 最终找出来问题,虽然每次调整路径都不对,最终查看多种方法可以看到了: 增加: package com.example.demo.confi ...

  4. Kibana6.x.x源码分析--启动时无反应分析

    今天执行启动命令后,不报错,但是也没有反应,一时不知道是什么原因造成的,后来经过分析发现,无意间删除了根目录下的一个文件夹plugins,重新创建上这个文件夹后,再次运行就OK了.

  5. Pollard_Rho 整数分解法【学习笔记】

    引文:如果要对比较大的整数分解,显然之前所学的筛选法和是试除法都将不再适用.所以我们需要学习速度更快的Pollard_Rho算法. 算法原理: 生成两个整数a和b,计算p=gcd(a-b, n),知道 ...

  6. 利用touchslide实现tab滑动切换

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. web 导出数据到 exls 中

    // 文件下载:导出excel表 @RequestMapping(value = "/exportExcel", method = {RequestMethod.GET}) @Re ...

  8. C++ GUI Qt4编程(08)-3.2spreadsheet-resource

    1. C++ GUI Qt4编程第三章,图片使用资源机制法. 2. 步骤: 2-1. 在resource文件夹下,新建images文件,存放图片. 2-2. 新建spreadsheet.qrc文件,并 ...

  9. mysql PXC集群方案总结

    同时写集群内的所有机器 写性能依赖最慢的那个机器 读性能提高X倍

  10. TT8509: PL/SQL execution terminated; PLSQL_TIMEOUT exceeded

    TT8509: PL/SQL execution terminated; PLSQL_TIMEOUT exceeded plsql_timeout连接超时,解决办法: ODBC pl/sql选项卡 修 ...