JS小项目合集-运动

  • 来源：B站JS从入门到精通视频

1.基础运动框架

题目描述

点击开始运动按钮，使得方块元素向右运动，并在300px处停止运动

javascript新手小项目 js项目大全_html

题目代码

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   #div1{ width: 100px;height: 100px;background: red;position:absolute;top:50px}
  </style> 
  <script>
   window.onload=function(){
    var obut=document.getElementById("button1");
    obut.onclick=function(){
     startmove(300);
    }
   }
   var timer=null; 
   function startmove(target){
    var odiv=document.getElementById("div1");
    var otxt=document.getElementById("txt1");
    clearInterval(timer); 
    timer = setInterval(function(){
     var speed=0;
     if (target>odiv.offsetLeft){
      speed=7;
     }
     else
     {
      speed=-7;
     } 
     if (Math.abs(odiv.offsetLeft-target)<7){ 
      clearInterval(timer); 
      odiv.style.left=target+"px";
     }
     else{  
      odiv.style.left=odiv.offsetLeft+speed+"px";
      
     }
    },30);
     
   }
  </script> 
 </head>  
 <body>
  <input id="button1" type="button" value="开始运动" onclick="startmove()"/>
  <div id="div1">
 </body>
</html>
  • 时器同时开启使得速度变化
  • 通过if/else将运动和停止分开
  • 匀速运动停止条件在距离终点位置小于速度时即认为已到达，停止定时器并到达目标点，可以防止临界的抖动。
  • 位置不要忘记+“px”

2.缓冲运动

题目描述

点击开始运动按钮，使得方块元素向右运动，并在300px处停止运动，速度由大变小

题目代码

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   #div1{ width: 100px;height: 100px;background: red;position:absolute;left:0px;top:50px}
  </style> 
  <script>
   window.onload=function(){
    var odiv=document.getElementById("div1");
    odiv.onlick=function(){
     startmove();
    }
   }
   var timer=null;
   function startmove(){
    var odiv=document.getElementById("div1");
    clearInterval(timer); 
    timer = setInterval(function(){
     var speed=(300-odiv.offsetLeft)/100;
     speed=speed>0?Math.ceil(speed):Math.floor(speed);
     if (odiv.offsetLeft==300){ 
      clearInterval(timer);
     }
     else{
      odiv.style.left=odiv.offsetLeft+speed+"px";
     }
    },30);
     
   }
  </script> 
 </head>  
 <body>
  <input id="button1" type="button" value="开始运动" onclick="startmove()"/>
  <div id="div1">
 </body>
</html>
  • 缓冲运动速度与元素到达目标点的距离成正比，当速度小于一个像素，会停止运动，不能到达目标点，因此通过Math.ceil()或Math.floor()取整。

3.侧边栏

题目描述

通过鼠标移入移出实现侧边栏滑动的隐藏显示

javascript新手小项目 js项目大全_javascript新手小项目_02


javascript新手小项目 js项目大全_ci_03

题目代码

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   #div1 {width:150px;height:200px;background:green;position:absolute;left:-150px}
   #div1 span {position:absolute;width:20px;height:60px;line-height:20px;background: blue;right:-20px;
  ;top:70px}
  </style>
  <script>
   window.onload=function(){
    var odiv=document.getElementById("div1");
    var ospan=document.getElementsByTagName("span")[0];
    ospan.onmouseover=function(){
     startmove(0);
    }
    ospan.onmouseout=function(){
     startmove(-150);
    }
   }
   var timer=null;
   function startmove(target){
    var odiv=document.getElementById("div1");
    var speed=0;
    if (target>odiv.offsetLeft){
     speed=10;
    }
    else
    {
     speed=-10;
    }
    clearInterval(timer);
    timer=setInterval(function(){
    if (Math.abs(odiv.offsetLeft-target)<10){
     clearInterval(timer);
     odiv.style.left=target;
    }
    else{
     odiv.style.left=odiv.offsetLeft+speed+"px";
    }
    },30)    
   }
  </script>
 </head>
 <body>
  <div id="div1">
   <span>分享到</span>
  </div>
 </body>
</html>

4.淡入淡出

题目描述

通过鼠标移入移出实现元素颜色的透明度渐变。

