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面象对象成员、共享成员变量实验
Nov 19 Javascript
javascript ready和load事件的区别示例介绍
Aug 30 Javascript
原生js操作checkbox用document.getElementById实现
Oct 12 Javascript
javascript中错误使用var造成undefined
Mar 31 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
Jun 12 Javascript
JS控制静态页面传递参数并获取参数应用
Aug 10 Javascript
jQuery实现两列等高并自适应高度
Dec 22 Javascript
Vue.js事件处理器与表单控件绑定详解
Mar 20 Javascript
JavaScript用二分法查找数据的实例代码
Jun 17 Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
Jul 04 Javascript
webpack2.0配置postcss-loader的方法
Aug 17 Javascript
详解vue-router 初始化时做了什么
Jun 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
ajax+php打造进度条 readyState各状态
2010/03/20 PHP
解析php中heredoc的使用方法
2013/06/17 PHP
Yii2针对指定url的生成及图片等的引入方法小结
2016/07/18 PHP
php微信浏览器分享设置以及回调详解
2016/08/01 PHP
DEDE实现转跳属性文档在模板上调用出转跳地址
2016/11/04 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
详解php协程知识点
2018/09/21 PHP
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
2006/11/07 Javascript
JQuery实现用户名无刷新验证的小例子
2013/03/22 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
2013/09/16 Javascript
Javascript this 关键字 详解
2014/10/22 Javascript
jquery实现图片上传前本地预览功能
2016/05/10 Javascript
jquery对所有input type=text的控件赋值实现方法
2016/12/02 Javascript
JS 在数组指定位置插入/删除数据的方法
2017/01/12 Javascript
js放到head中失效的原因与解决方法
2017/03/07 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
2017/10/27 Javascript
vue-cli初始化项目中使用less的方法
2018/08/09 Javascript
json_decode 索引为数字时自动排序问题解决方法
2020/03/28 Javascript
Element Dropdown下拉菜单的使用方法
2020/07/26 Javascript
js实现自定义滚动条的示例
2020/10/27 Javascript
angular *Ngif else用法详解
2020/12/15 Javascript
深入理解Python爬虫代理池服务
2018/02/28 Python
Python 实现训练集、测试集随机划分
2020/01/08 Python
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
挪威太阳镜和眼镜网上商城:SmartBuyGlasses挪威
2016/08/20 全球购物
伦敦一家西班牙童装精品店:La Coqueta
2018/02/02 全球购物
运动会领导邀请函
2014/01/10 职场文书
考试退步检讨书
2014/01/15 职场文书
村主任个人对照检查材料
2014/10/01 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
前台文员岗位职责
2015/02/04 职场文书
求职自荐信怎么写
2015/03/04 职场文书
2015年检验员工作总结范文
2015/04/30 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书
纯 CSS 自定义多行省略的问题(从原理到实现)
2021/11/11 HTML / CSS
MySQL 分区表中分区键为什么必须是主键的一部分
2022/03/17 MySQL