javascript基础 图片雪碧动画

/** * Created by Administrator on 2017/1/14. */function changePicture() {    //拿到div对象    var gallery = document.getElementById("picture_gallery");    var gallery_img = gallery.getElementsByTagName("img");    var current_gallery_img = gallery_img[0];    current_gallery_img.style.position = "relative";    current_gallery_img.style.top = 0;    current_gallery_img.style.left = 0;    var atag = document.getElementsByTagName("a");    atag[0].onmouseover = function () {        moveElement("default",-100,0,10);    }    atag[1].onmouseover = function () {        moveElement("default",-200,0,10);    }    atag[2].onmouseover = function () {        moveElement("default",-300,0,10); //如果多次鼠标移动 那么会有很多个moveElemnt方法同时执行    }}function moveElement(element_id,final_x,final_y,interval) {    // 检测    if(!document.getElementById) return false;    if(!document.getElementById(element_id)) return false;    // 获取元素并拿出他当前的XY值    var elem = document.getElementById(element_id);    if(elem.formove){        clearTimeout(elem.formove);    }    var elem_current_x = parseInt(elem.style.left);    var elem_current_y = parseInt(elem.style.top);    // 进行判断    if(elem_current_x == final_x && elem_current_y==final_y) return false;    if(elem_current_x < final_x){        elem_current_x++;    }    if(elem_current_x > final_x){        elem_current_x--;    }    if(elem_current_y < final_y){        elem_current_y++;    }    if(elem_current_y > final_y){        elem_current_y--;    }    elem.style.left = elem_current_x + "px";    elem.style.top = elem_current_y + "px";    var repeat = "moveElement('"+element_id+"','"+final_x+"','"+final_y+"','"+interval+"')";    elem.formove = setTimeout(repeat,interval);}

有很多需要注意的地方
1.

 atag[0].onmouseover = function () {        moveElement("default",-100,0,10);    }    atag[1].onmouseover = function () {        moveElement("default",-200,0,10);    }    atag[2].onmouseover = function () {        moveElement("default",-300,0,10); //如果多次鼠标移动 那么会有很多个moveElemnt方法同时执行

这里最好别用for循环 因为雪碧图的x轴移动非常明确 用for并没有什么好处

2.

if(elem.formove){        clearTimeout(elem.formove);    }

这里有一个判断语句 因为你鼠标移动会生成很多的 move方法 如果有一个线程已经出现了 那么就取消之前的线程 同一时间下只有一条在执行

这里有个重要逻辑问题
首先 你的if探测语句必须得在函数运行的前面 这样才能在运行前进行一个复位

然后 clearTimeout是不支持局部变量的 他是无法取消的

所以 你得写在前面并且使用全局变量

但是 if(全局变量) 这是无法探测的 直接报错 没有返回值 所以你得把之前timeout的返回值放在 elem.属性里面 这样他是有返回值的 探测到为true 否则为flase

这种给某个元素增加属性是被JS所支持的 并且专属与这个元素
但要注意只能给获取到的元素对象添加属性 你给一个普通的局部变量肯定是不行的