程序运行效果如下:
该效果在鼠标滑过字体时触发。
下面是实现该效果的JavaScript程序:
<script type="text/javascript">
window.οnlοad=prepare;
function prepare(){
var elementp=document.getElementById('p1');
p1.ex=50;
p1.ey=50;
elementp.οnmοuseοver=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>