javascript事件动画

abstract：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>javascript事件</title> <link rel="stylesheet" type="tex

<!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>

Correcting teacher：查无此人Correction time：2019-05-14 09:20:16
Teacher's summary：完成的不错。js功能很强大，要坚持学习。继续加油。

javascript事件动画

Popular Entries