javascript实现动画

旧城等待， 2022-08-21 01:11 136阅读 0赞

1.  位置：static fixed relative absolure  
    Static 是默认值
2.  setTimeout(“function”,interval) 经过预定的一段时间后执行  
    第一个参数是函数的名字，第二个参数是设定的时间

//位置移动 每5秒改变一次
    function positionMessage(){ 
        if(!document.getElementById) return false;
        if(!document.getElemenyById("message"))  return false;
        var elem=document.getElementById("message");
        elem.style.position="absolute";
        elem.style.left="50px";
        elem.style.top="100px";
        movement=setTimeout("moveMessage()",5000);//5秒改变一次位置
    
        }// JavaScript Document
        //每次位置的改变情况
        function moveMessage(){ 
                if(!document.getElementById) return false;
                if(!document.getElemenyById("message"))  return false;
                var elem=document.getElementById("message");
                elem.style.left="200px";
            }
    
    //取消位置的移动
      clearTimeout(movement);

1.  parseInt 将字符串转化为整数
2.  设置目标渐进的移动

//设置目标渐进的移动 移动到目标位置停止
     function moveMessage(){ 
         if (!document.getElementById) return false;
         if(!document.getElementById("message"))  return false;
         var elem=document.getElementById("message");
         var xpos=parseInt(elem.style.left);//将字符串转化为整数值
         var ypos=parseInt(elem.style.top);
         if(xpos==200&&ypos==100){
             return true;
             }
             if(xpos<200)
             {xpos++;}
              if(xpos>200)
             {xpos--;}
              if(ypos<100)
             {ypos++;}
              if(ypos>100)
              {ypos--;}
              elem.style.left=xpos+"px";
              elem.style.top=ypos+"px";
              movement=setTimeout("message()",10);
         }

1.  隐藏预览图片的绝大部分，鼠标悬停在某个链接的上方时，只显示图片的一部分  
    css中overflow用来显示图像的一部分，发生溢出时，对图像进行裁剪，效果是一部分在窗口中可见  
    overflow属性可取值有4种，visible, hidden,scroll,auto  
    visible:不裁剪溢出的内容，溢出的内容仍然显示在显示区域以外的地方  
    hidden：裁剪溢出的内容，内容只显示在显示区域里，一部分内容在浏览器窗口是可见的  
    scroll：对溢出的内容进行裁剪，但是会显示滚动条以便让永华看到内容的其他部分  
    auto:浏览器真的发生内容溢出时才显示滚动条，没有溢出，就不显示滚动条  
    6．当鼠标移动到相应的文字，显示图片相应的一部分

//显示一个400*400图像的一部分 100*100
    <div id="slideshow"><img src="1.gif" alt="building blocks of web design" id="preview" /></div>
    
    
    //css
    #slidshow{
        width:100px;
        height:100px;
        position:relative;
        overflow:hidden;
        }
    //javascript 实现图片移动 以显示不同的部分
    function prepareSlideshow(){
        if(!document.getElemensByTagName)  return false;
        if(!document.getElementById) return false;
        if(!document.getElementById("preview')) return false; var preview=document.getElementById("preview');
        preview.style.position="absolute";
        preview.style.left="0px";
        preview.style.top="0px";
        var list=document.getElementById("linklist");
        var lists=list.getElementsByTagName("a");
        links[0].onmoseover=function(){
            moveElement("preview",-100,0,10);
            links[1].onmoseover=function(){
            moveElement("preview",-200,0,10);
            links[2].onmoseover=function(){
            moveElement("preview",-300,0,10);
    
            }
    
        }

问题：每当用户把鼠标指针悬停在某个链接上，不管上一次条用是否已经把图片移动到位，moveElement()函数都会被再次调用并试图把同一个元素移动到林给一个地方，如果鼠标速度足够快，就会导致动画效果滞后  
解决方法：clearTimeout(movement);

//改进 moveMessage
    if (elem.movement){
        clearTimeout(elem.movement);    //不论哪个元素移动，该元素都有一个movement的属性，如果该元素已经开始执行已经有了一个
        }                               //移动的属性，可以使用clearTimeout()函数对它进行复位

1.  Math.ceil(number) number向上取整