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 相关文章推荐
手把手教你自己写一个js表单验证框架的方法
Sep 14 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
Apr 24 Javascript
JQuery操作单选按钮以及复选按钮示例
Sep 23 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
May 23 Javascript
jQuery实现瀑布流的取巧做法分享
Jan 12 Javascript
JavaScript按值删除数组元素的方法
Apr 24 Javascript
第三章之Bootstrap 表格与按钮功能
Apr 25 Javascript
Jquery遍历select option和添加移除option的实现方法
Aug 26 Javascript
JS中parseInt()和map()用法分析
Dec 16 Javascript
vue 详情跳转至列表页实现列表页缓存
Mar 27 Javascript
在vue中使用echars实现上浮与下钻效果
Nov 08 Javascript
JavaScript运行机制实例分析
Apr 11 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使用NuSOAP调用Web服务的方法
2015/07/18 PHP
PHP通过加锁实现并发情况下抢码功能
2016/08/10 PHP
Zend Framework入门教程之Zend_Db数据库操作详解
2016/12/08 PHP
PHP结合Vue实现滚动底部加载效果
2017/12/17 PHP
JavaScript String.replace函数参数实例说明
2013/06/06 Javascript
jquery插件jTimer(jquery定时器)使用方法
2013/12/23 Javascript
js清理Word格式示例代码
2014/02/13 Javascript
深入讲解AngularJS中的自定义指令的使用
2015/06/18 Javascript
js实现简单的联动菜单效果
2015/08/19 Javascript
详谈javascript异步编程
2016/02/21 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
2016/07/06 Javascript
AngularJS基础 ng-hide 指令用法及示例代码
2016/08/01 Javascript
jQuery内容筛选选择器实例代码
2017/02/06 Javascript
Angular开发者指南之入门介绍
2017/03/05 Javascript
详解使用nvm安装node.js
2017/07/18 Javascript
VUE前端cookie简单操作
2017/10/17 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
2019/01/03 Javascript
Django1.3添加app提示模块不存在的解决方法
2014/08/26 Python
Python中实现最小二乘法思路及实现代码
2018/01/04 Python
python开发游戏的前期准备
2019/05/05 Python
梅尔倒谱系数(MFCC)实现
2019/06/19 Python
python 使用socket传输图片视频等文件的实现方式
2019/08/07 Python
Python values()与itervalues()的用法详解
2019/11/27 Python
Python-opencv 双线性插值实例
2020/01/17 Python
html5 canvas 实现光线沿不规则路径运动
2020/04/20 HTML / CSS
法国综合购物网站:RueDuCommerce
2016/09/12 全球购物
Coach澳大利亚官方网站:美国著名时尚奢侈品牌
2017/05/24 全球购物
党校培训自我鉴定范文
2014/03/20 职场文书
服务理念标语
2014/06/18 职场文书
销售竞赛活动方案
2014/08/23 职场文书
一年级班主任工作总结2014
2014/11/08 职场文书
医药公司采购员岗位职责
2015/04/03 职场文书
机械原理课程设计心得体会
2016/01/15 职场文书
基于Python和openCV实现图像的全景拼接详细步骤
2021/10/05 Python
win11怎么用快捷键锁屏? windows11锁屏的几种方法
2021/11/21 数码科技
sql server 累计求和实现代码
2022/02/28 SQL Server