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实现页面自适应
Jan 19 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
Dec 29 Javascript
js跨域问题浅析及解决方法优缺点对比
Nov 08 Javascript
node.js中的fs.open方法使用说明
Dec 17 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 Javascript
js实现图片从左往右渐变切换效果的方法
Feb 06 Javascript
JavaScript实现的一个倒计时的类
Mar 12 Javascript
基于jQuery实现的QQ表情插件
Aug 25 Javascript
JavaScript中的this,call,apply使用及区别详解
Jan 29 Javascript
JS实现提交表单前的数字及邮箱校检功能
Nov 13 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
Nov 02 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
Jul 28 Javascript
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
如何提高MYSQL数据库的查询统计速度 select 索引应用
2007/04/11 PHP
php函数的常用方法及注意之处小结
2011/07/10 PHP
php中将网址转换为超链接的函数
2011/09/02 PHP
PHP+jQuery 注册模块的改进(一):验证码存入SESSION
2014/10/14 PHP
windows平台中配置nginx+php环境
2015/12/06 PHP
php网页版聊天软件实现代码
2016/08/12 PHP
利用PHPExcel实现Excel文件的写入和读取
2017/04/26 PHP
在php7中MongoDB实现模糊查询的方法详解
2017/05/03 PHP
PHP开发实现快递查询功能详解
2019/04/08 PHP
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
2010/11/09 Javascript
用box固定长宽实现图片自动轮播js代码
2014/06/09 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
2015/02/20 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
2015/10/14 Javascript
requireJS使用指南
2016/04/27 Javascript
关于JSON与JSONP简单总结
2016/08/16 Javascript
vue双向绑定的简单实现
2016/12/22 Javascript
Angular4 Select选择改变事件的方法
2018/10/09 Javascript
小程序最新获取用户昵称和头像的方法总结
2019/09/23 Javascript
手动实现vue2.0的双向数据绑定原理详解
2021/02/06 Vue.js
JavaScript仿京东轮播图效果
2021/02/25 Javascript
[09:43]DOTA2每周TOP10 精彩击杀集锦vol.5
2014/06/25 DOTA
[00:32]2018DOTA2亚洲邀请赛Newbee出场
2018/04/03 DOTA
tensor和numpy的互相转换的实现示例
2019/08/02 Python
将matplotlib绘图嵌入pyqt的方法示例
2020/01/08 Python
Python更换pip源方法过程解析
2020/05/19 Python
通过代码实例了解Python3编程技巧
2020/10/13 Python
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
html5 canvas简单封装一个echarts实现不了的饼图
2018/06/12 HTML / CSS
女士鞋子、包包和服装在线,第一款10美元:ShoeDazzle
2019/07/26 全球购物
2014年创先争优活动总结
2014/05/04 职场文书
小学语文国培研修日志
2015/11/13 职场文书
Python Numpy之linspace用法说明
2021/04/17 Python
详解如何在Canvas中添加事件的方法
2021/04/17 Javascript
Mybatis是这样防止sql注入的
2021/12/06 Java/Android
redis sentinel监控高可用集群实现的配置步骤
2022/04/01 Redis
详解Nginx的超时keeplive_timeout配置步骤
2022/05/25 Servers