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 相关文章推荐
不错的JS中变量相关的细节分析
Aug 13 Javascript
通过javascript的匿名函数来分析几段简单有趣的代码
Jun 29 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
Apr 19 Javascript
用JS实现3D球状标签云示例代码
Dec 01 Javascript
原生javaScript实现图片延时加载的方法
Dec 22 Javascript
AngularJs IE Compatibility 兼容老版本IE
Sep 01 Javascript
JS常用算法实现代码
Nov 14 Javascript
理解 javascript 中的函数表达式与函数声明
Jul 07 Javascript
vue项目添加多页面配置的步骤详解
May 22 Javascript
vue项目配置同一局域网可使用ip访问的操作
Oct 23 Javascript
vue使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
Bootstrap FileInput实现图片上传功能
Jan 28 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
某大型网络公司应聘时的笔试题目附答案
2008/03/27 PHP
php socket方式提交的post详解
2008/07/19 PHP
使用Curl进行抓取远程内容时url中文编码问题示例探讨
2013/10/29 PHP
php实现的太平洋时间和北京时间互转的自定义函数分享
2014/08/19 PHP
Laravel5中contracts详解
2015/03/02 PHP
Opcache导致php-fpm崩溃nginx返回502
2015/03/02 PHP
Yii框架弹出框功能示例
2017/01/07 PHP
PHP7内核之Reference详解
2019/03/14 PHP
PHP的cookie与session原理及用法详解
2019/09/27 PHP
JS写的贪吃蛇游戏(个人练习)
2013/07/08 Javascript
js获取location.href的参数实例代码
2013/08/02 Javascript
javascript去掉前后空格的实例
2013/11/07 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
2014/05/04 Javascript
基于JQuery实现图片上传预览与删除操作
2016/05/24 Javascript
Javascript实现找不同色块的游戏
2017/07/17 Javascript
angular 数据绑定之[]和{{}}的区别
2018/09/25 Javascript
重学JS 系列:聊聊继承(推荐)
2019/04/11 Javascript
9种方法优化jQuery代码详解
2020/02/04 jQuery
Python中用于转换字母为小写的lower()方法使用简介
2015/05/19 Python
在Python中操作字符串之replace()方法的使用
2015/05/19 Python
利用Python画ROC曲线和AUC值计算
2016/09/19 Python
Python人脸识别初探
2017/12/21 Python
python 以16进制打印输出的方法
2018/07/09 Python
python中使用 xlwt 操作excel的常见方法与问题
2019/01/13 Python
Django框架模板介绍
2019/01/15 Python
Django 项目通过加载不同env文件来区分不同环境
2020/02/17 Python
基于plt.title无法显示中文的快速解决
2020/05/16 Python
python输出结果刷新及进度条的实现操作
2020/07/13 Python
AmazeUI 平滑滚动效果的示例代码
2020/08/20 HTML / CSS
Hotels.com印度:酒店预订
2019/05/11 全球购物
暑期社会实践感言
2014/02/25 职场文书
安全伴我行演讲稿
2014/09/04 职场文书
反邪教警示教育活动总结
2015/05/09 职场文书
追悼词范文大全
2015/06/23 职场文书
安全生产培训心得体会
2016/01/18 职场文书
Pyqt5将多个类组合在一个界面显示的完整示例
2021/09/04 Python