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 ajax传递复杂参数给WebService的实现代码
Aug 08 Javascript
jquery.tmpl JQuery模板插件
Oct 10 Javascript
jquery控制显示服务器生成的图片流
Aug 04 Javascript
JS获取子窗口中返回的数据实现方法
May 28 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
Feb 18 Javascript
javascript防篡改对象实例详解
Apr 10 Javascript
微信小程序异步处理详解
Nov 10 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
Nov 18 Javascript
详解微信小程序审核不通过的解决方法
Jan 17 Javascript
vue非父子组件通信问题及解决方法
Jun 11 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
Feb 22 Javascript
OpenLayers3实现图层控件功能
Sep 25 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
支持php4、php5的mysql数据库操作类
2008/01/10 PHP
php程序总是提示验证码输入有误解决方案
2015/01/07 PHP
php扩展开发入门demo示例
2019/09/23 PHP
基于laravel Request的所有方法详解
2019/09/29 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
Swoole扩展的6种模式深入详解
2021/03/04 PHP
FormValid0.5版本发布,带ajax自定义验证例子
2007/08/17 Javascript
利用js对象弹出一个层
2008/03/26 Javascript
Jquery 基础学习笔记
2009/05/29 Javascript
几个有趣的Javascript Hack
2010/07/24 Javascript
js类型检查实现代码
2010/10/29 Javascript
jquery实现点击变换导航样式的方法
2015/08/31 Javascript
详解JavaScript中的4种类型识别方法
2015/09/14 Javascript
JS实现黑色大气的二级导航菜单效果
2015/09/18 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
2015/12/04 Javascript
Svg.js实例教程及使用手册详解(一)
2016/05/16 Javascript
不同js异步函数同步的实现方法
2016/05/28 Javascript
JS处理一些简单计算题
2018/02/24 Javascript
jQuery插件jsonview展示json数据
2018/05/26 jQuery
jQuery实现表单动态加减、ajax表单提交功能
2018/06/08 jQuery
vue项目上传Github预览的实现示例
2018/11/06 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
2019/03/04 Javascript
微信小程序人脸识别功能代码实例
2019/05/07 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
2020/02/27 Javascript
JQuery事件冒泡和默认行为代码实例
2020/05/13 jQuery
对python3 urllib包与http包的使用详解
2018/05/10 Python
numpy.random.shuffle打乱顺序函数的实现
2019/09/10 Python
tensorflow 保存模型和取出中间权重例子
2020/01/24 Python
幼儿园元旦亲子活动方案
2014/02/17 职场文书
软件项目实施计划书
2014/05/02 职场文书
房屋租赁合同协议书范本
2014/10/19 职场文书
五年级小学生评语
2014/12/26 职场文书
幼儿园中班个人总结
2015/02/28 职场文书
升学宴家长答谢词
2015/09/29 职场文书
如何写好一份优秀的工作总结?
2019/06/21 职场文书
HTML 里 img 元素的 src 和 srcset 属性的区别详解
2023/05/21 HTML / CSS