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下弹出窗口的变通
Apr 18 Javascript
基于jQuery的实现简单的分页控件
Oct 10 Javascript
js的写法基础分析
Jan 17 Javascript
new Date()问题在ie8下面的处理方法
Jul 31 Javascript
escape函数解决js中ajax传递中文出现乱码问题
Oct 30 Javascript
JavaScript获取并更改input标签name属性的方法
Jul 02 Javascript
JS实现光滑展开合拢的菜单效果代码
Sep 16 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
Jul 27 Javascript
Javascript中八种遍历方法的执行速度深度对比
Apr 25 Javascript
angular1.x ui-route传参的三种写法小结
Aug 31 Javascript
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
Vue自定义组件双向绑定实现原理及方法详解
Sep 03 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循环跳出的问题
2013/07/01 PHP
windwos下使用php连接oracle数据库的过程分享
2014/05/26 PHP
Yii中的cookie的发送和读取
2016/07/27 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
2010/01/22 Javascript
IE6 fixed的完美解决方案
2011/03/31 Javascript
jquery 插件学习(五)
2012/08/06 Javascript
node.js中的querystring.stringify方法使用说明
2014/12/10 Javascript
JavaScript中的逻辑判断符&amp;&amp;、||与!介绍
2014/12/31 Javascript
jQuery插件jRumble实现网页元素抖动
2015/06/05 Javascript
javascript实现状态栏中文字动态显示的方法
2015/10/20 Javascript
详解JS面向对象编程
2016/01/24 Javascript
字太多用...代替的方法(两种)
2017/03/15 Javascript
Vue.js基础学习之class与样式绑定
2017/03/20 Javascript
微信小程序之购物车功能
2020/09/23 Javascript
angular4实现tab栏切换的方法示例
2017/10/21 Javascript
vue实现消息的无缝滚动效果的示例代码
2017/12/05 Javascript
AngularJS发送异步Get/Post请求方法
2018/08/13 Javascript
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
node koa2 ssr项目搭建的方法步骤
2020/12/11 Javascript
python使用matplotlib画饼状图
2018/09/25 Python
Python静态类型检查新工具之pyright 使用指南
2019/04/26 Python
Python 经典算法100及解析(小结)
2019/09/13 Python
详解Python3迁移接口变化采坑记
2019/10/11 Python
Django实现分页显示效果
2019/10/31 Python
使用opencv识别图像红色区域,并输出红色区域中心点坐标
2020/06/02 Python
Python生成随机验证码代码实例解析
2020/06/09 Python
英国领先的酒类网上商城:TheDrinkShop
2017/03/16 全球购物
广州迈达威.net面试题目
2012/03/10 面试题
优秀英语专业毕业生求职信
2013/11/23 职场文书
数学高效课堂实施方案
2014/03/29 职场文书
公司委托书范本
2014/04/04 职场文书
未婚证明书模板
2014/10/08 职场文书
2016年12月份红领巾广播稿
2015/12/21 职场文书
MySQL COUNT函数的使用与优化
2021/05/10 MySQL
python如何查找列表中元素的位置
2022/05/30 Python