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调出上下文菜单的实例
Dec 17 Javascript
jquery.serialize() 函数语法及简单实例
Jul 08 Javascript
谈谈对JavaScript原生拖放的深入理解
Sep 20 Javascript
Cpage.js给组件绑定事件的实现代码
Aug 31 Javascript
Vue渲染函数详解
Sep 15 Javascript
基于VUE.JS的移动端框架Mint UI的使用
Oct 11 Javascript
js判断传入时间和当前时间大小实例(超简单)
Jan 11 Javascript
vue移动端UI框架实现QQ侧边菜单组件
Mar 09 Javascript
微信小程序项目实践之验证码倒计时功能
Jul 18 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
Sep 21 Javascript
JavaScript中引用vs复制示例详析
Dec 06 Javascript
微信小程序实现点击按钮后修改颜色
Dec 05 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
php在字符串中查找另一个字符串
2008/11/19 PHP
php simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
探讨PHP中this,self,parent的区别详解
2013/06/08 PHP
PHP中的socket_read和socket_recv区别详解
2015/02/09 PHP
PHP设计模式之组合模式定义与应用示例
2020/02/01 PHP
Javascript实例教程(19) 使用HoTMetal(1)
2006/12/23 Javascript
个人总结的一些关于String、Function、Array的属性和用法
2007/01/10 Javascript
AJAX分页的代码(后台asp.net)
2011/02/14 Javascript
javascript刷新父页面的各种方法汇总
2014/09/03 Javascript
js实现宇宙星空背景效果的方法
2015/03/03 Javascript
谈谈javascript中使用连等赋值操作带来的问题
2015/11/26 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
2016/02/18 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
关于axios返回空对象的问题解决
2017/04/04 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
2018/03/01 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
2018/12/11 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
2019/09/03 Javascript
Layui事件监听的实现(表单和数据表格)
2019/10/17 Javascript
Vue解析带html标签的字符串为dom的实例
2019/11/13 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
2019/11/14 Javascript
python自动化测试之连接几组测试包实例
2014/09/28 Python
使用Python标准库中的wave模块绘制乐谱的简单教程
2015/03/30 Python
Python实现的中国剩余定理算法示例
2017/08/05 Python
手把手教你如何安装Pycharm(详细图文教程)
2018/11/28 Python
python3的pip路径在哪
2020/06/23 Python
Pytorch损失函数nn.NLLLoss2d()用法说明
2020/07/07 Python
使用Canvas操作像素的方法
2018/06/14 HTML / CSS
俄罗斯旅游网站:Tripadvisor俄罗斯
2017/03/21 全球购物
Baby Tulai澳大利亚:美国婴儿背带品牌
2018/10/15 全球购物
REN Clean Skincare官网:英国本土有机护肤品牌
2019/02/23 全球购物
美国厨房和园艺工具网上商店:Nestneed
2019/08/24 全球购物
幼儿园园长岗位职责
2013/11/26 职场文书
个人自荐信
2013/12/05 职场文书
音乐节策划方案
2014/06/09 职场文书
库房管理员岗位职责
2015/02/12 职场文书
运动会加油稿30字
2015/07/21 职场文书