JS动画与交互实例-优快云博客

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js动画</title>
<style type="text/css" media="screen">
   *{
margin: 0;
padding: 0;
}
#container{
height: 200px;
width: 200px;
position: relative;
left: -200px;
background-color: #6effcd;
}
#btn{
height: 60px;
width: 30px;
position: absolute;
left: 200px;
top: 75px;
background-color: #73eeff;
}
#container2{
width: 200px;
height: 200px;
background-color: #20A2F5;
filter: alpha(opacity:20);
opacity: 0.1;
margin: auto;
}
#container3 ul li
{
   width: 50px;
   height: 100px;
   margin-top:50px;
   background-color: yellow;
   list-style: none;
}

</style>
</head>
<body>
<div id="container">
   <span id="btn"></span>
</div>
<div id="container2"></div>
<div id="container3">
   <ul>
       <li></li>
       <li></li>
       <li></li>
       <li></li>
       <li></li>
   </ul>
</div>
<script type="text/javascript">

//透明的变化
var container2=document.getElementById('container2');
container2.onmouseover = function(){
moveStart(10,100);
};
container2.onmouseout = function(){
moveStart(-10,30);
}
var timer=null;
   var alpha = 20;
   function moveStart(oSpeed,oTarget){
       clearInterval(timer);
   timer = setInterval(function(){
   if(oTarget == alpha){
   clearInterval(timer);
   }
   else{
   alpha += oSpeed;
   container2.style.filter = 'alpha(opacity:'+alpha+');'
   container2.style.opacity = alpha/100.0;
   }
   },100);
   }

//滑动滑出
var Larr=document.getElementById('container3').getElementsByTagName('li');

   for (var i = 0;i<Larr.length; i++) {
       Larr[i].timer=null;
       Larr[i].οnmοuseοver=function(){
           startMove(this,500);
       };
       Larr[i].οnmοuseοut=function(){
           startMove(this,50);
       }
   }
}
// target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。
   function startMove(_this,Target){
   clearInterval(_this.timer);
   _this.timer=setInterval(function(){
       var speed=(Target-_this.offsetWidth)/5;
       //    表达式1 ?   表达式2 : 表达式3;
       speed=speed>0?Math.ceil(speed):Math.floor(speed);
       if(_this.offsetWidth==Target)
   {
       clearInterval(_this.timer);
       console.log(_this.offsetWidth);
   }
   else
   {
       _this.style.width=_this.offsetWidth+speed+'px';
   }
   },30)
}