目录标题
事件
onmousemove 移动鼠标经过(这里鼠标没有录制上)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
.sty1{background-color:#aaa;height:200px;width:200px}
</style>
</head>
<body>
<div id = "div1" class = "sty1" onclick = "m1()" onmousemove = "m2()"></div>
</body>
<script>
function m1(){
alert("哈哈哈");
}
function m2(){
var x = document.getElementById("div1");
x.style.backgroundColor = "#2ac";
}
</script>
</html>
alert 弹窗
onmousedown onmouseup鼠标按住与松开
onmousedown 鼠标按住触发
onmouseup 鼠标松开触发
<body>
<div id = "div1" class = "sty1" onclick = "m1()" onmousemove = "m2()"></div>
<div id = "div2" class = "sty1" onmousedown="m4()" onmouseup="m3()"></div>
</body>
<script>
function m1(){
alert("哈哈哈");
}
function m2(){
var x = document.getElementById("div1");
x.style.backgroundColor = "#2ac";
}
function m3(){
var x = document.getElementById("div2");
x.style.backgroundColor = "#aac";
}
function m4(){
var x = document.getElementById("div2");
x.style.backgroundColor = "#2ac";
}
</script>
onmouseover onmouseout 鼠标覆盖和离开
onmouseover 鼠标覆盖
onmouseout 鼠标离开
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
.sty1{background-color:#aaa;height:200px;width:200px;margin-top:20px;}
</style>
</head>
<body>
<div id = "div1" class = "sty1" onclick = "m1()" onmousemove = "m2()"></div>
<div id = "div2" class = "sty1" onmousedown="m4()" onmouseup="m3()"></div>
<div id = "div3" class = "sty1" onmouseover="m5()" onmouseout="m6()"></div>
</body>
<script>
function m1(){
alert("哈哈哈");
}
function m2(){
var x = document.getElementById("div1");
x.style.backgroundColor = "#2ac";
}
function m3(){
var x = document.getElementById("div2");
x.style.backgroundColor = "#aaa";
}
function m4(){
var x = document.getElementById("div2");
x.style.backgroundColor = "#2ac";
}
function m5(){
var x = document.getElementById("div3");
x.style.backgroundColor = "#2ac";
}
function m6(){
var x = document.getElementById("div3");
x.style.backgroundColor = "#aaa";
}
</script>
</html>
子块的 display 隐藏与消失
display:none 隐藏
display:block 显示
注意:在子块可以比其父块大,而且因为其为子块onmouseover 鼠标覆盖在子块上也会触发动作的。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
.sty1{background-color:#aaa;height:200px;width:200px;margin-top:20px;}
.sty2{background-color:#a00;height:300px;width:400px;box-shadow:10px 10px #000;margin-left:200px;margin-top:20px;display:none;}
</style>
</head>
<body>
<div id = "div1" class = "sty1" onclick = "m1()" onmousemove = "m2()"></div>
<div id = "div2" class = "sty1" onmousedown="m4()" onmouseup="m3()"></div>
<div id = "div3" class = "sty1" onmouseover="m5()" onmouseout="m6()">
<div id = "div4" class = "sty2"></div>
</div>
</body>
<script>
function m1(){
alert("哈哈哈");
}
function m2(){
var x = document.getElementById("div1");
x.style.backgroundColor = "#2ac";
}
function m3(){
var x = document.getElementById("div2");
x.style.backgroundColor = "#aaa";
}
function m4(){
var x = document.getElementById("div2");
x.style.backgroundColor = "#2ac";
}
function m5(){
var x = document.getElementById("div4");
x.style.display = "block"; // 显示
}
function m6(){
var x = document.getElementById("div4");
x.style.display = "none"; // 隐藏
}
</script>
</html>
总结
我们也可以加上旋转,变大变小,透明度等等各种事件的变化。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
.sty1{background-color:#aaa;height:200px;width:200px;margin-top:20px;}
.sty2{background-color:#a00;height:300px;width:400px;box-shadow:10px 10px #000;margin-left:200px;margin-top:20px;display:none;}
</style>
</head>
<body>
<div id = "div1" class = "sty1" onclick = "m1(1)" onmousemove = "m2()"></div>
<div id = "div2" class = "sty1" onmousedown="m4()" onmouseup="m3()"></div>
<div id = "div3" class = "sty1" onmouseover="m5()" onmouseout="m6()">
<div id = "div4" class = "sty2"></div>
</div>
</body>
<script>
function m1( a){
var x = document.getElementById("div1");
x.style.backgroundColor ="#2ac"
x.style.transform = "rotate(" + (30 + a) + "deg)";
x.style.opacity = "0.5";
x.style.width = (200+ a) %200+ "px";
x.style.height = (200+ a )%200+ "px"
setTimeout("m1(" + (a + 1) + ")" , 20);
}
function m2(){
var x = document.getElementById("div1");
x.style.backgroundColor = "#2ac";
}
function m3(){
var x = document.getElementById("div2");
x.transform = "rotate(20)";
x.style.backgroundColor = "#aaa";
}
function m4(){
var x = document.getElementById("div2");
x.style.backgroundColor = "#2ac";
x.style.width = "150px";
x.style.height = "150px";
}
function m5(){
var x = document.getElementById("div4");
x.style.display = "block"; // 显示
x.style.opacity = "0.1";
}
function m6(){
var x = document.getElementById("div4");
x.style.display = "none"; // 隐藏
}
</script>
</html>