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" οnmοusemοve="chang1('blue','200px')" οnmοuseοut="changout1('#FF0000','100px')">
</div>
<div id ="div2" οnmοusemοve="chang2('pink','200px')" οnmοuseοut="changout2('#000000','100px')">
</div>
<div id ="div3" οnmοusemοve="chang3('orange','200px')" οnmοuseοut="changout3('#003300','100px')">
</div>
</body>
</html>
434
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
