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 相关文章推荐
javascript Ext JS 状态默认存储时间
Feb 15 Javascript
JavaScript中URL编码函数代码
Jan 11 Javascript
javaScript如何生成xmlhttp
Dec 16 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
Jun 06 Javascript
jQuery控制TR显示隐藏的几种方法
Jun 18 Javascript
jQuery函数map()和each()介绍及异同点分析
Nov 08 Javascript
jQuery实现contains方法不区分大小写的方法
Feb 13 Javascript
vue使用jsonp抓取qq音乐数据的方法
Jun 21 Javascript
npm 常用命令详解(小结)
Jan 17 Javascript
vue proxy 的优势与使用场景实现
Jun 15 Javascript
JS出现404错误原理及解决方案
Jul 01 Javascript
vue 修改 data 数据问题并实时显示操作
Sep 07 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
Mysql的GROUP_CONCAT()函数使用方法
2008/03/28 PHP
php调整服务器时间的方法
2015/04/03 PHP
初识通用数据库操作类――前端easyui-datagrid,form(php)
2015/07/31 PHP
JavaScript 轻松搞定快捷留言功能 只需一行代码
2010/04/01 Javascript
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
2010/05/27 Javascript
Javascript实现滑块滑动改变值的实现代码
2013/04/12 Javascript
javascript实现滑动解锁功能
2014/12/31 Javascript
JS+CSS3模拟溢出滚动效果
2016/08/12 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
2016/09/01 Javascript
微信小程序通过api接口将json数据展现到小程序示例
2017/01/20 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
2017/08/24 Javascript
浅谈vue2 单页面如何设置网页title
2017/11/08 Javascript
基于vue中对鼠标划过事件的处理方式详解
2018/08/22 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
2019/09/09 Javascript
解决vue组件中click事件失效的问题
2019/11/09 Javascript
JavaScript遍历数组的方法代码实例
2020/01/14 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
2020/07/09 Javascript
vue单元格多列合并的实现
2020/11/26 Vue.js
[55:04]海涛DOTA2死魂复燃6.82版本介绍
2014/09/28 DOTA
[01:35]辉夜杯战队访谈宣传片—iG.V
2015/12/25 DOTA
Python open读写文件实现脚本
2008/09/06 Python
python复制文件代码实现
2013/12/23 Python
Python实现PS图像抽象画风效果的方法
2018/01/23 Python
Python利用splinter实现浏览器自动化操作方法
2018/05/11 Python
django利用request id便于定位及给日志加上request_id
2018/08/26 Python
python3.7环境下安装Anaconda的教程图解
2019/09/10 Python
python3.x中安装web.py步骤方法
2020/06/23 Python
正规的求职信范文分享
2013/12/11 职场文书
2014年学雷锋活动总结
2014/06/26 职场文书
讲文明倡议书
2015/04/29 职场文书
清明祭英烈活动总结
2015/05/11 职场文书
2015年教师节感言
2015/08/03 职场文书
3招让你摆脱即兴讲话冷场尴尬
2019/08/08 职场文书
Java字符串逆序方法详情
2022/03/21 Java/Android
星际争霸:毕姥爷vs解冻03
2022/04/01 星际争霸
css3 选择器
2022/05/11 HTML / CSS