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 相关文章推荐
Web前端开发工具——bower依赖包管理工具
Mar 29 Javascript
JavaScript数组实现数据结构中的队列与堆栈
May 26 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
Dec 13 Javascript
jQuery实现验证码功能
Mar 17 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
Aug 29 Javascript
ES6学习教程之块级作用域详解
Oct 09 Javascript
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
使用JSON格式提交数据到服务端的实例代码
Apr 01 Javascript
Vue.js 实现数据展示全部和收起功能
Sep 05 Javascript
Vue路由前后端设计总结
Aug 06 Javascript
微信公众号开发之微信支付代码记录的实现
Oct 16 Javascript
Js数组扁平化实现方法代码总汇
Nov 11 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 文章中的远程图片采集到本地的代码
2009/07/30 PHP
PHP explode()函数用法、切分字符串
2012/10/03 PHP
PHP中auto_prepend_file与auto_append_file用法实例分析
2014/09/22 PHP
PHP判断是否连接上网络的方法
2015/07/01 PHP
php倒计时出现-0情况的解决方法
2016/07/28 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
jquery实现点击弹出层效果的简单实例
2014/03/03 Javascript
js toFixed()方法的重写实现精度的统一
2014/03/06 Javascript
用javascript读取xml文件读取节点数据
2014/08/12 Javascript
js 点击a标签 获取a的自定义属性方法
2016/11/21 Javascript
详解Angular Reactive Form 表单验证
2017/07/06 Javascript
IntersectionObserver实现图片懒加载的示例
2017/09/29 Javascript
完美解决axios跨域请求出错的问题
2018/02/05 Javascript
浅析vue.js数组的变异方法
2018/06/30 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
2018/09/05 Javascript
JS获取动态添加元素的方法详解
2019/07/31 Javascript
浅谈vue异步数据影响页面渲染
2019/10/29 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
2019/11/09 Javascript
微信小程序连续签到7天积分获得功能的示例代码
2020/08/20 Javascript
小程序点餐界面添加购物车左右摆动动画
2020/09/23 Javascript
JS画布动态实现黑客帝国背景效果
2020/11/08 Javascript
Python实现高效求解素数代码实例
2015/06/30 Python
Python开发SQLite3数据库相关操作详解【连接,查询,插入,更新,删除,关闭等】
2017/07/27 Python
在python中pandas的series合并方法
2018/11/12 Python
将pip源更换到国内镜像的详细步骤
2019/04/07 Python
解决Pytorch 训练与测试时爆显存(out of memory)的问题
2019/08/20 Python
Python用来做Web开发的优势有哪些
2020/08/05 Python
python+selenium爬取微博热搜存入Mysql的实现方法
2021/01/27 Python
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
2016/10/23 HTML / CSS
做一个能自适应高度的textarea的示例代码
2019/09/06 HTML / CSS
银行会计财务工作个人的自我评价
2013/10/29 职场文书
培训协议书范本
2014/04/22 职场文书
2014年群众路线党员自我评议
2014/09/24 职场文书
2014年科技工作总结
2014/11/26 职场文书
Python中OpenCV实现简单车牌字符切割
2021/06/11 Python
浅析NIO系列之TCP
2021/06/15 Java/Android