2 mingqingchangcheng mingqingchangcheng 于 2016.03.25 09:06 提问

javascript代码的小div为什么向上和向左移动不了
 <!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
     <tbody>
            <div style="background-color:black;height:500px;width:600px" >
                <div id="mytanke" style="background-color:yellow;width:18px;height:20px;position:relative;"></div>
            </div>
     </tbody>
     <script type="text/javascript">
        var mytanke=document.getElementById("mytanke");

        document.onkeydown=function(event){


            var e = event || window.event || arguments.callee.caller.arguments[0];
            var x=mytanke.offsetLeft;
            var y=mytanke.offsetTop;
            if(e && e.keyCode==37){ // zuo
                mytanke.style.backgroundColor='red';
                if(x>8){

                    mytanke.style.left=(x-1)+'px';
                }
            }
            if(e && e.keyCode==38){ // shang

                if(y>8){

                    var mm=parseInt(y)-1;


                    mytanke.style.top=mm+'px';
                }
            }            
            if(e && e.keyCode==39){ // you

                  if(x<600){

                      console.log(3333);
                    mytanke.style.left=(x+1)+'px';
                }
            }
            if(e && e.keyCode==40){ // xia
                console.log(4444);
                if(y<500){

                    mytanke.style.top=(y+1)+'px';
                }
            }
         }; 
     </script>
 </body>
</html>

1个回答

showbo
showbo   Ds   Rxr 2016.03.25 11:47

不用用offsetTop/Left,自己打印出来看值就知道为什么了


            var x = parseInt(mytanke.style.left)||0;
            var y = parseInt(mytanke.style.top) || 0;
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
js实现动画,右移、左移,上移,下移,左上角移动等
js实现动画,右移、左移,上移,下移,左上角移动等
JavaScript div层拖拽左右移动
用文件保存该代码即可执行,需要引入jquery.js文件,花了我两天时间才做成,不过还有待改进。 可以兼容IE9到IE11,谷歌浏览器,火狐暂时不兼容,页面底下包括浏览器判断,,读者可以依此去想办法兼容其他浏览器
CSS3中transform移动属性的使用
问题?CSS3中transform移动属性的使用 原理:该属性是将原来存在的元素发生位置的变化,包括旋转角度,水平,垂直位置的变化。 transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。 例子: #div1{ width: 200px; height: 200px; background-color: blue
div+css 上下左右移动
利用div+css,使得选中的对象,上下左右进行位置移动。
js实现div整块向上移动的动画效果
body{ font: 14px/1.6 "Microsoft YaHei"; } ul, ol { list-style: none; } p{ padding: 0; margin: 0; } .mt10 { margin-top: 10px; } .clearfix { zoom: 1;
JavaScript之元素在屏幕从左到右移动的的示例
Animating a DOM Element #div1{ position:absolute; border:1px solid black; width:50px; height:50px; left:0px; top:100px; } var timer1 = null; var el = null;
js控制div匀速移动和停止
JS实现对象匀速、变速移动和停止 JS实现对象匀速移动和停止 HTML: JS:实现向右运动 var timer=null;window.onload=function(){var odiv=document.getElementById('d1');var obtn=document.getElementById('btn');clearInt
鼠标触碰div 字体向上移动
第一种是用 css 写的.links-cont {    border: 1px solid #dcbe6e;    height: 210px;    width: 1100px;    padding: 30px 30px;    overflow: hidden;    background-color: #ffffff;} .links-cont .links-logo {    widt...
js + div 实现无缝隙滚动效果,从右向左循环显示
代码如下:                       var speed=30 demo2.innerHTML=demo1.innerHTML; demo3.innerHTML=demo1.innerHTML; demo4.innerHTML=demo1.innerHTML; demo
如何在HTML页面上自由移动DIV组件?
第一次使用CSDN自带markdown编辑器,界面不对,请谅解!如何在HTML页面上自由移动DIV组件?原理:所谓的div移动,是指div不停的变化和刷新位置坐标。解决步骤: 鼠标点击,获取需要移动的DIV DOM对象。 鼠标移动,计算移动值后调整DIV的位置。 代码示例:$("#"+this.props.softwareID).mousemove(function (event) {