javascript编程起步(第五课)


Posted in Javascript onJanuary 10, 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 贪吃蛇实现代码
Nov 22 Javascript
Javascript Object.extend
May 18 Javascript
javascript多种数据类型表格排序代码分析
Sep 11 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
May 20 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
Jan 08 Javascript
基于Node.js实现nodemailer邮件发送
Jan 26 Javascript
浅谈react.js 之 批量添加与删除功能
Apr 17 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
Jan 22 Javascript
layui table设置前台过滤转义等方法
Aug 17 Javascript
vue 实现走马灯效果
Oct 28 Javascript
vue:el-input输入时限制输入的类型操作
Aug 05 Javascript
vue编写简单的购物车功能
Jan 08 Vue.js
javascript编程起步(第四课)
Jan 10 #Javascript
jquery简单体验
Jan 10 #Javascript
java script编程起步(第三课)
Jan 10 #Javascript
javascript编程起步(第二课)
Jan 10 #Javascript
javascript编程起步(第一课)
Jan 10 #Javascript
javascript 对象的定义方法
Jan 10 #Javascript
Prototype1.5 rc2版指南最后一篇之Position
Jan 10 #Javascript
You might like
PHP开发的一些注意点总结
2010/10/12 PHP
php实现MD5加密16位(不要默认的32位)
2013/08/12 PHP
PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁
2014/06/09 PHP
自己写的兼容低于PHP 5.5版本的array_column()函数
2014/10/24 PHP
php+ajax无刷新分页实例详解
2015/12/07 PHP
php微信开发之百度天气预报
2016/11/18 PHP
php两点地理坐标距离的计算方法
2018/12/29 PHP
用javascript实现自定义标签
2007/05/08 Javascript
jquery $.ajax()取xml数据的小问题解决方法
2010/11/20 Javascript
用jquery实现输入框获取焦点消失文字
2013/04/27 Javascript
理解javascript对象继承
2016/04/17 Javascript
js判断主流浏览器类型和版本号的简单实现代码
2016/05/26 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
JQuery 设置checkbox值二次无效的解决方法
2016/07/22 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
2016/08/05 Javascript
Ajax使用原生态JS验证用户名是否存在
2020/05/26 Javascript
原生js更改css样式的两种方式
2017/03/15 Javascript
关于layui 弹出层一闪而过就消失的解决方法
2019/09/09 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
2019/10/25 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
2020/08/24 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
2020/08/28 Javascript
对PyQt5中的菜单栏和工具栏实例详解
2019/06/20 Python
python报错: 'list' object has no attribute 'shape'的解决
2020/07/15 Python
Python实现自动签到脚本功能
2020/08/20 Python
html5理解head_动力节点Java学院整理
2017/07/13 HTML / CSS
html5需遵循的6个设计原则
2016/04/27 HTML / CSS
喜诗官方在线巧克力店:See’s Candies
2017/01/01 全球购物
施华洛世奇英国官网:SWAROVSKI英国
2017/03/13 全球购物
YSL圣罗兰美妆官方旗舰店:购买YSL口红
2018/04/16 全球购物
为什么要使用servlet
2016/01/17 面试题
理货员的岗位职责
2013/11/23 职场文书
应届大学毕业生找工作的求职信范文
2013/11/29 职场文书
高中同学会活动方案
2014/08/14 职场文书
2014年市场部工作总结
2014/11/25 职场文书
PyCharm配置KBEngine快速处理代码提示冲突、配置命令问题
2021/04/03 Python
引用计数法和root搜索算法以及JVM中判定对象需要回收的方法
2022/04/19 Java/Android