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 相关文章推荐
更正确的asp冒泡排序
May 24 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
Jun 14 Javascript
jquery提示效果实例分析
Nov 25 Javascript
简介JavaScript中toTimeString()方法的使用
Jun 12 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
Aug 08 Javascript
AngularJS基础 ng-dblclick 指令用法
Aug 01 Javascript
w3c编程挑战_初级脚本算法实战篇
Jun 23 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
Aug 12 Javascript
express express-session的使用小结
Dec 12 Javascript
Vuepress 搭建带评论功能的静态博客的实现
Feb 17 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
Apr 30 Javascript
基于Node.js搭建hexo博客过程详解
Jun 25 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
1 Tube Radio
2021/03/02 无线电
杏林同学录(四)
2006/10/09 PHP
PHP图片处理类 phpThumb参数用法介绍
2012/03/11 PHP
php递归创建目录的方法
2015/02/02 PHP
PHP实现扎金花游戏之大小比赛的方法
2015/03/10 PHP
详解PHP+AJAX无刷新分页实现方法
2015/11/03 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
实例:用 JavaScript 来操作字符串(一些字符串函数)
2007/02/15 Javascript
Javascript 获取链接(url)参数的方法
2009/02/15 Javascript
jQuery操作元素css样式的三种方法
2014/06/04 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
2016/01/23 Javascript
jQuery.Callbacks()回调函数队列用法详解
2016/06/14 Javascript
AngularJS 中的Promise --- $q服务详解
2016/09/14 Javascript
bootstrap vue.js实现tab效果
2017/02/07 Javascript
详解vue.js之props传递参数
2017/12/12 Javascript
vue2 前端搜索实现示例
2018/02/26 Javascript
如何在js代码中消灭for循环实例详解
2018/07/29 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
2018/08/28 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
2020/06/28 Javascript
django启动uwsgi报错的解决方法
2018/04/08 Python
详解django2中关于时间处理策略
2019/03/06 Python
PyQt5 QTableView设置某一列不可编辑的方法
2019/06/25 Python
Python提取转移文件夹内所有.jpg文件并查看每一帧的方法
2019/06/27 Python
解决python-docx打包之后找不到default.docx的问题
2020/02/13 Python
详解如何在pyqt中通过OpenCV实现对窗口的透视变换
2020/09/20 Python
HTML5新控件之日期和时间选择输入的实现代码
2018/09/13 HTML / CSS
使用HTML5加载音频和视频的实现代码
2020/11/30 HTML / CSS
天猫国际进口超市直营:官方直采,一站购齐
2017/12/11 全球购物
美国排名第一的泳池用品直接来源:In The Swim
2019/09/23 全球购物
德国专业木制品经销商:Holz-Direkt24
2019/12/26 全球购物
2014五一国际劳动节活动总结范文
2014/04/14 职场文书
考察现实表现材料
2014/05/19 职场文书
质监局领导班子对照检查材料思想汇报
2014/09/27 职场文书
2014年绩效考核工作总结
2014/12/11 职场文书
使用Golang的channel交叉打印两个数组的操作
2021/04/29 Golang
Python字典的基础操作
2021/11/01 Python