javascript事件动画
L2019-05-13 11:21:31259<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>javascript事件</title>
<link rel="stylesheet" type="text/css" href="">
<style type="text/css">
div{
width: 100px;
height: 100px;
border: 1px solid #ccc;
margin: 30px auto;
text-align: center;
line-height: 100px;
font-size: 30px;
}
</style>
</head>
<body>
<input type="text" name="" onfocus="myfocus(this)" onblur="myblur(this)">
<div onclick="myclick(this)" ondblclick="mydblclick(this)">1</div>
<div onmousedown="mymousedown(this)">2</div>
<div onmouseup="mymouseup(this)">3</div>
<div onmouseover="mymouseover(this)" onmouseout="mymouseout(this)">4</div>
<div onmousemove="mymousemove(this)">5</div>
<form onsubmit="mysubmit(this)">
<input type="submit" value="submit" name="">
</form>
<script type="text/javascript">
// 元素获得焦点
function myfocus(f){
f.style.background='red';
}
// 元素失去焦点
function myblur(b){
b.style.background='#fff';
}
// 鼠标单击对象调用
function myclick(x){
x.style.borderRadius='50%';
}
// 鼠标双击对象调用
function mydblclick(y){
y.style.background='green';
}
// 鼠标按钮被按下
function mymousedown(down){
down.style.background='blue';
}
// 鼠标按钮被松开
function mymouseup(up){
up.style.background='#ccc';
}
// 鼠标移动到元素之上(只触发一次)
function mymouseover(over){
over.style.background='black';
}
// 鼠标从元素上移开
function mymouseout(out){
out.style.background='red';
}
// 被移动到元素上(只要移动就不停触发)
function mymousemove(move){
move.style.background='yellow';
}
function mysubmit(s){
alert('点击成功');
}
</script>
</body>
</html>