javascript编程起步(第五课)


Posted in Javascript onJanuary 10, 2007

鼠标事件(上)

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

的很多特效,动作大都是用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.图片跟随鼠标(当鼠标移动时,会有个图片跟随着鼠标一起移动)

Javascript 相关文章推荐
初试jQuery EasyUI 使用介绍
Apr 01 Javascript
jQuery代码优化 选择符篇
Nov 01 Javascript
ajax请求乱码的解决方法(中文乱码)
Apr 10 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
Mar 02 Javascript
详解Angularjs中的依赖注入
Mar 11 Javascript
jQuery中ajax错误调试分析
Dec 01 Javascript
js实现简易垂直滚动条
Feb 22 Javascript
nuxt+axios解决前后端分离SSR的示例代码
Oct 24 Javascript
vue组件中使用iframe元素的示例代码
Dec 13 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
Dec 25 Javascript
Angular父组件调用子组件的方法
Apr 02 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
Oct 25 Javascript
javascript编程起步(第四课)
Jan 10 #Javascript
jquery简单体验
Jan 10 #Javascript
java script编程起步(第三课)
Jan 10 #Javascript
javascript编程起步(第二课)
Jan 10 #Javascript
javascript编程起步(第一课)
Jan 10 #Javascript
javascript 对象的定义方法
Jan 10 #Javascript
Prototype1.5 rc2版指南最后一篇之Position
Jan 10 #Javascript
You might like
用PHP和MySQL保存和输出图片
2006/10/09 PHP
php生成随机密码自定义函数代码(简单快速)
2014/05/10 PHP
php中实现可以返回多个值的函数实例
2015/03/21 PHP
PHP+jQuery翻板抽奖功能实现
2015/10/19 PHP
thinkphp实现图片上传功能
2016/01/13 PHP
ThinkPHP的SAE开发相关注意事项详解
2016/10/09 PHP
PHP培训要多少钱
2017/06/06 PHP
PHP如何使用array_unshift()在数组开头插入元素
2020/09/01 PHP
textarea的value是html文件源代码,存成html文件的代码
2007/04/20 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
2014/09/24 Javascript
JS实现的自定义网页拖动类
2015/11/06 Javascript
深入浅析JavaScript函数前面的加号和叹号
2016/07/09 Javascript
jQuery实现底部浮动窗口效果
2016/09/07 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
2016/10/21 Javascript
JavaScript实现异步图像上传功能
2018/07/12 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
2018/12/28 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
2019/12/02 Javascript
JavaScript创建表格的方法
2020/04/13 Javascript
50行代码实现贪吃蛇(具体思路及代码)
2013/04/27 Python
Windows中使用wxPython和py2exe开发Python的GUI程序的实例教程
2016/07/11 Python
pandas object格式转float64格式的方法
2018/04/10 Python
python解释器spython使用及原理解析
2019/08/24 Python
Python解释器及PyCharm工具安装过程
2020/02/26 Python
Ruby中的保护方法和私有方法与一般面向对象程序设计语言的一样吗
2013/05/01 面试题
施工人员岗位职责
2013/12/12 职场文书
党员学习十八大感想
2014/01/17 职场文书
售后服务承诺书
2014/03/26 职场文书
大学班级计划书
2014/04/29 职场文书
小学竞选班长演讲稿
2014/09/09 职场文书
法人委托书范本格式
2014/09/15 职场文书
企业整改报告范文
2014/11/08 职场文书
试用期自我评价怎么写
2015/03/10 职场文书
雨雪天气温馨提示
2015/07/15 职场文书
请病假条范文
2015/08/17 职场文书
Java 超详细讲解IO操作字节流与字符流
2022/03/25 Java/Android
TS 类型收窄教程示例详解
2022/09/23 Javascript