javascript编程起步(第五课)


Posted in Javascript onFebruary 27, 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 类方法定义还是有点区别
Apr 15 Javascript
JavaScript的public、private和privileged模式
Dec 28 Javascript
javascript中Date format(js日期格式化)方法小结
Dec 17 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
Aug 31 Javascript
EsLint入门学习教程
Feb 17 Javascript
详解Vue中状态管理Vuex
May 11 Javascript
详解如何使用koa实现socket.io官网的例子
Nov 04 Javascript
谈谈JavaScript中super(props)的重要性
Feb 12 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
Sep 11 Javascript
Vue数字输入框组件使用方法详解
Feb 10 Javascript
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
javascript编程起步(第四课)
Feb 27 #Javascript
javascript编程起步(第六课)
Feb 27 #Javascript
javascript编程起步(第七课)
Feb 27 #Javascript
超清晰的document对象详解
Feb 27 #Javascript
JavaScript中void(0)的具体含义解释
Feb 27 #Javascript
[原创]保存的js无法执行的解决办法
Feb 25 #Javascript
轻轻松松学习JavaScript
Feb 25 #Javascript
You might like
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
php PDO属性设置与操作方法分析
2018/12/27 PHP
PHP7 安装event扩展的实现方法
2019/10/08 PHP
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
2006/12/23 Javascript
不安全的常用的js写法
2009/09/15 Javascript
javascript 按回车键相应按钮提交事件
2009/11/02 Javascript
setTimeout和setInterval的区别你真的了解吗?
2011/03/31 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
2011/04/06 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
2013/11/21 Javascript
javascript中的事件代理初探
2014/03/08 Javascript
Javascript window对象详解
2014/11/12 Javascript
教你如何使用firebug调试功能了解javascript闭包和this
2015/03/04 Javascript
jQuery实现拖拽效果插件的方法
2015/03/23 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
2015/04/30 Javascript
jquery图片滚动放大代码分享(1)
2015/08/25 Javascript
浅谈JS中的常用选择器及属性、方法的调用
2017/07/28 Javascript
使用nodejs+express实现简单的文件上传功能
2017/12/27 NodeJs
vue多页面开发和打包正确处理方法
2018/04/20 Javascript
JavaScript实现轮播图效果代码实例
2019/09/28 Javascript
[42:22]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第一局
2016/02/27 DOTA
详解python的webrtc库实现语音端点检测
2017/05/31 Python
Python 绘制酷炫的三维图步骤详解
2019/07/12 Python
python爬虫 模拟登录人人网过程解析
2019/07/31 Python
Jupyter Notebook的连接密码 token查询方式
2020/04/21 Python
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
教师个人的自我评价分享
2014/01/02 职场文书
俄罗斯商务邀请函
2014/01/26 职场文书
外贸专业求职信
2014/03/09 职场文书
党的群众路线教育实践活动总结报告
2014/07/03 职场文书
放假通知
2015/04/14 职场文书
2015年乡镇纪检工作总结
2015/04/22 职场文书
幼儿园小班工作总结2015
2015/04/25 职场文书
党员身份证明材料
2015/06/19 职场文书
创业计划书之个人工作室
2019/08/22 职场文书
mysql事务对效率的影响分析总结
2021/10/24 MySQL
Python 数据可视化之Matplotlib详解
2021/11/02 Python