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 相关文章推荐
extjs grid设置某列背景颜色和字体颜色的实现方法
Sep 06 Javascript
js精度溢出解决方案
Dec 02 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
May 15 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
Mar 02 Javascript
JavaScript实现动画打开半透明提示层的方法
Apr 21 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
Dec 01 Javascript
window.onerror()的用法与实例分析
Jan 27 Javascript
JS设置CSS样式的方式汇总
Jan 21 Javascript
js封装成插件的步骤方法
Sep 11 Javascript
JS 数组基本用法入门示例解析
Jan 16 Javascript
JS数组Reduce方法功能与用法实例详解
Apr 29 Javascript
vue使用canvas实现移动端手写签名
Sep 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脚本的10个技巧(5)
2006/10/09 PHP
深入解读php中关于抽象(abstract)类和抽象方法的问题分析
2014/01/03 PHP
ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码
2014/06/23 PHP
Thinkphp使用mongodb数据库实现多条件查询方法
2014/06/26 PHP
PHP 使用memcached简单示例分享
2015/03/05 PHP
php中文验证码实现方法
2015/06/18 PHP
CentOS下与Apache连接的PHP多版本共存方案实现详解
2015/12/19 PHP
php版微信js-sdk支付接口类用法示例
2016/10/12 PHP
Laravel 添加多语言提示信息的方法
2019/09/29 PHP
JQuery与Ajax常用代码实现对比
2009/10/03 Javascript
js substr、substring和slice使用说明小记
2011/09/15 Javascript
html的DOM中Event对象onblur事件用法实例
2015/01/21 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
2015/04/06 Javascript
javascript中sort() 方法使用详解
2015/08/30 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
详细总结Javascript中的焦点管理
2016/09/17 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
2018/05/02 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
2018/09/03 Javascript
python的keyword模块用法实例分析
2015/06/30 Python
Django中ORM表的创建和增删改查方法示例
2017/11/15 Python
对Python3 解析html的几种操作方式小结
2019/02/16 Python
Python 3.8中实现functools.cached_property功能
2019/05/29 Python
python itchat给指定联系人发消息的方法
2019/06/11 Python
python 中如何获取列表的索引
2019/07/02 Python
Pytorch损失函数nn.NLLLoss2d()用法说明
2020/07/07 Python
Opencv 图片的OCR识别的实战示例
2021/03/02 Python
W3C公布最新的HTML5标准草案
2008/10/17 HTML / CSS
万宝龙英国官网:Montblanc手表、书写工具、皮革和珠宝
2018/10/16 全球购物
Under Armour西班牙官网:美国知名的高端功能性运动品牌
2018/12/12 全球购物
Guess美国官网:美国知名服装品牌
2019/04/08 全球购物
平面设计的岗位职责
2013/11/08 职场文书
中专生自我鉴定
2013/12/17 职场文书
五年级科学教学反思
2014/02/05 职场文书
《菜园里》教学反思
2014/04/17 职场文书
项目申报专员岗位职责
2014/07/09 职场文书
浅谈redis缓存在项目中的使用
2021/05/20 Redis