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 相关文章推荐
Mootools 1.2教程 正则表达式
Sep 15 Javascript
JavaScript面向对象编程入门教程
Apr 16 Javascript
关于javaScript注册click事件传递参数的不成功问题
Jul 18 Javascript
javascript中typeof操作符和constucor属性检测
Feb 26 Javascript
JQuery点击事件回到页面顶部效果的实现代码
May 24 Javascript
js判断空对象的实例(超简单)
Jul 26 Javascript
js两种拼接字符串的简单方法(必看)
Sep 02 Javascript
Javascript之面向对象--封装
Dec 02 Javascript
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
微信小程序结合mock.js实现后台模拟及调试
Mar 28 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
Jul 25 Javascript
Vue组件简易模拟实现购物车
Dec 21 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递归函数中使用return的注意事项
2014/01/17 PHP
常用PHP框架功能对照表
2014/10/23 PHP
php文件读取方法实例分析
2015/06/20 PHP
浅析Yii2 gridview实现批量删除教程
2016/04/22 PHP
php字符串操作针对负值的判断分析
2016/07/28 PHP
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
2012/08/09 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
2014/05/03 Javascript
Javascript封装DOMContentLoaded事件实例
2014/06/12 Javascript
微信小程序(应用号)开发新闻客户端实例
2016/10/24 Javascript
js实现简单的获取验证码按钮效果
2017/03/03 Javascript
详解React服务端渲染从入门到精通
2019/03/28 Javascript
express启用https使用小记
2019/05/21 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
2019/06/10 Javascript
JavaScript如何判断对象有某属性
2020/07/03 Javascript
[04:19]DOTA2亚洲邀请赛 现场花絮
2015/03/11 DOTA
[45:44]完美世界DOTA2联赛PWL S2 FTD vs PXG 第一场 11.27
2020/12/01 DOTA
Python的动态重新封装的教程
2015/04/11 Python
python编程通过蒙特卡洛法计算定积分详解
2017/12/13 Python
pycharm运行出现ImportError:No module named的解决方法
2018/10/13 Python
python3实现逐字输出的方法
2019/01/23 Python
Python中的集合介绍
2019/01/28 Python
基于Python 中函数的 收集参数 机制
2019/12/21 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
python中安装django模块的方法
2020/03/12 Python
python matplotlib:plt.scatter() 大小和颜色参数详解
2020/04/14 Python
150行python代码实现贪吃蛇游戏
2020/04/24 Python
HTML5 Canvas的常用线条属性值总结
2016/03/17 HTML / CSS
MyHeritage美国:家族史研究和DNA测试的领先服务
2019/05/27 全球购物
Ticketmaster意大利:音乐会、节日、艺术和剧院的官方门票
2019/12/23 全球购物
介绍一下Linux文件的记录形式
2013/09/29 面试题
医院营销工作计划
2015/01/16 职场文书
党员廉洁自律个人总结
2015/02/13 职场文书
养成教育工作总结
2015/08/13 职场文书
初中班主任教育随笔
2015/08/15 职场文书
创业计划书之游泳馆
2019/09/16 职场文书
关于Python中*args和**kwargs的深入理解
2021/08/07 Python