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所支持的并且专属与这个元素
但要注意只能给获取到的元素对象添加属性你给一个普通的局部变量肯定是不行的

javascript基础图片雪碧动画相关推荐

动画版雪碧_雪碧动画：吸血鬼凯蒂的生活
动画版雪碧我一直很喜欢网页游戏: 它们只是制作有趣,易于编码(大多数情况下),并且当用户只需要单击一个链接即可开始玩游戏时,游戏的可访问性就非常不错. Ajax和移动的dom元素带来了一些乐趣,但是 ...
雪碧动画：吸血鬼凯蒂的生活
我一直很喜欢网页游戏: 它们只是制作有趣,易于编码(大多数情况下),并且当用户只需要单击一个链接即可开始玩游戏时,游戏的可访问性就非常不错. Ajax和移动的dom元素带来了一些乐趣,但是限制了您可以 ...
动画版雪碧_雪碧动画：老板凯蒂
动画版雪碧这是从Sprite Animations:Vampire Kitty Lives开始的教程的延续. 那篇文章以承诺我们会有所改进而结束. requestAnimFrame setTimeo ...
雪碧图游戏开发_Android游戏开发–雪碧动画
雪碧图游戏开发如果到目前为止您仍然关注该系列 ,我们将在处理触摸,显示图像和移动它们方面广为人知. 但是,动态图像看起来很呆板,因为它看起来确实是假的和业余的. 为了给角色一些生活,我们将需要做更 ...
javascript实现图片左右移动动画
图片的左右移动,具备像荡秋千一样的动画效果,图片自己可重新定义,移动速度和距离也可在代码内设定,挺简单的Js生成动画的特效代码,仅供参考. <!DOCTYPE html> <html ...
Android游戏开发–雪碧动画
如果到目前为止您仍然关注该系列,我们将在处理触摸,显示图像和移动它们方面广为人知. 但是,动态图像看起来很呆板,因为它看起来确实是假的和业余的. 为了给角色一些生活,我们将需要做更多的事情. 这就是动 ...
前端基础入门之背景background-image 、雪碧图与渐变
文章目录背景 1. PS 的基本设置 2. 背景练习 1:线性渐变效果的背景图练习 2:按钮点击效果雪碧图与渐变 3. 雪碧图 4. 线性渐变 5. 径向渐变背景 1. PS 的基本设置工 ...
雪碧图 css 使用方式与 Js使用方式
效果链接示例雪碧图如下,雪碧图图片资源来源于力扣官网中头像悬浮Dark Side功能. 雪碧图分析:该雪碧图横向为12等分,高度32px 1. JavaScript方式使用雪碧图(猜测力扣使用的方式 ...
Web前端之背景、雪碧图
目录一.背景二.雪碧图一.背景 background-color 设置背景颜色 background-image 设置背景图片如果背景图片大小小于元素,则背景图片会自动在元素中平铺将元素铺满 ...

javascript基础图片雪碧动画

javascript基础图片雪碧动画相关推荐

最新文章

热门文章

javascript基础 图片雪碧动画

javascript基础 图片雪碧动画相关推荐

最新文章

热门文章

javascript基础图片雪碧动画

javascript基础图片雪碧动画相关推荐