javascript学习-原生javascript的小特效（简单的运动效果）

前些日子看了个视频所以就模仿它的技术来为大家做出几个简单的JS小特效

一：运动特效（主要是通过改变元素的left,right,height,width,opacity来达到运动的效果）

我们今天做一个利用计时器来创建一个匀速运动的效果，代码很简单。

1:首先我们先写出HTML的结构

<div id="div1">
<span id="share">share</span>
</div>

2：给出样式

<style type="text/css">  
body{margin: 0;padding: 0;}
span{background: blue;width: 50px;height: 60px;position: absolute;right:-48px;color: #fff;top: 47px;}
div{background: red;width: 200px;height: 150px;position: relative;left: -200px;}
</style>

3：然后到了我们的JS部分

<script type="text/javascript">
window.οnlοad=function(){ 页面内容完全载入的时候执行这个匿名函数
var div=document.getElementById("div1");  获取div
div.οnmοuseοver=function(){  
当鼠标经过这个这个div的时候执行里面的函数showDiv();
showDiv();
}
div.οnmοuseοut=function(){
当鼠标离开这个这个div的时候执行里面的函数hidDiv();
hidDiv();
}
}
var timer; 定义一个定时器ID
function showDiv(){ 创建showDiv函数
clearInterval(timer); 每次触发该函数的时候都清空一下以前有的定时器若有的话。
var div=document.getElementById("div1"); 获取div

timer=setInterval(function(){ 创建一个定时器
if(div.offsetLeft==0){ 判断下是否到了目标值 
clearInterval(timer);  是的话就清空定时器
}
else{
div.style.left=div.offsetLeft+10+"px";} 
还没到目标值的话就把div的left属性改为本身Left 的值加10，在还没到目标值的时候，这地方都一直进行而且每次都在之前的基础上加10一直到达目标值清空

},50) 开始定时器后每隔50毫秒执行定时器里的代码
}

function hidDiv(){
clearInterval(timer);
var div=document.getElementById("div1");
timer=setInterval(function(){
if(div.offsetLeft==-200){
clearInterval(timer);
}
else{
div.style.left=div.offsetLeft-10+"px";}
},50)
}

</script>

4:我们来优化下javascript代码

我们都知道当两个代码功能很相似的时候我们就可以把不同的地方提取出来作为参数传入。

分析上面两个代码，我们发现整体很多地方相似，主要不同的地方是目标值和速度，现在我们把它们都提取出来作为参数传入，整合为一个函数。

<script type="text/javascript">
window.οnlοad=function(){ /*页面内容完全载入的时候执行这个匿名函数*/
var div=document.getElementById("div1");  /*获取div*/
div.οnmοuseοver=function(){  
// 当鼠标经过这个这个div的时候执行里面的函数showHidDiv();
showHidDiv(0,+10);
}
div.οnmοuseοut=function(){
// 当鼠标离开这个这个div的时候执行里面的函数showHidDiv();
showHidDiv(-200,-10);
}
}
var timer; /*定义一个定时器ID*/
function showHidDiv(divTarget,speed){
clearInterval(timer);
var div=document.getElementById("div1");

timer=setInterval(function(){
if(div.offsetLeft==divTarget){
clearInterval(timer);
}
else{
div.style.left=div.offsetLeft+speed+"px";}


},50)
}


</script>

5：最后优化

当一个函数需要传参的时候，传的参数越小越好。

分析下上面的代码，我们发现速度的正反可以根据目标值的大少来确定的，所以我们现在就把参数速度干掉，把它整合到代码中。

<script type="text/javascript">
window.οnlοad=function(){ /*页面内容完全载入的时候执行这个匿名函数*/
var div=document.getElementById("div1");  /*获取div*/
div.οnmοuseοver=function(){  
// 当鼠标经过这个这个div的时候执行里面的函数showHidDiv();
showHidDiv(0,+10);
}
div.οnmοuseοut=function(){
// 当鼠标离开这个这个div的时候执行里面的函数showHidDiv();
showHidDiv(-200,-10);
}
}
var timer; /*定义一个定时器ID*/
function showHidDiv(divTarget){
var speed;
clearInterval(timer);
var div=document.getElementById("div1");
if(divTarget>div.offsetLeft){
speed=10;
}
else{
          speed=-10;
}

timer=setInterval(function(){
if(div.offsetLeft==divTarget){
clearInterval(timer);
}
else{
div.style.left=div.offsetLeft+speed+"px";}
},50)
}
</script>

速度的地我们改一下，让它不做匀速运动，改为缓冲运动

<script type="text/javascript">
window.οnlοad=function(){ /*页面内容完全载入的时候执行这个匿名函数*/
var div=document.getElementById("div1");  /*获取div*/
div.οnmοuseοver=function(){  
// 当鼠标经过这个这个div的时候执行里面的函数showHidDiv();
showHidDiv(0,+10);
}
div.οnmοuseοut=function(){
// 当鼠标离开这个这个div的时候执行里面的函数showHidDiv();
showHidDiv(-200,-10);
}
}
var timer; /*定义一个定时器ID*/
function showHidDiv(divTarget){
var speed;
clearInterval(timer);
var div=document.getElementById("div1");
speed=(divTarget-div.offsetLeft)/30;//越接近目标值 速度越慢，数值可能为小数点
speed=speed>0?Math.ceil(speed):Math.floor(speed);//speed大于0向上取整，<0就向下取整
timer=setInterval(function(){
if(div.offsetLeft==divTarget){
clearInterval(timer);
}
else{
div.style.left=div.offsetLeft+speed+"px";}
},50)
}
</script>