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 相关文章推荐
一个报数游戏js版(约瑟夫环问题)
Aug 05 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
Feb 23 Javascript
jquery Tab效果和动态加载的简单实例
Dec 11 Javascript
一个字符串反转函数可实现字符串倒序
Sep 15 Javascript
JS修改地址栏参数实例代码
Jun 14 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
Feb 27 Javascript
JS仿JQuery选择器功能
Mar 08 Javascript
JS创建Tag标签的方法详解
Jun 09 Javascript
JS实现加载时锁定HTML页面元素的方法
Jun 24 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
Sep 27 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
Mar 31 Javascript
ant design vue datepicker日期选择器中文化操作
Oct 28 Javascript
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
一个程序下载的管理程序(二)
2006/10/09 PHP
phpMyAdmin 链接表的附加功能尚未激活的问题
2010/08/01 PHP
一个显示效果非常不错的PHP错误、异常处理类
2014/03/21 PHP
php实现的任意进制互转类分享
2015/07/07 PHP
codeigniter实现get分页的方法
2015/07/10 PHP
利用“多说”制作留言板、评论系统
2015/07/14 PHP
Yii2如何批量添加数据
2016/05/17 PHP
PHPMAILER实现PHP发邮件功能
2018/04/18 PHP
获取URL地址中的文件名和参数的javascript代码
2009/09/02 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
2012/08/06 Javascript
jquery选择器、属性设置用法经验总结
2013/09/08 Javascript
jqueryUI里拖拽排序示例分析
2015/02/26 Javascript
详述JavaScript实现继承的几种方式(推荐)
2016/03/22 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
2021/02/25 Javascript
jQuery实现自动调用和触发某个事件的方法
2016/11/18 Javascript
Bootstrap fileinput组件封装及使用详解
2017/03/10 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
2017/10/18 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
2018/05/07 Javascript
vue 项目build错误异常的解决方法
2019/04/22 Javascript
vue cli安装使用less的教程详解
2019/07/12 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
2020/08/13 Javascript
python重试装饰器示例
2014/02/11 Python
Python中的Numpy入门教程
2014/04/26 Python
python入门教程之识别验证码
2017/03/04 Python
Python 专题三 字符串的基础知识
2017/03/19 Python
Django如何实现内容缓存示例详解
2017/09/24 Python
利用python3随机生成中文字符的实现方法
2017/11/24 Python
selenium获取当前页面的url、源码、title的方法
2019/06/12 Python
40行Python代码实现天气预报和每日鸡汤推送功能
2020/02/27 Python
世界上最大的冷却器制造商:Igloo Coolers
2019/07/23 全球购物
中科软笔试题和面试题
2014/10/07 面试题
Java中的异常处理机制的简单原理和应用
2013/04/27 面试题
爱国演讲稿500字
2014/05/04 职场文书
小区门卫岗位职责范本
2014/08/24 职场文书
七年级上册语文教学计划
2015/01/22 职场文书
应届毕业生自荐信
2015/03/04 职场文书