offset()实现键盘控制图片的移动

一边卖豆芽一边敲代码 06-17 137

前言：

目前我们对“css按钮向右移动”都比较关切，兄弟们都需要学习一些“css按钮向右移动”的相关内容。那么小编也在网上网罗了一些有关“css按钮向右移动””的相关资讯，希望我们能喜欢，同学们一起来了解一下吧！

Hello,World.

今天是中考的第二天

土土希望中考生们继续加油

考出满意的成绩

嘻嘻

那么我们进入正题

今天土土给大家分享的是offset()函数的使用

which属性

要利用键盘控制图片的移动

必须先知道键盘键所对应的值

这时候就需要利用which属性来实现查询

which属性用于返回触发当前事件时按下的键盘按键或鼠标按钮。

在mousedown、mouseup事件中，event.which属性返回的是对应鼠标按钮的映射代码值(相当于event.button)。在keypress事件中，event.which属性返回的是输入的字符的Unicode值(相当于event.charCode)。在keydown、keyup事件中，event.which属性返回的是对应按键的映射代码值(相当于event.keyCode)。代码实现（主要是3）

<!DOCTYPE html><html>	<head>		<meta charset="UTF-8">		<title></title>	<script src=";></script>		<style>			div{color:red;}			a{				color:black;			}		</style>	</head>	<body>		<input id="whichkey" value="" />		<div id="log"></div>		<script>         $('#whichkey').keydown(function(e){         $('#log').html(e.type+':'+e.which);});</script></body></html>

效果图offset()

offset() 方法返回或设置匹配元素相对于文档的偏移（位置）。

返回第一个匹配元素的偏移坐标。该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。代码实现（firefox）

1.html文件

<!DOCTYPE html><html>	<head>		<meta charset="utf-8" />		<title></title>		<script src=";></script>		<script src="js/offset.js"></script>		<style>			body{				background: url(img/timg.jpg)no-repeat;				background-size:101% 108%;			}			div{				width: 1108px;				height: 648px;				margin-left: 215px;				margin-top: 21px;			}			img{				margin-left: 127px;                margin-top: 75px;			}		</style>	</head>	<body>         <div>            <img src="img/1.png"></img>         </div>	</body></html>

2.offset.js

$(document).ready(function(){				var x=$("img");				$(document).keydown(function(e){					if(e.which==39||e.which==68){//向右						//当按下→或D时，图片向右移动，同时把图片方向向右	            $('img').attr('src','img/2.png')if(x.offset().left>=1195){//最左的距离减去图片的宽度，即215+1108-128=1128。最右				    }				    else{					left1=x.offset().left+10;					x.offset({left:left1});				     }					}					if(e.which==40||e.which==83){//向下						//当按下↓或S时，图片向下移动，同时把图片方向向下						$('img').attr('src','img/4.png')						if(x.offset().top>=541){//21+648-128=541，到底						}						else{						top1=x.offset().top+10;					    x.offset({top:top1});						}					}					if(e.which==38||e.which==87){//向上						//（1）当按下↑或W时，图片向上移动，同时把图片方向向上						$('img').attr('src','img/1.png')						if(x.offset().top<=21){						}						else{						top2=x.offset().top-10;					    x.offset({top:top2});						}					}					if(e.which==37||e.which==65){//向左						//当按下←或A时，图片向左移动，同时把图片方向向左						$('img').attr('src','img/3.png')						if(x.offset().left<=215){						}else{						left2=x.offset().left-10;					    x.offset({left:left2});						}					}				});			});

3.img文件夹

向上 1.png

向右 2.png

向左 3.png

向下 4.png

4.效果图

5.效果视频

视频加载中...

完成

走啦

明天见

了解更多关注微信公众号“三人之一”