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 相关文章推荐
强制设为首页代码
Jun 19 Javascript
jQuery 方法大全方便学习参考
Feb 25 Javascript
jquery multiSelect 多选下拉框
Jul 09 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
Dec 26 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
Dec 30 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
Dec 14 Javascript
JS实现的系统调色板完整实例
Dec 21 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
Feb 28 Javascript
JS实现动态给标签控件添加事件的方法示例
May 13 Javascript
Node.js 使用jade模板引擎的示例
May 11 Javascript
vue导出html、word和pdf的实现代码
Jul 31 Javascript
Vue路由的模块自动化与统一加载实现
Jun 05 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开发环境配置(MySQL数据库安装图文教程)
2010/04/28 PHP
php插入中文到sqlserver 2008里出现乱码的解决办法分享
2012/07/19 PHP
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
PHP文件缓存类示例分享
2015/01/30 PHP
php仿微信红包分配算法的实现方法
2016/05/13 PHP
PHP弱类型的安全问题详细总结
2016/09/25 PHP
PHP实现简单日历类编写
2020/08/28 PHP
预加载css或javascript的js代码
2010/04/23 Javascript
javascript常用代码段搜集
2014/12/04 Javascript
JavaScript中消除闭包的一般方法介绍
2015/03/16 Javascript
使用纯javascript实现放大镜效果
2015/03/18 Javascript
JS实现动态移动层及拖动浮层关闭的方法
2015/04/30 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
2015/12/05 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
2016/08/03 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
2016/11/15 Javascript
详解ES6中的let命令
2020/04/05 Javascript
bootstrap css样式之表单
2017/01/19 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
2017/03/13 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
2017/03/13 Javascript
jquery实现提示语淡入效果
2017/05/05 jQuery
js求数组中全部数字可拼接出的最大整数示例代码
2017/08/25 Javascript
react-native android状态栏的实现
2018/06/15 Javascript
Vue下路由History模式打包后页面空白的解决方法
2018/06/29 Javascript
layui-table对返回的数据进行转变显示的实例
2019/09/04 Javascript
vue等两个接口都返回结果再执行下一步的实例
2020/09/08 Javascript
JavaScript this关键字的深入详解
2021/01/14 Javascript
解决python报错MemoryError的问题
2018/06/26 Python
Python shelve模块实现解析
2019/08/28 Python
Matplotlib scatter绘制散点图的方法实现
2020/01/02 Python
浅谈django 重载str 方法
2020/05/19 Python
Python类super()及私有属性原理解析
2020/06/15 Python
分享一个python的aes加密代码
2020/12/22 Python
AmazeUI中各种的导航式菜单与解决方法
2020/08/19 HTML / CSS
大学生旷课检讨书
2014/01/22 职场文书
高校十八大报告感想
2014/01/27 职场文书
2015年党员创先争优公开承诺书
2015/04/27 职场文书