原生js实现星星闪烁的效果
星星闪烁的原理其实很简单:
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实现星星闪烁的效果的更多相关文章
- 怎么实现类似星星闪烁的效果(box-shadow)
有时候设计希望我们能够在页面实现类似星星闪烁的效果,如图: 我的解决办法是用box-shadow: html <div class="star04 active-blink" ...
- 原生js实现canvas气泡冒泡效果
说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单2, 只需引入J ...
- 使用原生js 实现点击消失效果
JQ版 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title ...
- 利用tween,使用原生js实现模块回弹动画效果
最近有一个需求,就是当屏幕往下一定像素时,下方会有一个隐藏的模块马上显现出来,向上运动后带有回弹效果.然后屏幕滚回去时这个模块能够原路返回 其实这个效果css3就可以很轻松实现,但是公司要求最低兼容i ...
- 原生JS实现幻灯片轮播效果
在以往的认知中,一直以为用原生JS写轮播是件很难得事情,今天上班仿照网上的写了一个小demo.小试牛刀. 大致效果: html结构很简单,两个列表,一个代表图片列表,一个是右下角序号列表. <d ...
- 原生js简单实现拖拽效果
实现弹窗拖拽效果的原理是:按下鼠标并移动——拖拽移动物体,抬起鼠标——停止移动.主要触发三个事件:onmousedown.onmousemove以及onmouseup: 首先搭建结构:一个宽350px ...
- 原生js实现图片轮播效果
思路:设置父容器(一定宽度,一定高度,相对定位,子容器超出部分进行隐藏),子容器图片并排(浮动,绝对定位,每次点击进行相应的左或右偏移量) 1.html: <!DOCTYPE html> ...
- 第54天:原生js实现轮播图效果
一.轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量利用定时器实现自动播放,或通过手动点击事件切换图片. 二.Html布局 首先父容器containe ...
- 原生js实现简单的放大镜效果
前言:相信很多同学在浏览购物网站的时候都会用到过放大镜的功能,这个功能在日常的网站也会经常用到.接下来我们开始实现一下它吧: (1)首先了解一下放大镜效果的html架构:如下图,它由两部分组成. ht ...
随机推荐
- 【离散数学】 SDUT OJ 集合的包含
集合的包含 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Problem Description 已知含n个元素的集合的子集 ...
- windows 下 redis 安装
百度下载 windows 版本 的 redis... 解压 安装为windows服务 安装命令: redis-server.exe --service-install redis.windows.co ...
- 1017 A除以B (20 分)
#include <iostream> #include <string> using namespace std; int main() { string num; int ...
- vcftools安装与使用
官网地址:https://vcftools.github.io/examples.html vcftools的软件下载:https://vcftools.github.io/examples.html ...
- C++_代码重用3-私有继承
使用包含:易于理解,类声明中包含表示被包含类的显式命名对象,代码可以通过名称引用这些对象: 使用继承:将使关系更抽象,且继承会引起很多问题,尤其是从多个基类继承时. 私有继承所提供的特性确实比包含多. ...
- [BZOJ 5330][SDOI2018] 反回文串
传送门 怎么说呢,一道不可多得的反演题吧,具体解释之后再补 #include <bits/stdc++.h> using namespace std; #define rep(i,a,b) ...
- os.path模块
什么是os.path模块 该模块用于处理路径,我们知道python是一门跨平台的语言,二每种操作系统,文件路径是截然不同的,为了使程序可以在不同平台生正确运行,python提供了该模块,使用该模块可以 ...
- java中的线程(1):如何正确停止线程Why Are Thread.stop, Thread.suspend, Thread.resume and Runtime.runFinalizersOnExit Deprecated?
转自 : http://docs.oracle.com/javase/1.5.0/docs/guide/misc/threadPrimitiveDeprecation.html 1.Why is Th ...
- SQL Server Reporting Service(SSRS) 第七篇 常见错误汇总
1. The current action cannot be completed. The user data source credentials do not meet the requirem ...
- Unity 代码控制游戏对象是父物体的第多少个子对象
一个canvas下的游戏对象,排列顺序越往下,渲染顺序就越靠后,就会覆盖在先前的图形上.也就是说,运行游戏后,物体的渲染顺序是一个一个计算的. Transform.SetSiblingIndex(in ...