javascript编程起步(第五课)

鼠标事件(上)

随着课程的进行,能跟着下来的人是越来越少了,不知道是不是因为没有太多的表现,只是死记的东西,大家都没有兴趣啊。其实网页上

的很多特效,动作大都是用javascript来实现的,没有javascript的网页,就象一个人没有了肌肉一样。但是所有的动作都是有函数来控制的

,而控制语句是基础中的基础。希望大家能耐心的学下去。今天的课程就轻松一下,学习点能见到效果的。
主要内容就是基于鼠标的事件,有如下几种:
1.mouseover(鼠标移至)
2.mouseout(鼠标移出)
3.mousemove(鼠标移动)
4.mousedown(鼠标按下)
5.mouseup(鼠标弹起)
6.click(单击)
7.dblclick(双击)

通常1和2组合起来使用,当用户把鼠标移动到一个超链接或者其他元素时,mouseover事件就会发生,mouseout总会伴随着它,因为当鼠标

离开时,mouseout事件就会发生。
  例子:
<html>
<head>
<title>test</title>
<script language="javascript">
function text_onmouseover(){
mytext.style.fontSize="30pt";
mytext.style.color="red";
mytext.style.fontStyle="italic";
}
function text_onmouseout(){
mytext.style.fontSize="20pt";
mytext.style.color="blue";
mytext.style.fontStyle="normal";
}
</script>
</head>
<body>
<p id=mytext onmouseover="text_onmouseover()" onmouseout="text_onmouseout()">http://www.javascript.com.cn</p>
<p>看看字体样式有什么变化</p>
</body>
</html>

这里定义了两个函数,来使字体改变样式。关于函数我们以后会详细的讲解。
(注意:ie对页面上的所有元素都支持mouseover和mouseout事件,但对于netscape navigator来说,只有超链接和层支持这两个事件。)

下面看鼠标移动的例子:
<html>
<body onMousemove="micro$oftMouseMove()">
<SCRIPT LANGUAGE="JavaScript">
if (navigator.appName == 'Netscape')
{
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = netscapeMouseMove;
}