题目代码

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   #div1 {width:200px;height:200px;background-color:red;filter:alpha(opacity:10);opacity:0.1;}
  </style>
  <script>
   window.onload=function(){
    var oDiv=document.getElementById("div1");
    oDiv.onmouseover=function(){
     startmove(100);
    }
    oDiv.onmouseout=function(){
     startmove(30);
    }
   }
   var alpha=30
   var timer=null;
   function startmove(target){
    var oDiv=document.getElementById("div1");
    clearInterval(timer);
    
    timer=setInterval(function(){
     var speed=0;
     if (alpha<target){
      speed=10;
     }
     else{
      speed=-10;
     }
     if (alpha==target){
      clearInterval(timer);
     }
     else{
      alpha+=speed;
      oDiv.style.filter='alpha(opcity:'+alpha+')';
      oDiv.style.opacity=alpha/100;
     }     
    },30)
   }
  </script>
 </head>
 <body>
  <div id="div1"></div>
 </body>
</html>
  • 元素的透明度信息不能直接取得，设置一个变量辅助实现功能。

5.多物体动态宽度变化

题目描述

构建多个div，使得每个div鼠标移入移出均逐渐改变宽度

javascript新手小项目 js项目大全_Math_04


javascript新手小项目 js项目大全_Math_05

题目代码

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   div {width:100px;height:50px;background:red;margin:10px;}
  </style>
  <script>
   window.onload=function(){
    var oDiv=document.getElementsByTagName("div");
    for (var i=0;i<oDiv.length;i++){
     oDiv[i].timer=null;
     oDiv[i].onmouseover=function(){
      startmove(this,300);
     }
     oDiv[i].onmouseout=function(){
      startmove(this,100);
     }
    }
   }
   function startmove(obj,iTarget){
    
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
     var speed=(iTarget-obj.offsetWidth)/6;
     speed=speed>0?Math.ceil(speed):Math.floor(speed);
     if (obj.offsetWidth==iTarget){
      clearInterval(obj.timer);
     }
     else{
      obj.style.width=obj.offsetWidth+speed+"px";
     }
    },30)
   }
  </script>
 </head>
 <body>
  <div></div>
  <div></div>
  <div></div>
 </body>
</html>
  • 多物体类似的运动，可以将不同的部分设置为函数的参数进行传递
  • 定时器也要单独元素单独管理，防止共用定时器带来干扰和问题

6.多物体不同属性动态改变任意值框架

题目描述

设置不同的div，每个div改变的属性不同，如变长、变宽、字体变大、透明度变化等

javascript新手小项目 js项目大全_javascript新手小项目_06

题目代码

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   div {width:100px;height:100px;margin:10px;float:left;background-color:red;font-size:14px;}
   #div4 {filter:alpha(opacity:10);opacity:0.1;};
  </style>
  <script>
   window.onload=function(){
    var oDiv1=document.getElementById("div1");
    var oDiv2=document.getElementById("div2");
    var oDiv3=document.getElementById("div3");
    var oDiv4=document.getElementById("div4");
    oDiv1.onmouseover=function(){
     startmove(this,'height',400);
    }
    oDiv1.onmouseout=function(){
     startmove(this,'height',100);
    }  
    oDiv2.onmouseover=function(){
     startmove(this,'width',400);
    }
    oDiv2.onmouseout=function(){
     startmove(this,'width',100);
    }
    oDiv3.onmouseover=function(){
     startmove(this,'fontSize',40);
    }
    oDiv3.onmouseout=function(){
     startmove(this,'fontSize',14);
    }
    oDiv4.onmouseover=function(){
     startmove(this,'opacity',100);
    }
    oDiv4.onmouseout=function(){
     startmove(this,'opacity',10);
    }
   }
   function getStyle(obj,name){
    if(obj.currentStyle){
     return obi.crrentStyle[name];
    }
    else{
     return getComputedStyle(obj,false)[name];
    }
   }
   function startmove(obj,attr,iTarget){
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
     var cur=0;  
     if (attr=="opacity"){
      cur=Math.round(parseFloat(getStyle(obj,attr))*100);
     }
     else{
      cur=parseInt(getStyle(obj,attr));
     }
     var speed=(iTarget-cur)/6;
     speed=speed>0?Math.ceil(speed):Math.floor(speed);
     if (cur==iTarget){
      clearInterval(obj.timer);
     }
     else{
      if (attr=="opacity"){
       obj.style.filter="alpha(opacity:"+(cur+speed)+")";
       obj.style.opacity=(cur+speed)/100;
      }
      else{
       obj.style[attr]=cur+speed+"px";
      }      
     }
    },30);
   }
  </script>
 </head>
 <body>
  <div id="div1">变高</div>
  <div id="div2">变宽</div>
  <div id="div3">变大</div>
  <div id="div4">透明度</div>
 </body>
</html>
  • 被改变的属性同样可以作为函数的参数传递
  • opacity由于其赋值形式不同，通过ifelse做区分
  • Math.round()帮助去除小数部分，使得结果更加准确（计算机小数位是估计的）