JS动画特效(二)

一、星空闪烁

效果图如下,实际效果是星星动态的闪烁。可用作网页背景等。
JS动画特效(二)_第1张图片
代码如下:
html只需要一个盒子容器,并且设置页面背景为黑色即可。

<body style="background:#000">
	<div id="app">div>
body>

其中,用作星星的图片是:
在这里插入图片描述
大小为49*7px,共有7段内容。

第一步,要确定星星出现的位置,由于是随机出现,因此定义一个对象原型方法drawStar,用于创建父盒子odiv,封装每一个星星。将其样式设置为相对定位,并随机生成left和top值。设置overflow:hidden的目的是只显示7*7px的父盒子内的图片部分,超出则隐藏。

第二步,创建图片元素,根据“子绝父相”,设置为相对定位,并加入到父盒子odiv中。
第三步,编写闪烁的代码,原理是定时左右移动图片,造成视觉上星星在闪烁的效果。实现起来很简单,只需要定时器和循环改编star元素的位置。

最后,调用相应的函数,并循环产生多个星星。

详细js代码如下:

<script>
	var stars=document.getElementById('app');  //获取id为app的元素
	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,只显示7*7的父盒子内容
		app.appendChild(odiv);   //添加div到app元素上
		var star = document.createElement('img');   //再创建img元素
		star.style.width = '49px';
		star.style.height = '7px';
		star.src = './images/star.png';     //图片的尺寸是49*7
		star.style.position = 'absolute';   //设置img为绝对定位
		star.style.top = '0px';
		odiv.appendChild(star);   //把img添加到div中
		Play(star);    //实现动画闪烁的方法Play();
	}
 
	function Play(ele){
		var i = Math.floor(Math.random()*7);  //随机产生小于7的整数作为i(向下取整)
		//为了使星星不同时闪烁,设置随机值
		var timer = setInterval(function(){   //每100ms执行一次匿名方法
		   if(i<7){
		      ele.style.left = -i*7+'px';  //让包含图片的子盒子来回移动,每次移动7px,42px后返回初始位置
		      i++;
		   }else{
		      i = 0;
		   }  
		},100);
	}
		 
	//使用for循环创建40个不同的对象
	for(var i=0; i<40; i++){
		var obj = new Obj();
		obj.drawStar();
	}
</script>

二、指针钟表

主要基于CSS3旋转动画实现钟表指针随系统时间同步旋转变化。效果如如下:
JS动画特效(二)_第2张图片
#box为表盘,list为表盘刻度,hour为时针,min为分针,sec为秒针,ico为表盘中心的圆点。刻度作为li标签添加进去,依次每隔6deg一个排布在表盘上。


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>钟表-CSS3title>
<style id="css">
	#box{ width:200px;height:200px;border:1px solid black;position:relative;border-radius:50%;margin:100px auto; }
	#list{ list-style:none;position:relative;height:100%;margin:0;padding:0; }
	#list li{ width:1px;height:6px;background:#000;position:absolute;left:99px;top:0;transform-origin:center 100px;-moz-transform-origin:center 100px;-webkit-transform-origin:center 100px;-o-transform-origin:center 100px; }
	#list li:nth-child(5n+1){ width:2px;height:10px; }
	#ico,#hour,#min,#sec{ position:absolute;background:#000; }
	#ico{ width:10px;height:10px;border-radius:50%;left:95px;top:95px; }
	#hour{ width:4px;height:50px;left:98px;top:50px;transform-origin:bottom;-moz-transform-origin:bottom;-webkit-transform-origin:bottom;-o-transform-origin:bottom; }
	#min{ width:2px;height:70px;left:99px;top:30px;background:#300;transform-origin:bottom;-moz-transform-origin:bottom;-webkit-transform-origin:bottom;-o-transform-origin:bottom; }
	#sec{ width:2px;height:90px;left:99px;top:10px;background:red;transform-origin:bottom;-moz-transform-origin:bottom;-webkit-transform-origin:bottom;-o-transform-origin:bottom; }
style>
<script>
	window.onload=function(){
		
		var list=document.getElementById("list");
		var hour=document.getElementById("hour");
		var mins=document.getElementById("min");
		var sec=document.getElementById("sec");
		var css=document.getElementById("css");
		
		var lis="";
		 
		for( var i=0;i<60;i++ ){			
			lis+=" 
  • "
    ; css.innerHTML+="#list li:nth-of-type("+(i+1)+"){ transform:rotate( "+i*6+"deg );-moz-transform:rotate( "+i*6+"deg );-webkit-transform:rotate( "+i*6+"deg );-o-transform:rotate( "+i*6+"deg ); }"; } list.innerHTML=lis; toTime(); setInterval( toTime,1000 ); function toTime(){ var date=new Date(); var s=date.getSeconds(); var m=date.getMinutes()+s/60; var h=date.getHours()+m/60; hour.style.WebkitTransform=" rotate( "+ h*30 +"deg ) "; mins.style.WebkitTransform=" rotate( "+ m*6 +"deg ) "; sec.style.WebkitTransform=" rotate( "+ s*6 +"deg ) "; } }
    script> head> <body> <div id="box"> <ul id="list">ul> <div id="hour">div> <div id="min">div> <div id="sec">div> <div id="ico">div> div> body> html>

    你可能感兴趣的:(学习笔记)