JavaScript 动态网页实例 —— 图像运动与事件

最新推荐文章于 2024-07-02 07:14:18 发布

迎风的信号旗

最新推荐文章于 2024-07-02 07:14:18 发布

阅读量893

点赞数 20

分类专栏： JavaScript 前端文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/cccloveforever/article/details/139031453

版权

本文详细介绍了JavaScript在动态网页中的图像事件处理，包括图像拖动、按钮控制图像显示、图像感应鼠标、花环效果、流星效果等。通过实例代码解析了如何实现图像的运动和响应用户交互，涵盖了JavaScript中onmouseMove、onclick等事件及Math对象的运用，展示了丰富的视觉效果和交互体验。

摘要由CSDN通过智能技术生成

除图像显示外，图像运动和对事件的响应也是常见的图像效果。本章介绍图像的运动与图像对事件的响应。其中，图像事件包括:图像的拖动、按钮控制图像的显示、图像感应鼠标等;图像运动包括:图像的滑动、图像的花环效果、图像的流星效果、图像的逐渐变大、图像分块飞行和图像分条飞行。其中，花环效果和流星效果代码中并不包含图像，但缤纷多彩，可给人图像的视觉效果，因此，也在本章进行介绍。

图像拖动

本节给出一段图像拖动的示例代码，运行该程序后，页面出现两幅图像，使用鼠标拖动其中的一幅图像，可以将其在窗口中拖动。

要点

本节代码主要使用了onmouseMove事件和event.button属性，主要功能和用法如下。

当鼠标移动过页面上某个元素时，onmouseMove 事件会被触发。该事件可以调用相应的函数，作为其事件处理函数。函数中的内容可以是任意合法的JavaScript代码。
event.button 属性表示鼠标按键。取值为1时表示鼠标左键，取值为2时表示鼠标右键。可以使用“event.button--1”或“event.button-2”判断鼠标的哪个按键被按下。

<script language="JavaScript">
<!--
function moveImage()
{
if(window.event.button!=1){
return;
}
with(window.event.srcElement.style){
//重新设置图像在浏览器中的位置（x、y的坐标）
pixelLeft=window.event.x-236/2-document.all.ImageDiv.offsetLeft;
pixelTop=window.event.y-118/2-document.all.ImageDiv.offsetTop;
}
window.event.returnValue=false;  //取消系统拖动事件
}
//-->
</script>

分析

(1)程序首先建立了一个<div>，其中包含两个<img>元素。第二个<img>元素增加了onmouseMove事件，该事件调用函数moveImage()，实现对图像的移动。
(2)函数moveImage()的功能是响应onmouseMove 事件，对图像进行移动。在函数中首先使用一个if语句对用户的按键进行判断，如果按下的不是鼠标左键，则不会作出响应。随后，使用一个 with语句，重新设置图像在浏览器中的位置(x、y的坐标)。
(3)函数的最后，使用“window.event.returnValue=false;”将事件的返回值置为false，从而取消该事件。

按钮控制

本节给出一段按钮控制图像的示例代码。运行该程序后，页面出现两幅图像，使用鼠标拖动其中的一幅图像，可以将其在窗口中拖动。

要点

本节代码主要使用了onclick事件和image对象的src属性，主要功能和用法如下。

当鼠标左键单击页面上的某个元素时，onclick事件会被触发。该事件可以调用相应的函数，作为其事件处理函数。函数中的内容可以是任意合法的JavaScript代码。onclick是最常用的事件，可应用于大部分可显示元素，在正中还可应用于<applet>和<font>元素。
将一幅图像的名称赋值给image 对象的 src 属性，图像就会被载入到该对象中，因此,可以使用 image 对象来缓存图像，也就是不将该图像下载到屏幕上，而是在需要时可以将其立即显示出来。使用这种方法，可以在 Web 页面中带有图像时节省很多下载时间。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>图像演示</title>
</head>
<body>
<center>
<form name="form1">
<img name="img1" border="0" src="图像拖动2.jpg" width="295" height="224">
<br><br>
<!--通过将按钮的onclick事件绑定在ChangeImage()函数上实现图像变换-->
<input type=button value="改变图像" onclick="ChangeImage()">
</form>
</center>
</body>
<script language=javascript>
<!--
function ChangeImage()
{

document.form1.img1.src="图像拖动1.jpg";  //通过name引用图像的src属性

}
//-->
</script>
</html>

