javascript编程起步(第五课)


Posted in Javascript onJanuary 10, 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 仿关机效果的图片层
Dec 26 Javascript
深入理解JavaScript定时机制
Oct 29 Javascript
JavaScript XML和string相互转化实现代码
Jul 04 Javascript
关于Bootstrap弹出框无法调用问题的解决办法
Mar 10 Javascript
详解Bootstrap各式各样的按钮(推荐)
Dec 13 Javascript
微信小程序实现多个按钮toggle功能的实例
Jun 13 Javascript
JS实现unicode和UTF-8之间的互相转换互转
Jul 05 Javascript
vue  自定义组件实现通讯录功能
Sep 30 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
Aug 12 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
Sep 24 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
Nov 15 Javascript
js实现录音上传功能
Nov 22 Javascript
javascript编程起步(第四课)
Jan 10 #Javascript
jquery简单体验
Jan 10 #Javascript
java script编程起步(第三课)
Jan 10 #Javascript
javascript编程起步(第二课)
Jan 10 #Javascript
javascript编程起步(第一课)
Jan 10 #Javascript
javascript 对象的定义方法
Jan 10 #Javascript
Prototype1.5 rc2版指南最后一篇之Position
Jan 10 #Javascript
You might like
PHP+JS实现大规模数据提交的方法
2015/07/02 PHP
ThinkPHP实现分页功能
2017/04/28 PHP
document.compatMode介绍
2009/05/21 Javascript
JQuery 入门实例1
2009/06/25 Javascript
XmlUtils JS操作XML工具类
2009/10/01 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
2013/02/25 Javascript
jQuery基本过滤选择器使用介绍
2013/04/18 Javascript
jQuery获取注册信息并提示实现代码
2013/04/21 Javascript
浅析JavaScript中的隐式类型转换
2013/12/05 Javascript
js获取html页面节点方法(递归方式)
2013/12/13 Javascript
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
2014/06/14 Javascript
JQuery Tips相关(1)----关于$.Ready()
2014/08/14 Javascript
js鼠标点击图片切换效果实现代码
2015/11/19 Javascript
jQuery解析json数据实例分析
2015/11/24 Javascript
基于javascript制作经典传统的拼图游戏
2016/03/22 Javascript
详解jQuery中的empty、remove和detach
2016/04/11 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
2017/04/13 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
2017/05/24 Javascript
原生js FileReader对象实现图片上传本地预览效果
2020/03/27 Javascript
nodejs动态创建二维码的方法
2017/08/12 NodeJs
Vue中render函数的使用方法
2018/01/31 Javascript
浅析Vue.js 中的条件渲染指令
2018/11/19 Javascript
详解Angular Karma测试的持续集成实践
2019/11/15 Javascript
微信小程序实现滚动加载更多的代码
2019/12/06 Javascript
Vue实现购物车实例代码两则
2020/05/30 Javascript
React实现全选功能
2020/08/25 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
2020/11/13 Javascript
对python pandas读取剪贴板内容的方法详解
2019/01/24 Python
Django Celery异步任务队列的实现
2019/07/24 Python
python实现大战外星人小游戏实例代码
2019/12/26 Python
python opencv 实现对图像边缘扩充
2020/01/19 Python
编辑个人求职信范文
2013/09/21 职场文书
怎么写好自荐信
2013/10/30 职场文书
纪念九一八事变演讲稿:牢记九一八,屈辱怎能忘
2014/09/14 职场文书
经理助理岗位职责
2015/02/02 职场文书
Python 中的Sympy详细使用
2021/08/07 Python