精华内容
下载资源
问答
  • 主要介绍了JS实现盒子跟着鼠标移动及键盘方向控制盒子移动效果,涉及javascript事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
  • js自动移动图片,键盘可控制方向
  • 一款简单的鼠标移动控制飞机飞行方向js代码,通过鼠标移动控制飞机方向和背景移动效果。
  • 前言在生活中肯定有玩过贪吃蛇的游戏,...利用键盘码来控制div移动源码#box {height: 100px;width: 100px;background-color: red;position: absolute;}var oBox = document.getElementById("box")var x = 0var y = 0...

    前言

    在生活中肯定有玩过贪吃蛇的游戏,那么要怎么样用键盘码来实现div的移动呢?下面就分享一个Demo。

    利用键盘码来控制div移动源码

    #box {

    height: 100px;

    width: 100px;

    background-color: red;

    position: absolute;

    }

    var oBox = document.getElementById("box")

    var x = 0

    var y = 0

    document.onkeyup = function(ev) {

    var ev = ev || event

    // 指定方向键 ,w(上-->87),a(左-->83),s(下-->65),d(右-->67)

    // 通过keyCode来识别当前按的是哪个键

    // x += 10

    // oBox.style.left = x +"px"

    // 根据键盘码来确定往哪个方向移动

    switch(ev.keyCode) {

    case 87:

    // 往上移动

    y -= 20

    break

    case 83:

    // 往下移动

    y += 20

    break

    case 65:

    //

    x -= 20

    break

    case 68:

    x += 20

    break

    default:

    break

    }

    oBox.style.left = x + "px"

    oBox.style.top = y + "px"

    }

    上面就是Demo的所有源码,我们可以通过键盘码来控制div来移动,里面具体的参数可以自己修改。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    展开全文
  • 本文实例讲述了JS实现盒子跟着鼠标移动及键盘方向控制盒子移动。分享给大家供大家参考,具体如下:1. 盒子跟着鼠标移动content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, ...

    本文实例讲述了JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动。分享给大家供大家参考,具体如下:

    1. 盒子跟着鼠标移动

    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    Document

    *{

    margin:0;

    padding:0;

    }

    div{

    width: 100px;

    height: 100px;

    background: red;

    position: absolute;

    }

    document.οnmοusemοve=function fn(ev) {

    var event=window.event||ev;

    var oDiv=document.getElementsByTagName("div");

    for(x=0;x

    oDiv[x].style.transition=(x*0.5)+"s";

    oDiv[x].style.left=event.clientX+"px";

    oDiv[x].style.top=event.clientY+"px";

    }

    }

    2. 键盘方向键控制盒子移动

    div{

    width:100px;

    height:100px;

    background: red;

    position:absolute;

    left:100px;

    top:100px;

    transition: 0.1s;

    }

    window.onload = function(){

    var oDiv = document.getElementById("div1");

    var left = false;

    var right = false;

    var top = false;

    var bottom = false;

    document.onkeydown = function(ev){

    var oEvent = ev || event;

    var keyCode = oEvent.keyCode;

    switch(keyCode){

    case 37:

    left=true;

    break;

    case 38:

    top=true;

    break;

    case 39:

    right=true;

    break;

    case 40:

    bottom=true;

    break;

    }

    };

    setInterval(function(){

    if(left){

    oDiv.style.left = oDiv.offsetLeft-10+"px";

    }else if(top){

    oDiv.style.top = oDiv.offsetTop-10+"px";

    }else if(right){

    oDiv.style.left = oDiv.offsetLeft+10+"px";

    }else if(bottom){

    oDiv.style.top = oDiv.offsetTop+10+"px";

    }

    },50);

    document.onkeyup = function(ev){

    var oEvent = ev || event;

    var keyCode = oEvent.keyCode;

    switch(keyCode){

    case 37:

    left=false;

    break;

    case 38:

    top=false;

    break;

    case 39:

    right=false;

    break;

    case 40:

    bottom=false;

    break;

    }

    }

    }

    感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试一下运行效果。

    希望本文所述对大家JavaScript程序设计有所帮助。

    展开全文
  • mvc 鼠标控制 人物八个方向移动 提供源代码
  • JS代码实现图片移动并能自定义控制方向热键 实现功能: 1.自定义上下左右键 2.使用自定义热键或者使用键盘上下左右键移动图片 效果图: 文中所移动的图片 HTML代码: <img id="img" src="picture/13.jpg" style...

    JS代码实现图片移动并能自定义控制方向热键
    实现功能:
    1.自定义上下左右键
    2.使用自定义热键或者使用键盘上下左右键移动图片
    效果图:
    在这里插入图片描述
    文中所移动的图片
    在这里插入图片描述
    HTML代码:

    <img id="img" src="picture/13.jpg" style="width: 80px; height: 80px;position: absolute;
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;left: 0px; top: 0px"/>
    
    <div align="right">
        <p>自定义键位</p>
        上:<input type="text" onkeyup="myFunction('up')" maxlength="1"><br/>
        下:<input type="text" onkeyup="myFunction('down')" maxlength="1"><br/>
        左:<input type="text" onkeyup="myFunction('left')" maxlength="1"><br/>
        右:<input type="text" onkeyup="myFunction('right')" maxlength="1"><br/>
        <input type="button" value="确定" onclick="operation()" />
    </div>
    

    js代码

    <script language="JavaScript">
        var up1, down1, left1, right1;
        var up2, down2, left2, right2;
    
        var obj = document.getElementById("img");
        obj.left = 0;
        obj.top = 0;
    
        function myFunction(str) {
            var Key = window.event.keyCode;
            if (str == "up") {
                up2 = Key;
            }
            if (str == "down") {
                down2 = Key;
            }
            if (str == "left") {
                left2 = Key;
            }
            if (str == "right") {
                right2 = Key;
            }
        }
    
        function operation() { //operation :运行
            up1 = up2;
            down1 = down2;
            left1 = left2;
            right1 = right2;
           alert("快捷键修改成功,祝你游戏愉快!")
            move();
        }
    
        function  move() { //move :移动
            // var event ;
            console.log(event.keyCode);
            var key = window.event.keyCode;
            if (key == 37 || key ==parseInt(left1)){
                //左
                obj.left -= 80;
            }
            if (key == 38 || key ==parseInt(up1)){
                //上
                obj.top -=80;
            }
            if (key == 39 || key ==parseInt(right1)){
                //右
                obj.left +=80;
            }
            if (key == 40 || key ==parseInt(down1)){
                //下
                obj.top +=80;
            }
            obj.style.left = obj.left +'px', obj.style.top = obj.top +'px';
        }
        document.onkeydown = move;
    
    </script>
    
    展开全文
  • 本文实例讲述了JS实现盒子跟着鼠标移动及键盘方向控制盒子移动。分享给大家供大家参考,具体如下:1. 盒子跟着鼠标移动content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, ...

    本文实例讲述了JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动。分享给大家供大家参考,具体如下:

    1. 盒子跟着鼠标移动

    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    Document

    *{

    margin:0;

    padding:0;

    }

    div{

    width: 100px;

    height: 100px;

    background: red;

    position: absolute;

    }

    document.οnmοusemοve=function fn(ev) {

    var event=window.event||ev;

    var oDiv=document.getElementsByTagName("div");

    for(x=0;x

    oDiv[x].style.transition=(x*0.5)+"s";

    oDiv[x].style.left=event.clientX+"px";

    oDiv[x].style.top=event.clientY+"px";

    }

    }

    2. 键盘方向键控制盒子移动

    div{

    width:100px;

    height:100px;

    background: red;

    position:absolute;

    left:100px;

    top:100px;

    transition: 0.1s;

    }

    window.onload = function(){

    var oDiv = document.getElementById("div1");

    var left = false;

    var right = false;

    var top = false;

    var bottom = false;

    document.onkeydown = function(ev){

    var oEvent = ev || event;

    var keyCode = oEvent.keyCode;

    switch(keyCode){

    case 37:

    left=true;

    break;

    case 38:

    top=true;

    break;

    case 39:

    right=true;

    break;

    case 40:

    bottom=true;

    break;

    }

    };

    setInterval(function(){

    if(left){

    oDiv.style.left = oDiv.offsetLeft-10+"px";

    }else if(top){

    oDiv.style.top = oDiv.offsetTop-10+"px";

    }else if(right){

    oDiv.style.left = oDiv.offsetLeft+10+"px";

    }else if(bottom){

    oDiv.style.top = oDiv.offsetTop+10+"px";

    }

    },50);

    document.onkeyup = function(ev){

    var oEvent = ev || event;

    var keyCode = oEvent.keyCode;

    switch(keyCode){

    case 37:

    left=false;

    break;

    case 38:

    top=false;

    break;

    case 39:

    right=false;

    break;

    case 40:

    bottom=false;

    break;

    }

    }

    }

    感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试一下运行效果。

    希望本文所述对大家JavaScript程序设计有所帮助。

    展开全文
  • 不适用控制器实现(WASD)控制移动方向,核心代码如下: if (front) { camera.position.z += vect.dot(new THREE.Vector3(0, 0, 15)) * 0.01; camera.position.x += vect.dot(new THREE.Vector3(15, 0, 0)) * ...
  • JS实现 8个方向移动

    2010-05-13 16:45:34
    使用JS实现,用方向控制移动,实现上下左右,上左、上右,下左、下右8个方向移动
  • js鼠标控制飞机方向特效是一款通过鼠标移动控制飞机方向和背景移动效果代码。
  • 主要为大家详细介绍了js实现上下左右键盘控制div移动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要给大家介绍了如何利用原生js实现键盘控制div移动,并且解决在移动过程中的停顿问题,文中给出了详细的示例代码,相信对大家的理解和学习很有帮助,下面跟着小编一起来看看吧。
  • 还用按钮控制物体左右旋转,因为摄像机在物体上,这就产生了一个问题,在旋转之前,物体移动的方向跟视角方向一样,但是一旦开始旋转几次后,物体的移动依然是按着摇杆控制的世界坐标的方向移动,可是由于视角改变,...
  • Js控制图片的滑动移动动画,在鼠标放在DIV上的时候,该DIV滑动展开,方向自定义,DIV中包括图片信息,演示中去掉了图片,不过已经实现了DIV 的滑动,只要在DIV中的对象都可以在JavaScript的作用下滑动展开。
  • js控制人物的移动

    2013-04-20 11:31:13
    这是我用js做的一个练习,中间可以改进的地方有很多,中间也留了我做这个的一些疑问,有兴趣的可以看看,这是好多年前提交的一个版本,看到所需几分要50,表示吓到了。
  • 通过了测试
  • JS控制卡通人物各个方向奔跑动画,鼠标点击左上、向上、右上、左、右、左下、向下、右下按钮,卡通人物往哪个方向移动奔跑,点击停止按钮,停止奔跑。
  • !DOCTYPE html> 在网页中的效果就是当按方向键时红色的方块会随者移动,如果按ctrl键后会加快移动的速度
  • 经常有人问怎么控制车辆车头方向随着行进方向改变 在高德地图中展示轨迹有三种方法,一种方法是AMapUI的PathSimplifier创建巡航器来展示轨迹: 高德地图轨迹展示示例 第二种方法是使用moveAlong,moveAlong可以让...
  • 本文实例为大家分享了利用键盘控制小方块的移动,供大家参考,具体内容如下 原理 1. 利用键盘控制移动,则需要了解onkeydown函数,表示某个按键被按下,可以以此绑定一个事件响应函数,当键盘被按下时候,触发此事件...
  • js 实现键盘控制方块移动

    千次阅读 2018-09-29 23:01:54
    在网页上有一个方块,我们需要键盘上下左右键控制方块的移动。 代码: &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &...
  • JavaScript控制滚动条左右移动

    万次阅读 2017-08-13 12:29:12
    JavaScript控制滚动条左右移动完整HTML代码:&lt;!DECTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=‘utf-8’&gt; &lt;title&gt;onwheel-test&lt;/...
  • 通过JS实现键盘控制div移动

    千次阅读 2019-01-18 10:45:33
    现在让我们来了解一下如何通过JS代码获取键盘键来控制div的移动。 首先要设置一个简单的div,JS部分想让div移动就得声明一个记录运动状态的变量,然后就是创建一个计时器函数,这里要区分好setInterval和setTimeout...
  • js控制div匀速移动和停止

    万次阅读 2016-11-30 11:54:39
    JS实现对象匀速、变速移动和停止 JS实现对象匀速移动和停止 HTML: JS:实现向右运动 var timer=null;window.onload=function(){var odiv=document.getElementById('d1');var obtn=...
  • Three.js用鼠标控制场景移动的代码

    千次阅读 2017-09-13 16:48:45
    Three.js中的场景移动主要是通过摄像机移动来实现的。 下面是自己写的代码,主要是鼠标滚轮实现前进与后退和四个方向移动

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 37,469
精华内容 14,987
关键字:

js控制方向移动