javascript编程起步(第五课)
javascript编程起步(第五课)
发布时间:2016-12-30 来源:查字典编辑
摘要:鼠标事件(上)随着课程的进行,能跟着下来的人是越来越少了,不知道是不是因为没有太多的表现,只是死记的东西,大家都没有兴趣啊。其实网页上的很多...

鼠标事件(上)

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

的很多特效,动作大都是用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>

<scriptlanguage="javascript">

functiontext_onmouseover(){

mytext.style.fontSize="30pt";

mytext.style.color="red";

mytext.style.fontStyle="italic";

}

functiontext_onmouseout(){

mytext.style.fontSize="20pt";

mytext.style.color="blue";

mytext.style.fontStyle="normal";

}

</script>

</head>

<body>

<pid=mytextonmouseover="text_onmouseover()"onmouseout="text_onmouseout()">http://www.javascript.com.cn</p>

<p>看看字体样式有什么变化</p>

</body>

</html>

这里定义了两个函数,来使字体改变样式。关于函数我们以后会详细的讲解。

(注意:ie对页面上的所有元素都支持mouseover和mouseout事件,但对于netscapenavigator来说,只有超链接和层支持这两个事件。)

下面看鼠标移动的例子:

<html>

<bodyonMousemove="micro$oftMouseMove()">

<SCRIPTLANGUAGE="JavaScript">

if(navigator.appName=='Netscape')

{

document.captureEvents(Event.MOUSEMOVE);

document.onmousemove=netscapeMouseMove;

}

functionnetscapeMouseMove(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;

}

}

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

<FORMNAME="test">

X:<INPUTTYPE="TEXT"NAME="x"SIZE="4">Y:<INPUT

TYPUE="TEXT"NAME="y"SIZE="4">

</FORM>

</body>

</html>

鼠标移动的事件在鼠标跟随效果的使用上比较多,大家可以看看鼠标跟随特效。网上n多。

(需要注意的是:启动这个事件处理过程存在一个问题,就是它有可能会屏蔽其他事件。另外还增加了页面的处理时间,应尽量少用。)

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

今天的作业是:

1.图片链接的转换(当鼠标放上去时是一个图片,当鼠标离开时是另外一个图片)

2.图片跟随鼠标(当鼠标移动时,会有个图片跟随着鼠标一起移动)

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类