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实现漂亮的动态信息提示效果
Aug 02 Javascript
input 和 textarea 输入框最大文字限制的jquery插件
Oct 27 Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
Dec 25 Javascript
window.location不跳转的问题解决方法
Apr 17 Javascript
jQuery照片伸缩效果不影响其他元素的布局
May 09 Javascript
Javascript的严格模式strict mode详细介绍
Jun 06 Javascript
jQuery中data()方法用法实例
Dec 27 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
Apr 06 Javascript
JS实现选择TextArea内文本的方法
Aug 03 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
Aug 25 Javascript
vue 实现input表单元素的disabled示例
Oct 28 Javascript
vue+echarts实现动态折线图的方法与注意
Sep 01 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中在数据库中保存Checkbox数据(1)
2006/10/09 PHP
php下将XML转换为数组
2010/01/01 PHP
解析php中的fopen()函数用打开文件模式说明
2013/06/20 PHP
php多线程实现方法及用法实例详解
2015/10/26 PHP
PHP基于XMLWriter操作xml的方法分析
2017/07/17 PHP
javascript css在IE和Firefox中区别分析
2009/02/18 Javascript
php对mongodb的扩展(小试牛刀)
2012/11/11 Javascript
JS实现图片预加载无需等待
2012/12/21 Javascript
用Js实现的动态增加表格示例自己写的
2013/10/21 Javascript
js导航栏单击事件背景变换示例代码
2014/01/13 Javascript
JavaScript lastIndexOf方法入门实例(计算指定字符在字符串中最后一次出现的位置)
2014/10/17 Javascript
同一个网页中实现多个JavaScript特效的方法
2015/02/02 Javascript
jquery超简单实现手风琴效果的方法
2015/06/05 Javascript
JavaScript中数据结构与算法(四):串(BF)
2015/06/19 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
AngularJS中的包含详细介绍及实现示例
2016/07/28 Javascript
JavaScript之filter_动力节点Java学院整理
2017/06/28 Javascript
JavaScript中最常用的10种代码简写技巧总结
2017/06/28 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
2018/12/19 Javascript
详解JavaScript中分解数字的三种方法
2021/01/05 Javascript
python读取Android permission文件
2013/11/01 Python
数组保存为txt, npy, csv 文件, 数组遍历enumerate的方法
2018/07/09 Python
Python实现App自动签到领取积分功能
2018/09/29 Python
python3人脸识别的两种方法
2019/04/25 Python
Django Model中字段(field)的各种选项说明
2020/05/19 Python
Sisley法国希思黎美国官方网站:享誉全球的奢华植物美容品牌
2020/06/27 全球购物
幼儿园国庆节活动方案
2014/02/01 职场文书
有关爱国演讲稿
2014/05/07 职场文书
2014年团委工作总结
2014/11/13 职场文书
实习班主任自我评价
2015/03/11 职场文书
2016大学生社会实践单位评语
2015/12/01 职场文书
2016参观监狱警示教育活动心得体会
2016/01/15 职场文书
大学生各类奖学金申请书
2019/06/24 职场文书
django学习之ajax post传参的2种格式实例
2021/05/14 Python
html+css实现文字折叠特效实例
2021/06/02 HTML / CSS
Redis缓存-序列化对象存储乱码问题的解决
2021/06/21 Redis