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 相关文章推荐
IE 下的只读 innerHTML
Aug 21 Javascript
风吟的小型JavaScirpt库 (FY.JS).
Mar 09 Javascript
jQuery中调用WebService方法小结
Mar 28 Javascript
javascript两种function的定义介绍及区别说明
May 02 Javascript
angular.element方法汇总
Jan 07 Javascript
js控制页面的全屏展示和退出全屏显示的方法
Mar 10 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
Aug 04 Javascript
详解vue与后端数据交互(ajax):vue-resource
Mar 16 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
Jun 08 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
Sep 12 Javascript
如何进行微信公众号开发的本地调试的方法
Jun 16 Javascript
微信小程序canvas实现签名功能
Jan 19 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
FireFox与IE 下js兼容触发click事件的代码
2008/11/20 Javascript
JavaScript 继承机制的实现(待续)
2010/05/18 Javascript
js获取input标签的输入值实现代码
2013/08/05 Javascript
jquery获取节点名称
2015/04/26 Javascript
javascript实现模拟时钟的方法
2015/05/13 Javascript
小议JavaScript中Generator和Iterator的使用
2015/07/29 Javascript
每天一篇javascript学习小结(面向对象编程)
2015/11/20 Javascript
基于jquery animate操作css样式属性小结
2015/11/27 Javascript
基于Bootstrap3表格插件和分页插件实例详解
2016/05/17 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
2016/11/29 Javascript
video.js使用改变ui过程
2017/03/05 Javascript
BootStrap表单时间选择器详解
2017/05/09 Javascript
JS实现带动画的回到顶部效果
2017/12/28 Javascript
Node.js之readline模块的使用详解
2019/03/25 Javascript
[01:38]女王驾到——至宝魔廷新尊技能&特效展示
2020/06/16 DOTA
[51:53]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第二场 1月24日
2021/03/11 DOTA
400多行Python代码实现了一个FTP服务器
2012/05/10 Python
pymongo给mongodb创建索引的简单实现方法
2015/05/06 Python
Python的numpy库中将矩阵转换为列表等函数的方法
2018/04/04 Python
Python 使用PIL中的resize进行缩放的实例讲解
2018/08/03 Python
将pandas.dataframe的数据写入到文件中的方法
2018/12/07 Python
Opencv求取连通区域重心实例
2020/06/04 Python
PyTorch之nn.ReLU与F.ReLU的区别介绍
2020/06/27 Python
python pandas dataframe 去重函数的具体使用
2020/07/20 Python
在css3中background-clip属性与background-origin属性的用法介绍
2012/11/13 HTML / CSS
浅谈css3新单位vw、vh、vmin、vmax的使用详解
2017/12/01 HTML / CSS
马来西亚网上美容店:Hermo.my
2017/11/25 全球购物
师生聚会感言
2014/01/26 职场文书
工程采购员岗位职责
2014/03/09 职场文书
客户答谢会活动方案
2014/08/31 职场文书
国际残疾人日广播稿范文
2014/10/09 职场文书
批评与自我批评范文
2014/10/15 职场文书
当你焦虑迷茫时,请读读这6句话
2019/07/24 职场文书
Vue+Element UI实现概要小弹窗的全过程
2021/05/30 Vue.js
pytorch中的torch.nn.Conv2d()函数图文详解
2022/02/28 Python
Python中time标准库的使用教程
2022/04/13 Python