|
马上注册,结交更多好友,享用更多功能^_^
您需要 登录 才可以下载或查看,没有账号?立即注册
x
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>图片跟随鼠标事件</title>
- <style>
- div {
- position:relative;
- width:700px;
- height:500px;
- background:url(24_404_15a398a36e51a9e.gif) ;
- margin-top:100px;
- margin-left:100px;
- background-color:red;
- }
- span {
- position:absolute;
- top:0;
- left:0;
- font-size:80px;
- }
- </style>
- </head>
- <body>
- <div>
- <span>🛸</span>
- </div>
- <script>
- var span=document.querySelector('span');
- // var div=document.querySelector('div');
- // div.addEventListener('mousemove',function(e){
- // var x=e.pageX;
- // var y=e.pageY;
- // span.style.top=y-150+'px';
- // span.style.left=x-160+'px';
- // });
- var div=document.querySelector('div');
- div.setAttribute('tabindex', '0');
- div.focus();
- div.addEventListener('keyup',function(e){
- var evt=e||event;
- console.log(e.keyCode);
-
- switch(e.keyCode){
- case 87:
- span.style.top=span.offsetTop-5+'px';
- break;
- case 65:
- span.style.left=span.offsetLeft-5+'px';
- break;
- case 83:
- span.style.top=span.offsetTop+5+'px';
- break;
- case 68:
- span.style.left=span.offsetLeft+5+'px';
- }
- });
- </script>
- </body>
- </html>
复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片跟随鼠标事件</title>
<style>
div {
position:relative;
width:700px;
height:500px;
background:url(24_404_15a398a36e51a9e.gif) ;
margin-top:100px;
margin-left:100px;
background-color:red;
}
span {
position:absolute;
top:0;
left:0;
font-size:80px;
}
</style>
</head>
<body>
<div>
<span>🛸</span>
</div>
<script>
var span=document.querySelector('span');
// var div=document.querySelector('div');
// div.addEventListener('mousemove',function(e){
// var x=e.pageX;
// var y=e.pageY;
// span.style.top=y-150+'px';
// span.style.left=x-160+'px';
// });
var div=document.querySelector('div');
div.setAttribute('tabindex', '0');
div.focus();
div.addEventListener('keydown',function(e){
var evt=e||event;
console.log(e.keyCode);
switch(e.keyCode){
case 87:
span.style.top=span.offsetTop-5+'px';
break;
case 65:
span.style.left=span.offsetLeft-5+'px';
break;
case 83:
span.style.top=span.offsetTop+5+'px';
break;
case 68:
span.style.left=span.offsetLeft+5+'px';
}
});
</script>
</body>
</html>
|
|