function netscapeMouseMove(e) {
if (e.screenX != document.test.x.value && e.screenY != document.test.y.value)
{
document.test.x.value = e.screenX;
document.test.y.value = e.screenY;

}

function micro$oftMouseMove() {
if (window.event.x != document.test.x.value && window.event.y != document.test.y.value)
{
document.test.x.value = window.event.x;
document.test.y.value = window.event.y;
}
}
</SCRIPT>
<FORM NAME="test">
X: <INPUT TYPE="TEXT" NAME="x" SIZE="4"> Y: <INPUT 
TYPUE="TEXT" NAME="y" SIZE="4">
</FORM>
</body>
</html>
鼠标移动的事件在鼠标跟随效果的使用上比较多,大家可以看看鼠标跟随特效。网上n多。
(需要注意的是:启动这个事件处理过程存在一个问题,就是它有可能会屏蔽其他事件。另外还增加了页面的处理时间,应尽量少用。)

先说到这儿吧,下节讲鼠标的另外4个事件。

今天的作业是:
1.图片链接的转换(当鼠标放上去时是一个图片,当鼠标离开时是另外一个图片)
2.图片跟随鼠标(当鼠标移动时,会有个图片跟随着鼠标一起移动)

(0)

相关推荐

  • javascript编程起步(第一课)

    不管你以前学没有学过java script,本教程都能带您进入java script的殿堂,领悟java script的魅力.   大家来到这里,都是java script的爱好者,对java script都多多少少有一定的理解.关于java script的历史等就不做介绍了,我们直接来学习它,用它.   也许大部分人都认为java script是在客户端运行的,其实不然.java script有两种不同的运行环境,一个是在服务器端的javascript,另一个就是客户端的javascript了

  • javascript编程起步(第二课)

    关于上课的作业,大家都知道,代码如下: <script language="javascript"> <!-- 代码 //--> </script> 这儿补充一点内容,还可以告诉读者这儿是javascript代码,该浏览器不支持. <noscript> 在浏览器不支持的时候显示这句话 </noscript> 今天我们主要学习的内容有以下几块: 1.javascript变量 2.javascript表达式和运算符 可以用var加

  • javascript编程起步(第三课)

    javascript编程起步(第三课) 第三课终于和大家见面了, 大家要感谢 Actions 的辛勤劳动啊, 好好利用论坛给大家提供的资源和教程, 希望大家一起学习提高 :D 大家有什么意见, 建议或者想法, 可以到本版的教程问答区 或 站务管理版的 建议或意见 去发表, 我们会及时给您反馈 :) 下面是今天的学习重点: A.补充上课的变量内容 B.if语句的基本语法 C.window.com()基本用法 A.变量 1.变量的类型规则 javascript是无类型的,他的变量可以放任何数据类型的

  • javascript编程起步(第五课)

    鼠标事件(上) 随着课程的进行,能跟着下来的人是越来越少了,不知道是不是因为没有太多的表现,只是死记的东西,大家都没有兴趣啊.其实网页上 的很多特效,动作大都是用javascript来实现的,没有javascript的网页,就象一个人没有了肌肉一样.但是所有的动作都是有函数来控制的 ,而控制语句是基础中的基础.希望大家能耐心的学下去.今天的课程就轻松一下,学习点能见到效果的. 主要内容就是基于鼠标的事件,有如下几种: 1.mouseover(鼠标移至) 2.mouseout(鼠标移出) 3.mo

  • javascript编程起步(第四课)

    前一段有人给我说,第二课就看不明白了,我不知道是不是写的太笼统了,不够细致,还是其他的,有什么问题,大家给提出来,当然我也不 是什么js高手,只不过想把爱好者领进门而已.希望大家多多参与. 今天的主要任务就是for循环.另外就是数据类型.既for in(现在还没有讲数组和对象,先了解一下). 数据类型的转换: 如果运算的数据类型不是一样的话,js脚本会尽力执行内部转换来解决,但js不了解你的心思.所以得到的结果可能和你想要的不一样. em: 3+3 // result=6 3+"3" 

  • javascript编程起步(第六课)

    mouseDown事件和mouseUp事件 大家知道,mouseDown事件和mouseUp事件的组合就是click事件,但是如果在链接上按下鼠标,并移到链接之外在放开鼠标,那么就只有mouseD own事件了.这两个事件可以增加图标按钮的图像效果, 至于mouseDown和mouseUp的属性,它们是伴随着Click事件发生的,这和keyPress事件是keyDown事件和keyUp事件组合而成的机制是一样的 ,这3个鼠标事件也有modifier属性. (注意:如果在onClick事件处理中使

  • javascript编程起步(第七课)

    过年到现在一直都比较忙,辜负大家了. 今天就学习函数吧,虽然语句还没有说完. 函数是javascript语言的一个很重要的内容,但也很复杂. 下面来看看javascript函数. 函数是有function加函数名和一对带有参数括号,以及大括号组成的,其中大括号里是 主体javascript语句. 例: function hanshuname(js) //hanshuname是函数名. { document.write(js,"<br>"); //是函数的主体语句. } 函数

  • JavaScript初级教程(第五课)第1/4页

    现在你已经了解了计算机编程的基本知识.我们接下来继续研究一下文档对象模型(Document Object Model-DOM).DOM的点击关系起始于窗口对象在每个窗口对象中是一个文档对象(Document object).我们将重点谈谈文档对象,看看如何利用它从你的用户获得各项信息,并且动态显示新的信息. 我们已经看过文件对象的一个属性-图象数组(Images array).在第3课中,文件中第1个图象可以通过改变其src属性被修改. 例: window.document.images[0].

  • javascript asp教程第五课--合二为一

    两条防线,一个函数: 试问你如何能保证客户端和服务器端具有相同的功能?表单域的验证闪现在我们眼前.别人把你的html复制到另外一个脚本,然后改变客户端的表单域验证--这并不是一件难事.摆在眼前的解决方法是将表单域的验证放置在服务器端.但那又意味着因为使用者的一个小错误,都要给服务器端要返回一串的错误信息.那么,我们何不同时拥有二者呢?不仅仅如此,我们还可以在客户端和服务器端使用同一个javascript函数来保证二者的完全一致性. 看看下面这一小段,请特别注意一下checkMyZip()函数.

  • JavaScript初级教程(第五课续)第1/3页

    在JavaScript中单选框的用法和复选框相似.不同之处在于HTML中的应用.复选框是一种开关.如果一个复选框被选中,你可以再点击后取消选取. 但如果单选框被选中,则只能通过选取另外一个单选框才能取消对该单选框的选取.例: Larry    Moe    Curly 在该例中,如果你打算取消对一个单选框的选取,你必须点击另一个单选框.再看下面的程序: Light off    Light on 表单代码如下: <form name="form_1">        <

随机推荐