运动的封装+调用案例（摘）

最新推荐文章于 2024-09-14 17:34:00 发布

weixin_30730053

最新推荐文章于 2024-09-14 17:34:00 发布

阅读量96

点赞数

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/hilxj/p/10504610.html

版权

 
运动函数：
 
    // JavaScript Document 
   
    function 
    startMove( 
    obj, 
    json, 
    endFn){ 
   
    clearInterval( 
    obj. 
    timer); 
   
    obj. 
    timer = 
    setInterval( 
    function(){ 
   
    var 
    bBtn = 
    true; 
   
    for( 
    var 
    attr 
    in 
    json){ 
   
    var 
    iCur = 
    0; 
   
    if( 
    attr == 
    'opacity'){ 
   
    if( 
    Math. 
    round( 
    parseFloat( 
    getStyle( 
    obj, 
    attr))* 
    100)== 
    0){ 
   
    iCur = 
    Math. 
    round( 
    parseFloat( 
    getStyle( 
    obj, 
    attr))* 
    100); 
   
                         } 
   
    else{ 
   
    iCur = 
    Math. 
    round( 
    parseFloat( 
    getStyle( 
    obj, 
    attr))* 
    100) || 
    100; 
   
                         }    
   
                     } 
   
    else{ 
   
    iCur = 
    parseInt( 
    getStyle( 
    obj, 
    attr)) || 
    0; 
   
                     } 
   
    var 
    iSpeed = ( 
    json[ 
    attr] - 
    iCur)/ 
    20; 
   
    iSpeed = 
    iSpeed > 
    0 ? 
    Math. 
    ceil( 
    iSpeed) : 
    Math. 
    floor( 
    iSpeed); 
   
    if( 
    iCur!= 
    json[ 
    attr]){ 
   
    bBtn = 
    false; 
   
                     } 
   
    if( 
    attr == 
    'opacity'){ 
   
    obj. 
    style. 
    filter = 
    'alpha(opacity=' +( 
    iCur + 
    iSpeed)+ 
    ')'; 
   
    obj. 
    style. 
    opacity = ( 
    iCur + 
    iSpeed)/ 
    100; 
   
                     } 
   
    else{ 
   
    obj. 
    style[ 
    attr] = 
    iCur + 
    iSpeed + 
    'px'; 
   
                     } 
   
                 } 
   
    if( 
    bBtn){ 
   
    clearInterval( 
    obj. 
    timer); 
   
    if( 
    endFn){ 
   
    endFn. 
    call( 
    obj); 
   
                     } 
   
                 } 
   
             }, 
    30); 
   
         } 
   
    function 
    getStyle( 
    obj, 
    attr){ 
   
    if( 
    obj. 
    currentStyle){ 
   
    return 
    obj. 
    currentStyle[ 
    attr]; 
   
             } 
   
    else{ 
   
    return 
    getComputedStyle( 
    obj, 
    false)[ 
    attr]; 
   
             } 
   
         } 
   
 测试案例：
 
    <!DOCTYPE html 
    > 
   
    < 
    html 
    lang= 
    "en" 
    > 
   
    < 
    head 
    > 
   
    < 
    meta 
    charset= 
    "UTF-8" 
    > 
   
    < 
    meta 
    name= 
    "viewport" 
    content= 
    "width=device-width, initial-scale=1.0" 
    > 
   
    < 
    meta 
    http-equiv= 
    "X-UA-Compatible" 
    content= 
    "ie=edge" 
    > 
   
    < 
    title 
    >放大 
    </ 
    title 
    > 
   
    < 
    script 
    src= 
    "move.js" 
    > 
    < 
    / 
    script 
    > 
   
    < 
    style 
    > 
   
    *{ 
    margin: 
    0; 
    padding: 
    0} 
   
    #div1{ 
    width: 
    100px; 
    height: 
    100px; 
    background: 
    #ddd; 
    position: 
    relative; 
    top: 
    200px; 
    left: 
    200px;} 
   
    < 
    / 
    style 
    > 
   
    </ 
    head 
    > 
   
    < 
    body 
    > 
   
    < 
    div 
    id= 
    "div1" 
    ></ 
    div 
    > 
   
    < 
    script 
    > 
   
    var 
    div1= 
    document. 
    getElementById( 
    "div1"); 
   
    div1. 
    onmouseover= 
    function(){ 
   
    startMove( 
    this,{ 
    width: 
    200, 
    height: 
    200, 
    left: 
    150, 
    top: 
    150}) 
   
     } 
   
    div1. 
    onmouseout= 
    function(){ 
   
    startMove( 
    this,{ 
    width: 
    100, 
    height: 
    100, 
    left: 
    200, 
    top: 
    200}) 
   
     } 
   
    < 
    / 
    script 
    > 
   
    </ 
    body 
    > 
   
    </ 
    html 
    >