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 相关文章推荐
如何实现浏览器上的右键菜单
Jul 10 Javascript
在IE浏览器中resize事件执行多次的解决方法
Jul 12 Javascript
javascript基本算法汇总
Mar 09 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
Jun 20 Javascript
微信小程序 wx.uploadFile无法上传解决办法
Dec 14 Javascript
3种vue组件的书写形式
Nov 29 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
Dec 16 Javascript
js构造函数创建对象是否加new问题
Jan 22 Javascript
bootstrap模态框关闭后清除模态框的数据方法
Aug 10 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
May 28 Javascript
基于three.js实现的3D粒子动效实例代码
Apr 09 Javascript
详细聊聊vue中组件的props属性
Nov 02 Vue.js
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中文本数据翻页(留言本翻页)
2006/10/09 PHP
php中$this-&amp;gt;含义分析
2009/11/29 PHP
php使用sql数据库 获取字段问题介绍
2013/08/12 PHP
php获取字符串中各个字符出现次数的方法
2015/02/23 PHP
php递归遍历多维数组的方法
2015/04/18 PHP
Zend Framework基本页面布局分析
2016/03/19 PHP
php反射类ReflectionClass用法分析
2016/05/12 PHP
JS和jquery获取各种屏幕的宽度和高度的代码
2013/08/02 Javascript
js图片自动轮播代码分享(js图片轮播)
2014/05/06 Javascript
JS实现清除指定cookies的方法
2014/09/20 Javascript
jquery实现弹出层效果实例
2015/05/19 Javascript
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
2016/03/01 Javascript
详解用vue编写弹出框组件
2017/07/04 Javascript
iview给radio按钮组件加点击事件的实例
2017/09/30 Javascript
解决Linux无法正常安装与卸载Node.js的方法
2018/01/19 Javascript
Webpack 之 babel-loader文件预处理器详解
2018/03/23 Javascript
layui的table中显示图片方法
2018/08/17 Javascript
express 项目分层实践详解
2018/12/10 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
2019/06/17 Javascript
Vue解析剪切板图片并实现发送功能
2020/02/04 Javascript
nodeJs项目在阿里云的简单部署
2020/11/27 NodeJs
python 多线程应用介绍
2012/12/19 Python
python查看模块,对象的函数方法
2018/10/16 Python
详解Python3 基本数据类型
2019/04/19 Python
python通过nmap扫描在线设备并尝试AAA登录(实例代码)
2019/12/30 Python
python 实现数据库中数据添加、查询与更新的示例代码
2020/12/07 Python
python中Array和DataFrame相互转换的实例讲解
2021/02/03 Python
canvas 基础之图像处理的使用
2020/04/10 HTML / CSS
英文版网络工程师求职信
2013/10/28 职场文书
汽车专业学生自我评价
2014/01/19 职场文书
2015年村级财务管理制度
2015/08/04 职场文书
运动会跳远广播稿
2015/08/19 职场文书
Vue3.0中Ref与Reactive的区别示例详析
2021/07/07 Vue.js
weblogic服务建立数据源连接测试更新mysql驱动包的问题及解决方法
2022/01/22 MySQL
Mysql的Table doesn't exist问题及解决
2022/12/24 MySQL