• 运动框架


    这两天在慕课网学习了一门课程即Js动画效果,循序渐进的做一个运动框架。可以实现多物体的同时运动,链式运动。

    运动框架  move.js

     1         //startMove(obj,{attr1:itarget1,attr2:itarget2},fn)
     2         function startMove(obj,json,fn){
     3             
     4             clearInterval(obj.timer)
     5             obj.timer = setInterval(function(){
     6                 var flag = true;//假设所有都到达目标值
     7                 for(var attr in json){
     8 
     9                 //取当前值
    10                 var icur = 0;
    11                 if(attr == 'opacity'){
    12                     icur = Math.round(parseFloat(getStyle(obj,attr)) * 100 );
    13                 }
    14                 else{
    15                      icur = parseInt(getStyle(obj,attr));
    16                 }
    17 
    18                 //定义速度
    19                 var speed = (json[attr] - icur)/8;
    20                 speed = speed > 0?Math.ceil(speed):Math.floor(speed);
    21 
    22                 //判断是否停止
    23                 if(json[attr] != icur){
    24                     flag = false;
    25                 }
    26                 if(attr == 'opacity'){
    27                     obj.style.filter = 'alpha(opacity:'+(icur + speed)+')';
    28                     obj.style.opacity = (icur + speed)/100;
    29                 }
    30                 else{
    31                     obj.style[attr] = icur + speed + 'px';
    32                 }
    33                 }//json for-in
    34 
    35                 //在所有属性都到达目标值后,判断是否有回调函数(链式动画)
    36                 if(flag){
    37                     clearInterval(obj.timer);
    38                     if(fn){
    39                         fn();
    40                     };
    41                 }
    42             },30)
    43         }
    44 
    45         function getStyle(obj,attr){//解决加了边框之后bug
    46             if(obj.currentStyle){
    47                 return obj,currentStyle[attr];
    48             }
    49             else{
    50                 return getComputedStyle(obj,false)[attr];
    51             }
    52         }

    引用move.js的格式

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>jsonmove</title>
     6     <style>
     7         body,ul,li{
     8             margin:0;
     9             padding:0;
    10         }
    11         ul #li1{
    12             200px;
    13             height: 100px;
    14             background-color: yellow;
    15             border: 4px solid #000;
    16             filter:alpha(opacity:30);
    17             opacity:0.3;
    18             position: absolute;
    19             top:10px;
    20             left:10px;
    21             list-style-type: none;
    22         }    
    23         ul #li2{
    24             200px;
    25             height: 100px;
    26             background-color: yellow;
    27             border: 4px solid #000;
    28             filter:alpha(opacity:30);
    29             opacity:0.3;
    30             position: absolute;
    31             top:250px;
    32             left:10px;
    33             list-style-type: none;
    34         }
    35     </style>
    36     <script src="move.js"></script>
    37 </head>
    38 <body>
    39     <ul>
    40         <li id="li1"></li>
    41         <li id="li2"></li>
    42     </ul>
    43     <script>
    44     window.onload = function(){
    45         
    46         //同时运动
    47         var oLi = document.getElementById('li1');
    48 
    49         oLi.onmouseenter = function(){
    50             startMove(oLi,{400,height:200,opacity:100,top:20,left:20});
    51         }
    52         oLi.onmouseout = function(){
    53             startMove(oLi,{200,height:100,opacity:30,top:10,left:20});
    54         }
    55 
    56         //链式运动
    57         var oLi2 = document.getElementById('li2');
    58 
    59         oLi2.onmouseenter = function(){
    60             startMove(oLi2,{400},function(){
    61                 startMove(oLi2,{height:200},function(){
    62                     startMove(oLi2,{opacity:100},function(){
    63                         startMove(oLi2,{top:250},function(){
    64                             startMove(oLi2,{left:20})
    65                         })
    66                     })
    67                 });
    68             });
    69         }
    70 
    71         oLi2.onmouseout = function(){
    72             startMove(oLi2,{left:20},function(){
    73                 startMove(oLi2,{top:250},function(){
    74                     startMove(oLi2,{opacity:30},function(){
    75                         startMove(oLi2,{height:100},function(){
    76                             startMove(oLi2,{200})
    77                         })
    78                     })
    79                 });
    80             });
    81         }
    82     }
    83     </script>
    84 </body>
    85 </html>

    慕课网JS动画效果-http://www.imooc.com/learn/167

    代码演示地址:http://runjs.cn/detail/2jhz4bmc

    不要在该奋斗的年纪而选择了安逸
  • 相关阅读:
    常用git指令操作
    eclipse中常用快捷键整理
    Java Dom解析xml文件
    Spring IOC的注入方式
    Spring framework bean的作用域,生命周期
    android中的bundle使用
    python ftplib模块
    python requests用法总结
    限制字符串 剔除费需要字符然后将多余空格删除
    MFC Edit Control 编辑控件 属性和API
  • 原文地址:https://www.cnblogs.com/qqandfqr/p/5741939.html
Copyright © 2020-2023  润新知