js中鼠标触发事件的简单实例
在这里用到了document 对象的两个事件 ：
onmousemove：当用户将鼠标划过对象时触发。
onmouseout：当用户将鼠标指针移出对象边界时触发。
html 代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#div1{
background-color:#FF0000;
height:100px;
width:200px;
}
#div2{
background-color: #000000;
height:100px;
width:200px;
}
#div3{
background-color: #003300;
height:100px;
width:200px;
}
</style>
<script language="javascript">
function chang1(cor,hig){
var div1= document.getElementById("div1");
div1.style.backgroundColor=cor;
div1.style.height=hig;
}
function chang2(cor,hig){
var div2= document.getElementById("div2");
div2.style.backgroundColor=cor;
div2.style.height=hig;
}
function chang3(cor,hig){
var div3= document.getElementById("div3");
div3.style.backgroundColor=cor;
div3.style.height=hig;
}
function changout1(cor,hig){
var div1= document.getElementById("div1");
div1.style.backgroundColor=cor;
div1.style.height=hig;
}
function changout2(cor,hig){
var div2= document.getElementById("div2");
div2.style.backgroundColor=cor;
div2.style.height=hig;
}
function changout3(cor,hig){
var div3= document.getElementById("div3");
div3.style.backgroundColor=cor;
div3.style.height=hig;
}
</script>
</head>
<body>
<div id ="div1" onmousemove="chang1('blue','200px')" onmouseout="changout1('#FF0000','100px')">
</div>
<div id ="div2" onmousemove="chang2('pink','200px')" onmouseout="changout2('#000000','100px')">
</div>
<div id ="div3" onmousemove="chang3('orange','200px')" onmouseout="changout3('#003300','100px')">
</div>
</body>
</html>
分享到：
相关推荐
61. js仿淘宝网鼠标经过缩略图放大图片效果的jQuery Fancy Hover Effect完整实例 62. Supersized jQuery全屏相册图片自动切换插件 63. [荐]jquery仿flash漂亮横向图片滚动效果完整版(兼容性非常好) 64. [荐]...
61. js仿淘宝网鼠标经过缩略图放大图片效果的jQuery Fancy Hover Effect完整实例 62. Supersized jQuery全屏相册图片自动切换插件 63. [荐]jquery仿flash漂亮横向图片滚动效果完整版(兼容性非常好) 64. [荐]...
6.3 表格实例二：鼠标经过时变色的表格 6.4 表格实例三：日历 6.5 CSS与表单 6.6 综合实例一：直接输入的Excel表格 6.7 综合实例二：模仿新浪网民调查问卷 第7章 用CSS设置页面和浏览器...
29.jQuery实现图片变色特效插件与实例下载如jquery图片变灰色 30.jquery实现图片可拖动展示的实例下载 31.jQuery实现拖动滚动条的缩略图排列插件下载 32.jQuery实现焦点图片Flash自动平滑渐变效果 33....
6.3 表格实例二：鼠标经过时变色的表格 6.4 表格实例三：日历 6.5 CSS与表单 6.6 综合实例一：直接输入的Excel表格 6.7 综合实例二：模仿新浪网民调查问卷 第7章 用CSS设置页面和...
1.打开网页，网页效果如图所示 代码如下： <!DOCTYPE html> <html> <head> <meta charset=utf-8>...随机变色<...<div id=box></div> [removed] // 获取元素对象 var obj1 = do
6.3 表格实例二：鼠标经过时变色的表格 6.4 表格实例三：日历 6.5 CSS与表单 6.5.1 表单中的元素 6.5.2 像文字一样的按钮 6.5.3 七彩的下拉菜单 6.6 综合实例一：直接输入的Excel表格 6.7 ...
61. js仿淘宝网鼠标经过缩略图放大图片效果的jQuery Fancy Hover Effect完整实例 62. Supersized jQuery全屏相册图片自动切换插件 63. [荐]jquery仿flash漂亮横向图片滚动效果完整版(兼容性非常好) 64. [荐]...
6.3 表格实例二：鼠标经过时变色的表格 6.4 表格实例三：日历 6.5 CSS与表单 6.6 综合实例一：直接输入的Excel表格 6.7 综合实例二：模仿新浪网民调查问卷 第7章 用CSS设置页面和浏览器...
6.3 表格实例二：鼠标经过时变色的表格 6.4 表格实例三：日历 6.5 CSS与表单 6.6 综合实例一：直接输入的Excel表格 6.7 综合实例二：模仿新浪网民调查问卷 第7章 用CSS设置页面和浏览器...
JS 实例 特效整理的各种JS特效 实例，时钟，跑马灯，弹出层，下拉菜单，隔行变色，幻灯片焦点图，图片点击放大，图片局部放大，div绝对居中等等etc
6.3 表格实例二：鼠标经过时变色的表格 6.4 表格实例三：日历 6.5 CSS与表单 6.6 综合实例一：直接输入的Excel表格 6.7 综合实例二：模仿新浪网民调查问卷 第7章 用CSS设置页面和浏览器...
1.21 用JavaScript随机修改页面的标题 1.22 判断网页加载完毕 1.23 嵌入网页的播放器 1.24 设置指定网页为主页 1.25 使用JavaScript传递页面参数 1.26 页面被冻结 第 2章 按钮特效 2.1 页面刷新按钮 2.2 按回车调用...
实例134 简单文字变色 214 实例135 文字变色 215 实例136 变换的文字 216 实例137 描边文字 217 实例138 霓虹灯文字 218 实例139 追逐点亮的文字 219 实例140 萤光文字 220 实例141 发光文字的闪烁效果 221 实例142 ...
1.21 用JavaScript随机修改页面的标题 1.22 判断网页加载完毕 1.23 嵌入网页的播放器 1.24 设置指定网页为主页 1.25 使用JavaScript传递页面参数 1.26 页面被冻结 第 2章 按钮特效 2.1 页面刷新按钮 2.2 按回车调用...
6.3 表格实例二：鼠标经过时变色的表格 6.4 表格实例三：日历 6.5 CSS与表单 6.6 综合实例一：直接输入的Excel表格 6.7 综合实例二：模仿新浪网民调查问卷 第7章 用CSS设置页面和浏览器...
网页上的某个区域，当鼠标移入时改变样式，鼠标移出时自动恢复样式，可以是一个图片的边框，也可以一段文字变色，掌握了原理，貌似可以做更加丰富生动的网页互动效果，这里主要是利用Js控制Hover标签所在的DIV产生...
实例化时有三个必要参数：容器对象、控制层、图片地址： var ic = new ImgCropper("bgDiv", "dragDiv", "1.jpg"); 有以下这些可选参数和属性： 属性:默认值//说明 Opacity: 50,//透明度(0到100) Color: "",//背景...
实例代码： 第1章（\cha01） 1.1.htm 自动类型转换 1.2.htm 显式类型转换 1.3.htm 提升基本类型为对象 第2章（\cha02） 2.1.htm if语句 2.2.htm switch语句 2.3....