js "div变色" 的容易实例
日期：2014-05-16 浏览次数：20305 次
js "div变色" 的简单实例
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>
?
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
