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 相关文章推荐
修改发贴的编辑功能
Mar 07 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 06 Javascript
jQuery源码中的chunker 正则过滤符分析
Jul 31 Javascript
B/S模式项目中常用的javascript汇总
Dec 17 Javascript
js实现按一下删除键删除整个单词附demo
Sep 05 Javascript
jquery获取复选框的值的简单实例
May 26 Javascript
Bootstrap table使用方法详细介绍
Dec 09 Javascript
JavaScript实现Fly Bird小游戏
Dec 15 Javascript
node文件上传功能简易实现代码
Jun 16 Javascript
Vue实现移动端左右滑动效果的方法
Nov 27 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
Jul 27 Javascript
Vue 组件复用多次自定义参数操作
Jul 27 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
php对图像的各种处理函数代码小结
2013/07/08 PHP
PHP小技巧之函数重载
2014/06/02 PHP
php自动载入类用法实例分析
2016/06/24 PHP
PHP实现支付宝即时到账功能
2016/12/21 PHP
jQuery Ajax使用 全解析
2010/12/15 Javascript
DIV始终居中的js代码
2014/02/17 Javascript
js中window.open的参数及注意注意事项
2016/07/06 Javascript
老生常谈JavaScript中的this关键字
2016/10/01 Javascript
JavaScript实现的XML与JSON互转功能详解
2017/02/16 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
2017/06/01 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
2017/11/27 Javascript
在js代码拼接dom对象到页面上的模板总结
2018/10/21 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
2018/12/20 Javascript
jQuery无冲突模式详解
2019/01/17 jQuery
Android 自定义view仿微信相机单击拍照长按录视频按钮
2019/07/19 Javascript
vue.js实现左边导航切换右边内容
2019/10/21 Javascript
微信小程序商品详情页底部弹出框
2019/11/22 Javascript
微信小程序实现上传多张图片、删除图片
2020/07/29 Javascript
实例讲解React 组件生命周期
2020/07/08 Javascript
jQuery插件实现图片轮播效果
2020/10/19 jQuery
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
[48:47]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python中关于日期时间处理的问答集锦
2013/03/08 Python
python字符串中匹配数字的正则表达式
2019/07/03 Python
解决安装python3.7.4报错Can''t connect to HTTPS URL because the SSL module is not available
2019/07/31 Python
pandas 对group进行聚合的例子
2019/12/27 Python
Python列表解析操作实例总结
2020/02/26 Python
jupyter notebook 增加kernel教程
2020/04/10 Python
Python二元算术运算常用方法解析
2020/09/15 Python
python 使用csv模块读写csv格式文件的示例
2020/12/02 Python
公积金转移接收函
2014/01/11 职场文书
宿舍保安职务说明书
2014/02/25 职场文书
售后服务承诺书怎么写
2014/05/21 职场文书
写给老婆的保证书
2015/02/27 职场文书
回复函范文
2015/07/14 职场文书
婚前协议书怎么写,才具有法律效力呢 ?
2019/06/28 职场文书