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实现图片轮播效果(二)图片序列节点的控制实现
Feb 17 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
Sep 24 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
Dec 26 Javascript
利用angularjs1.4制作的简易滑动门效果
Feb 28 Javascript
es6新特性之 class 基本用法解析
May 05 Javascript
vue基于element的区间选择组件
Sep 07 Javascript
javascript 模块依赖管理的本质深入详解
Apr 30 Javascript
JS数据类型判断的几种常用方法
Jul 07 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
Sep 09 Javascript
JavaScript 实现轮播图特效的示例
Nov 05 Javascript
JavaScript如何实现防止重复的网络请求的示例
Jan 28 Javascript
JavaScript高级程序设计之变量与作用域
Nov 17 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将任何格式视频转为flv的代码
2009/09/03 PHP
php 求质素(素数) 的实现代码
2011/04/12 PHP
PHP7多线程搭建教程
2017/04/21 PHP
ThinkPHP3.2.3框架Memcache缓存使用方法实例总结
2019/04/15 PHP
php判断某个方法是否存在函数function_exists (),method_exists()与is_callable()区别与用法解析
2020/04/20 PHP
js自动查找select下拉的菜单并选择(示例代码)
2014/02/26 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
2015/02/03 Javascript
js实现交换运动效果的方法
2015/04/10 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
2016/10/13 Javascript
ES5学习教程之Array对象
2017/04/01 Javascript
详解Angular 4.x 动态创建组件
2017/04/25 Javascript
bootstrap Table服务端处理分页(后台是.net)
2017/10/19 Javascript
浅析vue深复制
2018/01/29 Javascript
JS字符串去除连续或全部重复字符的实例
2018/03/08 Javascript
关于单文件组件.vue的使用
2018/09/20 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
2019/04/29 Javascript
Vue.js路由实现选项卡简单实例
2019/07/24 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
2019/10/29 Javascript
JavaScript监听一个DOM元素大小变化
2020/04/26 Javascript
Python学习之asyncore模块用法实例教程
2014/09/29 Python
简单上手Python中装饰器的使用
2015/07/12 Python
Python学生成绩管理系统简洁版
2020/04/05 Python
使用50行Python代码从零开始实现一个AI平衡小游戏
2018/11/21 Python
python matplotlib 画dataframe的时间序列图实例
2019/11/20 Python
Python如何使用函数做字典的值
2019/11/30 Python
python判断元素是否存在的实例方法
2020/09/24 Python
open_basedir restriction in effect. 原因与解决方法
2021/03/14 PHP
详解HTML5 Canvas标签及基本使用
2020/01/10 HTML / CSS
Carter’s OshKosh加拿大:购买婴幼儿服装和童装
2018/11/27 全球购物
后勤采购员岗位职责
2013/12/19 职场文书
2015大学党建带团建工作总结
2015/07/23 职场文书
中学校园广播稿
2015/08/18 职场文书
《月光曲》教学反思
2016/02/16 职场文书
HTML5页面音频自动播放的实现方式
2021/06/21 HTML / CSS
上个世纪50年代的可穿戴技术:无线电帽子
2022/02/18 无线电
漫改真人电影「萌系男友是燃燃的橘色」公开先导视觉图
2022/03/21 日漫