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 错误处理的几种方法
Jun 13 Javascript
jquery tab插件精简版分享
Sep 10 Javascript
Javascript this 的一些学习总结
Aug 02 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
Dec 05 Javascript
jQuery中index()方法用法实例
Dec 27 Javascript
原生javascript实现隔行换色
Jan 04 Javascript
bootstrap table 服务器端分页例子分享
Feb 10 Javascript
jQuery中hover方法和toggle方法使用指南
Feb 27 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
Jan 30 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
Sep 26 Javascript
koa router 多文件引入的方法示例
May 22 Javascript
jquery实现聊天机器人
Feb 08 jQuery
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将access数据库转换到mysql数据库的方法
2014/12/24 PHP
Laravel 5 框架入门(三)
2015/04/09 PHP
PHP+Mysql+jQuery中国地图区域数据统计实例讲解
2015/10/10 PHP
php session的锁和并发
2016/01/22 PHP
详解PHP的抽象类和抽象方法以及接口总结
2019/03/15 PHP
firefo xml 读写实现js代码
2009/06/11 Javascript
对象特征检测法判断浏览器对javascript对象的支持
2009/07/25 Javascript
javaScript 数值型和字符串型之间的转换
2009/07/25 Javascript
最常用的12种设计模式小结
2011/08/09 Javascript
javascript错误的认识不用关心内存管理
2012/12/15 Javascript
javascript不同类型数据之间的运算的转换方法
2014/02/13 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
2014/06/20 Javascript
Js可拖拽放大的层拖动特效实现方法
2015/02/25 Javascript
jquery合并表格中相同文本的相邻单元格
2015/07/17 Javascript
js实现文本框输入文字个数限制代码
2015/12/25 Javascript
JavaScript数据结构与算法之集合(Set)
2016/01/29 Javascript
Vue.JS入门教程之处理表单
2016/12/01 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
2016/12/26 Javascript
使用nodejs爬取前程无忧前端技能排行
2017/05/06 NodeJs
angularjs之$timeout指令详解
2017/06/13 Javascript
vue.js,ajax渲染页面的实例
2018/02/11 Javascript
[45:44]完美世界DOTA2联赛PWL S2 FTD vs PXG 第一场 11.27
2020/12/01 DOTA
Python中map和列表推导效率比较实例分析
2015/06/17 Python
基于python代码实现简易滤除数字的方法
2018/07/17 Python
Python3实现的旋转矩阵图像算法示例
2019/04/03 Python
python 使用while循环输出*组成的菱形实例
2020/04/12 Python
python 如何把docker-compose.yaml导入到数据库相关条目里
2021/01/15 Python
String、StringBuffer、StringBuilder有区别
2015/09/18 面试题
临床医师专业个人自我评价
2014/01/08 职场文书
颐和园英文导游词
2015/01/30 职场文书
小学学习委员竞选稿
2015/11/20 职场文书
《夸父追日》教学反思
2016/02/20 职场文书
Django项目如何获得SSL证书与配置HTTPS
2021/04/30 Python
Java用自带的Image IO给图片添加水印
2021/06/15 Java/Android
MySQL数据库中varchar类型的数字比较大小的方法
2021/11/17 MySQL
win10截图快捷键win+shift+s没有反应无法截图怎么解决?
2022/08/14 数码科技