JS运动----（1）

来源：互联网发布：平板windows系统怎么样编辑：程序博客网时间：2024/04/30 01:20

1.运动基础

如何让一个div运动起来？

原理很简单，就是让他的Left不断增加，它不就开始运动起来。

<style>
#div1 {width:100px; height:100px; position:absolute; background:red; left:0; top:50px;}
</style>
 <script type="text/javascript">
function startMove()
{
 var oDiv=document.getElementById('div1');
 
 setInterval(function (){
  oDiv.style.left=oDiv.offsetLeft+10+'px';
 }, 30);
}
</script>
</head>
<body>
<input type="button" value="开始运动" onclick="startMove()" />
<div id="div1"></div>

以后示例只写js代码，html代码同上；

我们发现上面Div停步下来，一直疯狂的跑，怎么让他停下呢？很简单，就是设置它的offseLeft;

 <script type="text/javascript">
var timer=null;
function startMove()
{
 var oDiv=document.getElementById('div1');
 
 timer=setInterval(function (){
  if(oDiv.offsetLeft==300)
  {
   clearInterval(timer);
  }
  oDiv.style.left=oDiv.offsetLeft+10+'px';
 }, 30);
}
</script>
这下好了，我们终于控制住了这个疯狂的div；可是看看下面的；
<script type="text/javascript">
var timer=null;
function startMove()
{
 var oDiv=document.getElementById('div1');
 
 timer=setInterval(function (){
  var iSpeed=7;
  
  if(oDiv.offsetLeft>=300)
  {
   clearInterval(timer);
  }
  oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';
 }, 30);
}
</script> 
又发现一个问题，这个div又听不下呢？是不是很疑惑，其实是因为我们修改了他的速度值7，也就是说7，14，21........294,301,刚好跳过我们的限制条件==300,于是我们修改控制条件为>=300.不就可以停下来了。
可是这个还有个问题，到达终点以后再次点击还可以移动。
<script type="text/javascript">
var timer=null;
function startMove()
{
 var oDiv=document.getElementById('div1');

 timer=setInterval(function (){
  var iSpeed=10;

  if(oDiv.offsetLeft>=300) //是否到达终点
  {
   clearInterval(timer); //到达终点
  }
  else
  {
   oDiv.style.left=oDiv.offsetLeft+iSpeed+'px'; //到达之前
  }
 }, 30);
}
</script> 

用一个if-else包起来，到达终点再次点击就不再移动了。可是还有一个问题？当div在移动的时候，我们重复着点击的时候，速度越来越快。肿么办？
 var timer=null;
function startMove()
{
 var oDiv=document.getElementById('div1');
 
 clearInterval(timer);
 timer=setInterval(function (){
  var iSpeed=5;
  
  if(oDiv.offsetLeft>=300) //是否到达终点
  {
   clearInterval(timer); //到达终点
  }
  else
  {
   oDiv.style.left=oDiv.offsetLeft+iSpeed+'px'; //到达之前
  }
 }, 30);
}

总结：让Div运动起来
    --速度----运动物体的快慢
    --运动中的BUG
          ---不会停止（if....else）
          ---速度取某些值会无法停止
          ---到达位置后再点击还会运动
          ---重复点击速度加快
运动框架：就是一套做事的流程。
【运动框架及其应用】
 1 ，运动框架
      运动框架：只是一套流程。在开始运动的时候要关闭原来的定时器，把运动和停止分开 （）if/else。
       --在开始运动时，关闭已有的定时器。
       --把运动和停止分隔开（if...else）
2.运动框架实例：
    --分享到侧边栏。（通过目标点，计算速度值）
    --淡入淡出图片。（用变量存贮透明度）。
实例演示和代码：
 案例 1--分享到
<style>
#div1{width:100px;height:150px;background:#6FF;position:absolute;top:100px;left:-100px;}
#div1 span{width:20px;height:120px;background:#FF9;position:absolute;left:100px;text-align:center;line-height:40px;top:10px;}
</style>
<script>
window.onload = function()
 {
  var oDiv = document.getElementById('div1');
  oDiv.onmousemove = function()
   {
   startMove(0); 
   };
  oDiv.onmouseout = function()
   {
   startMove(-100); 
   };
   };
var timer = null;       //变量一定要写在外面
function startMove(iTarget)
 {
  var oDiv = document.getElementById('div1');//思考一下这里为什么还要写一遍这个变量，上面不是定义呢

  if(oDiv.offsetLeft<iTarget)
   {
   iSpeed = 10; 
   }
  else
   {
    iSpeed = -10; 
   }
  clearInterval(timer);
  timer = setInterval(function(){
   if(oDiv.offsetLeft==iTarget)
    {
   clearInterval(timer); 
       }
   else
    {
    oDiv.style.left =oDiv.offsetLeft + iSpeed + 'px';   
    }
    },30);  
 }
</script>
</head>
<body>
<div id="div1">
<a href = "#">百度</a><br/>
<a href = "#">百度</a><br/>
<a href = "#">百度</a><br/>
<a href = "#">百度</a><br/>
<span >分享到</span>
</div>
总结：这里用到的startMove()函数就是运动框架。是不是很鸡冻，这么简单有木有呀。。
案例 2
  淡入淡出的图片：
 <style>
#img1 {filter:alpha(opacity:30); opacity:0.3;}
</style>
<script type="text/javascript">
window.onload=function ()
{
 var oImg=document.getElementById('img1');
 
 oImg.onmouseover=function ()
 {
  startMove(100);
 }
 
 oImg.onmouseout=function ()
 {
  startMove(30);
 }
}
var timer=null; //还是和上面一样，思考为什么要放在外面？
var alpha=30;  //注意这里是用变量的形式存放透明度的，因为没有这个属性，所以这样子处理。
function startMove(iTarget)
{
 var oImg=document.getElementById('img1');
 
 clearInterval(timer);
 timer=setInterval(function (){
  var iSpeed=0;
  
  if(alpha<iTarget)
  {
    iSpeed=1;
   }
  else
  {
    iSpeed=-1;
  }

  if(alpha==iTarget)
  {
   clearInterval(timer);
  }
  else
  {
   alpha+=iSpeed;
   
   oImg.style.filter='alpha(opacity:'+alpha+')';
   oImg.style.opacity=alpha/100;

     }
 }, 30);
}
</script>
</head>
<body>
<img id="img1" src="Desert.jpg" />
</body> 
总结：
 通过上面的两个案例，我们得出如下结论：
     1：运动框架其实并不限于用于那个具体的模型，只是一套完全成熟的运动过程。
     2：注意全局变量和局部变量（你肯定好奇为毛说这个--透露下，这个东西跟闭包可有着大关系，先不扯）
     3：对于不存在的属性且要变化，我们可以采取变量的方式来进行保存。
 
                                      （PS：如果对于上述内容有错误，麻烦请留言，谢谢）

0 0