js事件作业

原创 2019-01-03 16:35:05 291
摘要:实在设计不出什么好案例,就写了两个事件:1--鼠标点击input框后,框会放大,点击空白处,框恢复正常;2--鼠标悬停在div,该div放大,移开后div恢复正常,代码如下:<!doctype html> <html> <head> <meta charset="utf-8"> <title&g

实在设计不出什么好案例,就写了两个事件:

1--鼠标点击input框后,框会放大,点击空白处,框恢复正常;

2--鼠标悬停在div,该div放大,移开后div恢复正常,代码如下:

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js事件作业</title>
	</head>
	
	<body>
		<script type="text/javascript">
			function myfocus(a){
				a.style="margin-left:50px; width:200px; height:30px;" //点击后input框变大
			}
			
			function myblur(b){
				b.style="margin-left:50px; width:200px; height:15px;" //失去焦点后恢复正常
			}
		</script>
		
		<input type="text" style="margin-left:50px; width:200px; height:15px;" onfocus="myfocus(this)" onblur="myblur(this)">
		</br>
		<script>
			function mymouseover(c){
				c.style="margin:10px auto; width:160px; height:200px; background:orange" //假装这是一张美娇娘,鼠标悬停图片放大;
			}
			function mymouseout(d){
				d.style="margin:10px auto; width:80px; height:100px; background:orange" //鼠标移开恢复正常;
			}
		</script>
		
		<div style="margin:10px auto; width:80px; height:100px; background:orange"
			onmouseover="mymouseover(this)" 
			onmouseout="mymouseout(this)"
			>
		</div>
	</body>
</html>


批改老师:韦小宝批改时间:2019-01-03 16:39:05
老师总结:恩!已经写的很不错了!继续加油吧!骚年!

发布手记

热门词条