javascript编程起步(第五课)
来源:互联网 发布:淘宝店铺宣传软文范例 编辑:程序博客网 时间:2024/05/16 12:26
转自javascript.com.cn(放在这里主要是方便我自己的学习,如果不允许的话,请通知我,我将自行删除)
今天的课程就轻松一下,学习点能见到效果的。
主要内容就是基于鼠标的事件,有如下几种:
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多。
(需要注意的是:启动这个事件处理过程存在一个问题,就是它有可能会屏蔽其他事件。另外还增加了页面的处理时间,应尽量少用。)
- javascript编程起步(第五课)
- javascript编程起步(第一课)
- javascript编程起步(第二课)
- javascript编程起步(第三课)
- javascript编程起步(第四课)
- javascript编程起步(一)
- javascript编程起步(二)
- javascript编程起步
- JavaScript编程起步
- JavaScript 编程起步
- javascript第五课-javascript
- java串口编程(起步)
- 第一章 JavaScript语言概述(中)----JavaScript起步编程
- 编程起步
- 编程起步
- JavaScript DOM编程艺术--第五章
- Python起步之图形编程(一)
- 第五课 面向对象编程(三)
- javascript编程起步(第二课)
- 放假了
- javascript编程起步(第三课)
- javascript编程起步(第四课)
- [软件发布]:Java的数据库应用实例——汽车销售管理系统(JDBC+MSSQL)
- javascript编程起步(第五课)
- 今天是我的生日!
- 你看着左边,天堂在你右边
- 我的第一份文档
- 将gridview的内容导出到excel中去
- 新闻组备忘
- 多线程中暂停与挂起方法suspend sleep join 区别及使用指导 (原创)
- my sitemap
- 写给黑心的铁路部门