javascript编程起步(第五课)


Posted in Javascript onFebruary 27, 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的给文章加入关键字链接
Oct 26 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
Aug 28 Javascript
使用js对select动态添加和删除OPTION示例代码
Aug 12 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
Dec 05 Javascript
javascript表单验证使用示例(javascript验证邮箱)
Jan 07 Javascript
AngularJS入门教程(一):静态模板
Dec 06 Javascript
JavaScript动态修改背景颜色的方法
Apr 16 Javascript
jQuery的框架介绍
May 11 Javascript
js实现截图保存图片功能的代码示例
Feb 16 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
Apr 13 Javascript
教你5分钟学会用requirejs(必看篇)
Jul 25 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
Oct 30 Javascript
javascript编程起步(第四课)
Feb 27 #Javascript
javascript编程起步(第六课)
Feb 27 #Javascript
javascript编程起步(第七课)
Feb 27 #Javascript
超清晰的document对象详解
Feb 27 #Javascript
JavaScript中void(0)的具体含义解释
Feb 27 #Javascript
[原创]保存的js无法执行的解决办法
Feb 25 #Javascript
轻轻松松学习JavaScript
Feb 25 #Javascript
You might like
修改PHP的memory_limit限制的方法分享
2012/02/21 PHP
JavaScript类和继承 constructor属性
2010/03/04 Javascript
jQuery 学习第七课 扩展jQuery的功能 插件开发
2010/05/17 Javascript
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
2011/04/06 Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
2012/04/15 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
2013/09/05 Javascript
JS对文本框值的判断示例
2014/03/10 Javascript
扒一扒JavaScript 预解释
2015/01/28 Javascript
基于javascript实现根据身份证号码识别性别和年龄
2016/01/22 Javascript
几种经典排序算法的JS实现方法
2016/03/25 Javascript
微信小程序 开发之快递查询功能的实现
2017/01/09 Javascript
关于vue.js组件数据流的问题
2017/07/26 Javascript
JavaScript创建对象的常用方式总结
2018/08/10 Javascript
vue中使用input[type=&quot;file&quot;]实现文件上传功能
2018/09/10 Javascript
深入理解Vue.js轻量高效的前端组件化方案
2018/12/10 Javascript
如何基于js判断浏览器版本
2020/02/20 Javascript
vue3.0 项目搭建和使用流程
2021/03/04 Vue.js
[00:47]TI7不朽珍藏III——沙王不朽展示
2017/07/15 DOTA
Python 出现错误TypeError: ‘NoneType’ object is not iterable解决办法
2017/01/12 Python
Python+Wordpress制作小说站
2017/04/14 Python
python+tkinter编写电脑桌面放大镜程序实例代码
2018/01/16 Python
Python cookbook(数据结构与算法)实现查找两个字典相同点的方法
2018/02/18 Python
python dlib人脸识别代码实例
2019/04/04 Python
python程序 创建多线程过程详解
2019/09/23 Python
python不使用for计算两组、多个矩形两两间的iou方式
2020/01/18 Python
python opencv实现图片缺陷检测(讲解直方图以及相关系数对比法)
2020/04/07 Python
神话般的珠宝:Ross-Simons
2020/07/13 全球购物
编写一个 C 函数,该函数在一个字符串中找到可能的最长的子字符串,且该字符串是由同一字符组成的
2015/07/23 面试题
师范院校学生自荐信范文
2013/12/27 职场文书
幼儿园五一活动方案
2014/02/07 职场文书
体育教学随笔感言
2014/02/24 职场文书
医院节能减排方案
2014/06/13 职场文书
护士长2014年终工作总结
2014/11/11 职场文书
2014年前台接待工作总结
2014/12/05 职场文书
婚庆开业庆典主持词
2015/06/30 职场文书
Redis特殊数据类型Geospatial地理空间
2022/06/01 Redis