求知 文章 文库 Lib 视频 Code iProcess 课程 认证 咨询 工具 火云堂 讲座吧   成长之路  
会员   
 
追随技术信仰

随时听讲座
每天看新闻
 
 

Javascript教程
Javascript语法
在浏览器启用Javascript
在HTML中配置Javascript
Javascript变量和数据类型
Javascript运算符
Javascript if...else 语句
Javascript Switch Case
Javascript while循环
Javascript for循环
Javascript for...in循环
Javascript循环控制
Javascript函数
Javascript事件
Javascript Cookies
Javascript页面重定向
Javascript对话框
Javascript void关键词
Javascript页面打印
Javascript对象
Javascript Number对象
Javascript Boolean对象
Javascript String对象
Javascript Arrays对象
Javascript Date对象
Javascript Math对象
正则表达式和RegExp对象
Javascript文档处理模型
Javascript错误和异常处理
Javascript表单验证
Javascript动画
 
 

JavaScript动画
26 次浏览
5次  
 捐助

你可以使用JavaScript来创建复杂的动画其中包括但不限于:

1.烟火

2.淡入淡出效果

3.滚入或转出

4.入页面或出页面

5.对象运动

本教程会给一个基本的了解如何使用JavaScript来创建一个动画。

JavaScript可以按照某种模式,由一个逻辑等式或函数来确定移动至若干DOM元素(<IMG/>,<DIV>或任何其他HTML元素)页面各处。

JavaScript提供以下要经常用于动画程序两种功能。

setTimeout( function, duration) - 从现在这个函数调用 duration 毫秒后的 function

setInterval(function, duration) - 每次持续duration 毫秒之后,此函数调用function。

clearTimeout(setTimeout_variable) - 这个函数调用清除任何计时器由setTimeout()函数设置。

JavaScript还可以设置一个数字,包括它在屏幕上的位置DOM对象的属性。可以设置一个对象的顶部和左侧的属性在屏幕上的任何位置。下面是简单的语法:

// Set distance from left edge of the screen.
object.style.left = distance in pixels or points; 

or
// Set distance from top edge of the screen.
object.style.top = distance in pixels or points;  

手动动画:

所以,让我们使用DOM对象的属性和JavaScript函数如下的实现一个简单的动画:

<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> 

下面是上面的例子的说明:

我们使用的是JavaScript函数的getElementById()来获取一个DOM对象,然后将其分配给一个全局变量 imgObj.

我们定义了一个初始化函数的init()来初始化imgObj,我们已经设置它的位置和左属性。

我们调用初始化函数在窗口加载时。

最后,我们调用并将MoveRight()函数由10个像素来增加左边的距离。你也可以将其设置为一个负数值,以将其移动到左侧。

自动动画:

在上面的例子中,如我们所看到的,如何将图像移动到右每点击。可以通过使用JavaScript函数的setTimeout()如下自动完成这一过程:

<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> 

在这里,我们增加更多的情趣。因此,让我们看看新的功能:

并将 MoveRight()函数调用 setTimeout()函数来设置 imgObj 位置。

我们增加了一个新的函数stop()来清除由定时器设定的setTimeout()函数来设置对象在其初始位置。

翻转用鼠标事件:

下面是一个简单的例子,显示图像翻转用鼠标事件:

<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> 

让我们来看看有什么不同的位置:

在加载这个页面,if语句检查图像对象存在的时间。如果图像对象是不可用的,该块将不被执行

Image()构造函数创建并预装名为image1的一个新的图像对象

src属性指定的外部图像文件的名称叫 /images/html.gif

我们已经创建IMAGE2对象,并在这个对象分配/images/http.gif类似的方式

在#(井号)禁用链接,浏览器不会尝试去一个URL点击时。此链接的图像

当用户的鼠标移动到链路,而onmouseout事件处理程序,当用户的鼠标移动远离链路(图像)被触发onMouseOver事件处理程序被触发

当鼠标移动时在图像上,从第一图像到第二个在HTTP图像的变化。当鼠标被从图像移离,则显示原来的图象

当鼠标离开该链接时,初始图像html.gif将重新出现在屏幕上

 


您可以捐助,支持我们的公益事业。

1元 10元 50元





认证码: 验证码,看不清楚?请点击刷新验证码 必填



26 次浏览
5次
 捐助
 


每天2个文档/视频
扫描微信二维码订阅
订阅技术月刊
获得每月300个技术资源
 
 

关于我们 | 联系我们 | 京ICP备10020922号 京公海网安备110108001071号