分析

(1)程序建立了一个名为form1的<form>表单，其中包含一幅名为imgl 的图像，以及一个值为“改变图像”的按钮，并为按钮添加onclick事件，该事件调用Changelmage( )函数,完成图像的替换。
(2)函数Changelmage()非常简单，其功能是改变要显示的图像。通过为“document.form1.imgl.src”重新赋值实现。

感应鼠标

本节给出一段感应鼠标的示例代码，当鼠标移动到图像上时，图像发生变化;当鼠标离开图像时，图像再次发生变化。

要点

本节代码主要使用了onmouseover事件和onmouseout事件，其主要功能和用法如下。

HTML 支持对绝大多数元素进行事件绑定，这些绑定通常作为元素的属性使用，例如onclick与 onmouseover，可以使用等号与 JavaScript 进行连接。当与之绑定的对象有事件发生时，就会执行相应的JavaScript代码。
onmouseover 事件，当鼠标移动过某个元素时被触发。可应用于大部分可显示元素，在中还有<applet>、<font>，在Netscape Navigator 中还有<ilayer>、<layer>。
onmouseout事件，当鼠标移开某个元素(鼠标已不在元素上方)时被触发。可应用于大部分可显示元素，在正中还有<applet>、<font>，在NetscapeNavigator中还有<ilayer>、<layer>。

<script type="text/javascript">
<!--
function preloadImage(url)
{   // 预载图像：URL
  var i = new Image();
  i.src = url;
  return i;
}
if (document.images)
{  // 预载图像：name
  var homeon = preloadImage("感应鼠标2.jpg");
  var homeoff = preloadImage("感应鼠标3.jpg");
  var productson = preloadImage("感应鼠标1.jpg");
  var productsoff = preloadImage("感应鼠标4.jpg");
}
function mouseOn(imgName)
{
  if (document.images)
    document[imgName].src = eval(imgName + "on.src");//鼠标指向时替换图像
}
function mouseOff(imgName)
{
  if (document.images)
    document[imgName].src = eval(imgName + "off.src"); //鼠标离开时再次替换
}
//-->
</script>

分析

(1)程序首先建立了两个超级链接，并分别为其添加onmouseover事件(调用mouseOn()函数)和onmouseout事件(调用mouseO()函数)。两个超级链接中分别加入一幅图像，也就是最初载入的图像。
(2)函数 mouseOn(imgName)和函数 mouseOf(imgName)完成新图像的载入。分别通过将该图像的 src 属性设置为新的图像实现。

花环效果

本节给出一段花环效果的示例代码。运行该程序后，页面出现一个转动的花环，该花环一边转动，一边在页面内漂移。

要点

本节代码主要使用了 Math 对象的sin(n)方法和cos(n)方法、Style 对象的 glow 属性、Window对象的setTimeout()方法，主要功能和用法如下。

Math 对象用于进行属性运算。其属性是数学中一些常见的常数值。在 Math 对象的方法中，除了 random()之外的所有方法都需要一个或几个参数。典型的是三角函数在作为一个参数的值上进行操作，其他参数决定传递的参数中哪一个是最大值或最小值。
Math.sin(n)方法和 Math.cos(n)方法用于产生n的正弦值和余弦值。其中的参数n为弧度值。
Style 对象的 glow 属性用于为环绕对象内容边缘添加辉光制作发热效果，辉光将出现在对象边界内的内容的最外轮廓之外。假如对象内有文本而无背景和图片，则每个文本字符将会被辉光环绕;假如对象内有背景或图片，则整个对象容器会被辉光环绕;假如对象的子对象定位超出了对象边界，则仅仅在对象容器内的内容会被辉光环绕。
Window对象支持一些设置计时器的方法,用于执行特定函数。这些方法包括setTimeout()和clearTimeout( )。
setTimeout()方法的功能是设置一个超时，以便在将来的某个时间触发某段代码的运行。基本语法是“timerld=setTimeout(要执行的代码,以毫秒为单位的时间);”。其中,“要执行的代码”可以是一个函数，也可以是其他 JavaScript语句;“以毫秒为单位的时间”指代码执行前需要等待的时间，即超时时间。
可以在超时事件未执行前中止该超时设置，使用Window 对象的 clearTimeout()方法实现。其语法为“clearTimeout(timerld)”。