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 相关文章推荐
基于jquery的时间段实现代码
Aug 02 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
Apr 19 Javascript
纯JS实现根据CSS的class选择DOM
Mar 22 Javascript
Jquery插件分享之气泡形提示控件grumble.js
May 20 Javascript
利用jQuery实现可以编辑的表格
May 26 Javascript
如何正确使用javascript 来进行我们的程序开发
Jun 23 Javascript
js匿名函数作为函数参数详解
Jun 01 Javascript
Angular 开发学习之Angular CLI的安装使用
Dec 31 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
Oct 26 Javascript
vue设计一个倒计时秒杀的组件详解
Apr 06 Javascript
vue路由对不同界面进行传参及跳转的总结
Apr 20 Javascript
JavaScript实现简单的音乐播放器
Aug 14 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
桌面中心(一)创建数据库
2006/10/09 PHP
如何将数据从文本导入到mysql
2006/10/09 PHP
Zend Studio for Eclipse的java.lang.NullPointerException错误的解决方法
2008/12/06 PHP
使用php将某个目录下面的所有文件罗列出来的方法详解
2013/06/21 PHP
Symfony2创建基于域名的路由相关示例
2016/11/14 PHP
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
2006/09/22 Javascript
Mootools 1.2教程 同时进行多个形变动画
2009/09/15 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/03 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
2012/02/03 Javascript
多种方法实现JS动态添加事件
2013/11/01 Javascript
jquery序列化方法实例分析
2015/06/10 Javascript
微信小程序 Flex布局详解
2016/10/09 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
2017/01/08 Javascript
AngularJS中的拦截器实例详解
2017/04/07 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
2017/06/13 Javascript
jQuery插件jsonview展示json数据
2018/05/26 jQuery
React Native 混合开发多入口加载方式详解
2019/09/23 Javascript
[01:32]DOTA2上海特锦赛现场采访:最想COS的英雄
2016/03/25 DOTA
[00:52]DOTA2齐天大圣预告片
2016/08/13 DOTA
[29:59]完美世界DOTA2联赛PWL S3 Forest vs access 第二场 12.11
2020/12/13 DOTA
树莓派中python获取GY-85九轴模块信息示例
2013/12/05 Python
详解Django中的权限和组以及消息
2015/07/23 Python
Python实现扩展内置类型的方法分析
2017/10/16 Python
python 删除非空文件夹的实例
2018/04/26 Python
tf.concat中axis的含义与使用详解
2020/02/07 Python
用python按照图像灰度值统计并筛选图片的操作(PIL,shutil,os)
2020/06/04 Python
使用python tkinter开发一个爬取B站直播弹幕工具的实现代码
2021/02/07 Python
html5指南-7.geolocation结合google maps开发一个小的应用
2013/01/07 HTML / CSS
台湾旅游网站:雄狮旅游网
2017/08/16 全球购物
应聘自荐书
2013/10/08 职场文书
试用期工作表现自我评价
2015/03/06 职场文书
外贸英文求职信范文
2015/03/19 职场文书
同意转租证明
2015/06/24 职场文书
导游词之舟山普陀山
2019/11/06 职场文书
一文搞懂python异常处理、模块与包
2021/06/26 Python
Anaconda安装pytorch和paddle的方法步骤
2022/04/03 Python