Javascript(9)

最新推荐文章于 2024-09-25 14:00:00 发布

灰太狼吃羊羊

最新推荐文章于 2024-09-25 14:00:00 发布

阅读量253

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_65474726/article/details/127114059

版权

这篇博客介绍了如何利用JavaScript处理DOM元素的鼠标移入、移出、移动事件，改变背景图片，并展示了键盘事件监听，特别是在网页中移动元素的实例。通过示例代码详细解析了事件对象在事件处理中的应用，以及如何响应键盘上的左右上下箭头来移动页面元素。

摘要由CSDN通过智能技术生成

本节重点:鼠标移入事件(onmouseover)，移开事件(onmouseout),p标签隐藏(),鼠标移动标签(onmousemove).例题(影片的介绍)，onkeydown:键盘上的键被按下时触发的事件。

1.（例题）

  <style>
		        *{
		            margin: 0;
		            padding: 0;
		        }
		        body{
		            background-image: url(img/ty4.jpg);
		        }
		        nav{
		            width: 100%;
		            height: 200px;
		            background-color: rgba(128, 128, 128, 0.449);
		        }
		        .list{
		            width: 1300px;
		            height: 200px;
		            margin: 0 auto;
		            /*border: 1px solid red;*/
		            display: flex;
		            justify-content: center;	
		            align-items: center;
		        }
		        .list img{
		            width: 200px;
		            height: 100px;
		            margin-left: 10px;
		            border-radius: 5px;
		        }
		        .list img:hover{
		            border: 5px solid white;
		        }
		</style>
		<body>	
		<div class="list">
			<img src="img/ty4.jpg" >
				<img src="img/ty5.jpg" >
					<img src="img/ty6.jpg" >
		</div>
		<script type="text/javascript">
			//接收
			var b=document.querySelectorAll(".list img")
			//显示整张图片
			var body=document.body
			//循环遍历
			for (var i = 0; i < b.length; i++) {
				b[i].onmouseover=function(){
					
				
			body.style.backgroundImage="url("+this.src+")"
			}
			}
		</script>

当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数。

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标的状态。

3.(键盘事件)

	<style type="text/css">
			body{
				margin: 0;
				padding: 0;
			}
			#content{
				width: 700px;
				height: 700px;
				background-color: #000000;
				margin:auto;
				position: relative;
			}
		</style>

	</head>
	<body>
		<div id="content">
			<div id="move_div" style="background-color: green;width: 100px;
			height: 100px;position: absolute;top: 0;left: 0;"></div>
		</div>
		<script type="text/javascript">
//			onkeydown:键盘上的键被按下时触发的事件
			document.onkeydown=function(){
				var move_div=document.getElementById("move_div")
				//用于获取外层div的宽度和高度
				var x=getComputedStyle(document.getElementById('content')).width
				var y=getComputedStyle(document.getElementById('content')).height
//				alert(x)
				if(event.keyCode==39){
					if(parseInt(move_div.style.left)+100>=parseInt(x)){
						alert("已经到最右边了")	
					}else{
						move_div.style.left=(parseInt(move_div.style.left)+5)+"px"
					}
					
				}else if(event.keyCode==40){
					if(parseInt(move_div.style.top)+100>=parseInt(y)){
						alert("已经到达最底端了")
					}else{
						move_div.style.top=(parseInt(move_div.style.top)+5)+"px"
					}
					
				}else if(event.keyCode==37){
					if(parseInt(move_div.style.left)==0){
						alert("已经到最左边了")
					}else{
						move_div.style.left=(parseInt(move_div.style.left)-5)+"px"
					}
					
				}else if(event.keyCode==38){
					if((parseInt(move_div.style.top))==0){
						alert("已经到达最顶端了")
					}else{
						move_div.style.top=(parseInt(move_div.style.top)-5)+"px"
					}
				}