滑动效果

程序运行效果如下：

该效果在鼠标滑过字体时触发。

下面是实现该效果的JavaScript程序：

<script type="text/javascript">
        window.onload=prepare;
   function prepare(){
      var elementp=document.getElementById('p1');
      p1.ex=50;
      p1.ey=50;
     


        elementp.onmouseover=function(){
               
    moveElement('p1',p1.ex,p1.ey,10);
    p1.ex+=50;
    p1.ey+=50;
    }


   }
function moveElement(eleId,ele_x,ele_y,interval){
if(!document.getElementById) return false;//对象监测
if(!document.getElementById(eleId)) return false;
var elem=document.getElementById(eleId);
if(elem.movement){
clearTimeout(repeat);/*清除当前排队函数 即移动效果 避免当再次将鼠标滑过后 导致滑动效果事件的累积 最后导致程序的效果的混乱 */
}
var x=parseInt(elem.style.left);//通过style.left style.top得到位置属性 用parseInt将字符转成数字
var y=parseInt(elem.style.top);
if(!elem.style.left){
elem.style.left=0+'px';
}
if(!elem.style.top){
elem.style.top=0+'px';
}
              if(x==ele_x&&y==ele_y){
                return true;//如果当前位置和目标位置一致 则不进行滑动效果
}
if(x>ele_x){//Math.ceil()函数执行向上取整计算 (x-ele_x)/10能够有一个缓慢的滑动过渡 而不是立刻执行
var dist=Math.ceil((x-ele_x)/10);
                x=x-dist;
               
            
}
if(x<ele_x){
var dist=Math.ceil((ele_x-x)/10);
x=x+dist;

}
if(y>ele_y){
var dist=Math.ceil((y-ele_y)/10);
y=y-dist;
              
}
if(y<ele_y){
var dist=Math.ceil((ele_y-y)/10);
y=ele_y+y;

}
elem.style.left=x+'px';//最后得到的x,y是目标位置 但是是数字 而不是字符 所以要加上'px' 进行转化
elem.style.top=y+'px';
repeat="moveElement('"+eleId+"',"+ele_x+","+ele_y+","+interval+")";
elem.movement=setTimeout(repeat);

}
</script>