前言
总算是写完了基础类型篇的内容。这次咱们来聊一聊动画。
闲话就不多扯了,直接开始正文。
正文
一、基础概念
JavaScript中,我们可以依赖内部提供的动画函数,去移动DOM元素(<img />,<div>或任何其他HTML元素)。
JavaScript提供了以下两个在动画中经常使用的函数。
- setTimeout(function,duration) - 此函数从现在起持续几毫秒后调用函数。
- setInterval(function,duration) - 该函数在每个持续时间毫秒后调用函数。
- clearTimeout(setTimeout_variable) - 此函数调用清除setTimeout()函数设置的任何计时器。
JavaScript还可以设置DOM对象的许多属性,包括它在屏幕上的位置。我们也可以设置对象的顶部和左侧属性,以将其放置在屏幕上的任何位置:
二、Manual Animation
接下来,让我们使用DOM对象属性和JavaScript函数实现一个简单的动画,上代码:
代码很简单,这里简单解释一下,当然能看懂的朋友,可以跳过啦:
- 我们使用JavaScript函数getElementById()来获取DOM对象,然后将其分配给全局变量imgObj。
- 我们已经定义了一个初始化函数init()来初始化imgObj,我们已经设置了它的位置和左边的属性。
- 我们在窗口加载时调用初始化函数。
- 最后,我们调用moveRight()函数将左边距离增加10个像素。也可以将其设置为负值,将其移动到左侧。
PS:供复制的代码,但是请注意,图片资源需要调整一下
<html> <head> <title>JavaScript Animation</title> <script type = "text/javascript"> var imgObj = null; function init() { imgObj = document.getElementById('myImage'); imgObj.style.position= 'relative'; imgObj.style.left = '0px'; } function moveRight() { imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px'; } window.onload = init; </script> </head> <body> <form> <img id = "myImage" src = "/images/html.gif" /> <p>Click button below to move the image to right</p> <input type = "button" value = "Click Me" onclick = "moveRight();" /> </form> </body> </html>
三、Automated Animation
在上面的demo中,我们看到了每次单击时图像如何向右移动(PS:运行起来的效果)。
接下来我们使用JavaScript的setTimeout()来自动执行此过程,看代码:
同样,简单的解释一番(大佬略过~):
- 所述MoveRight的()函数是调用的setTimeout()函数来设置的位置imgObj。
- 我们添加了一个新函数stop()来清除setTimeout()函数设置的定时器,并将对象设置在其初始位置。
PS:供复制的代码,但是请注意,图片资源需要调整一下
<html> <head> <title>JavaScript Animation</title> <script type = "text/javascript"> var imgObj = null; var animate ; function init() { imgObj = document.getElementById('myImage'); imgObj.style.position= 'relative'; imgObj.style.left = '0px'; } function moveRight() { imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px'; animate = setTimeout(moveRight,20); // call moveRight in 20msec } function stop() { clearTimeout(animate); imgObj.style.left = '0px'; } window.onload = init; </script> </head> <body> <form> <img id = "myImage" src = "/images/html.gif" /> <p>Click the buttons below to handle animation</p> <input type = "button" value = "Start" onclick = "moveRight();" /> <input type = "button" value = "Stop" onclick = "stop();" /> </form> </body> </html>
三、鼠标滑过
这是一个很常见的效果,就是鼠标滑入某个元素,然后做动画。上代码:
再解释一波(同样大佬略过):
- 在加载此页面时,“if”语句检查图像对象是否存在。如果图像对象不可用,则不会执行此块。
- Image()构造函数创建并预加载称为新的图像对象image1的。
- 为src属性分配名为/images/html.gif的外部图像文件的名称。
- 同样,我们在此对象中创建了image2对象并分配了/images/http.gif。
- #(哈希标记)禁用链接,以便浏览器在单击时不会尝试转到URL。此链接是图像。
- 所述的onMouseOver当用户的鼠标移动到链路,而触发事件处理程序的onMouseOut事件处理程序,当用户的鼠标从链路(图像)移开被触发。
- 当鼠标在图像上移动时,图像从第一个图像变为第二个图像。当鼠标远离图像时,将显示原始图像。
- 当鼠标远离链接时,初始图像html.gif将重新出现在屏幕上。
PS:供复制的代码,但是请注意,图片资源需要调整一下
<html> <head> <title>Rollover with a Mouse Events</title> <script type = "text/javascript"> if(document.images) { var image1 = new Image(); // Preload an image image1.src = "/images/html.gif"; var image2 = new Image(); // Preload second image image2.src = "/images/http.gif"; } </script> </head> <body> <p>Move your mouse over the image to see the result</p> <a href = "#" onMouseOver = "document.myImage.src = image2.src;" onMouseOut = "document.myImage.src = image1.src;"> <img name = "myImage" src = "/images/html.gif" /> </a> </body> </html>
尾声
关于动画篇的内容,到此就结束了。边翻译边总结还真有点强行杂糅到一起的感觉。可能还是自己功力不足吧。
希望以后的文章可以,更丝滑一些,哈哈~