Javascript使用屏幕上的按钮向左或向右移动图像_Javascript_Html

Javascript使用屏幕上的按钮向左或向右移动图像

javascript html

Javascript使用屏幕上的按钮向左或向右移动图像,javascript,html,Javascript,Html,好的，我一直在网上寻找建立一个平台，我正在采取一步一步。我已经有了我需要的图像以及如何将它们放在屏幕上。我也知道如何做积分制，但我还远远没有完成。现在我想知道如何使用屏幕上的按钮从左向右移动播放器。我所寻找的是一些完全不同于我在这里找到的代码，因为它似乎太多的代码，它只是移动字符的权利，而没有停止我正在寻找： 1）左右两个按钮 2）按下按钮可使播放机向右或向左移动 3）当你松开按钮时，播放器停止移动 // Other code ... imgObj.style.left = '0

好的，我一直在网上寻找建立一个平台，我正在采取一步一步。我已经有了我需要的图像以及如何将它们放在屏幕上。我也知道如何做积分制，但我还远远没有完成。现在我想知道如何使用屏幕上的按钮从左向右移动播放器。我所寻找的是一些完全不同于我在这里找到的代码，因为它似乎太多的代码，它只是移动字符的权利，而没有停止

我正在寻找：

1）左右两个按钮

2）按下按钮可使播放机向右或向左移动

3）当你松开按钮时，播放器停止移动

// Other code
...
    imgObj.style.left = '0px'; 
}
function moveRight() {
    imgObj.style.left = parseInt(imgObj.style.left) + 1 + 'px';
}
function stop() {
    clearTimeout(animate);
    imgObj.style.left = '0px'; 
}
window.onload =init;
//-->
</script>
</head>
<body>
    <form>
        <img id="myImage" src="/images/html.gif" />
        <p>Click the buttons below to handle animation</p>
        <input type="button" value="Start" onclick="moveRight();" />
        <input type="button" value="Stop" onclick="stop();" />
    </form>
</body>
</html>

//其他代码
...
imgObj.style.left='0px'；
}
函数moveRight（）{
imgObj.style.left=parseInt（imgObj.style.left）+1+'px'；
}
函数停止（）{
clearTimeout（动画）；
imgObj.style.left='0px'；
}
window.onload=init；
//-->
单击下面的按钮以处理动画

给你。希望对您来说代码不是太多：）

JSfiddle演示是


#精灵{position:relative；}//需要img自由移动
变量计时器\u id；//计时器的引用，需要停止它
var速度=50；//像素/秒
var期间=40；//毫秒
变量sprite；//将要移动的元素
变量sprite_速度=0；//每周期移动
变量sprite_位置=100；//像素
函数设置动画（）
{
精灵位置+=精灵速度；
如果（精灵位置<0）精灵位置=0；
如果（精灵位置>200）精灵位置=200；
sprite.style.left=sprite_位置+'px'；
}
功能移动（方向）
{
if（timer_id）stop（）；
精灵速度=速度*周期/1000*方向；
计时器\u id=设置间隔（动画，周期）；
}
函数停止（）
{
清除间隔（计时器\u id）；
计时器\u id=null；
}
函数init（）
{
sprite=document.getElementById（“sprite”）；//我们将移动的HTML元素
animate（）；//只是初始化精灵的位置
}
window.onload=init；//加载页面后开始执行操作
单击下面的按钮以处理动画

这只是一个概念证明。
你离释放马里奥·布罗斯25号还有很长的路要走，但这是朝着正确方向迈出的一步。

还是它被留下了？

对我来说，代码似乎不太多。在过去的20年里，我看到了很多：）。不管怎样，如果没有计时器，你就不能用JavaScript制作动画。你可以直接使用它们，比如在你的例子中，或者通过一个助手库。由于某种原因，当我发布这篇文章时，大约一半的代码被编辑掉了。我已经在谷歌上搜索了好几天，想找到一个可靠的例子，但都找不到。我只想像马里奥兄弟一样向左或向右移动。如果你能给我举一个很好的例子，我将不胜感激。不，这正是我想要的，我只要看一下就明白了。如何增加您的声誉积分？？谢谢你简单易读的风格！！很高兴你喜欢它。谢谢你的声誉提升提议，但我真的不太在乎。我只是来帮助Yoshi四处走动；）。这将是一个正在进行的项目，将来我有没有办法通过电子邮件联系到你？我保证，在我亲自研究之前，我不会问你任何问题。瓦纳多内科的库洛伊

<head>
<style>
    #sprite { position:relative; } // needed for the img to be free to move around
</style>
<script>
    var timer_id; // reference of the timer, needed to stop it
    var speed = 50; // pixels/second
    var period = 40; // milliseconds
    var sprite; // the element that will move
    var sprite_speed = 0; // move per period
    var sprite_position = 100; // pixels


    function animate ()
    {
        sprite_position += sprite_speed;
        if (sprite_position < 0) sprite_position = 0;
        if (sprite_position > 200) sprite_position = 200;
        sprite.style.left = sprite_position+'px';
    }

    function move(direction)
    {
        if (timer_id) stop();
        sprite_speed = speed * period/1000 * direction;
        timer_id = setInterval (animate, period);
    }

    function stop()
    {
        clearInterval (timer_id);
        timer_id = null;
    }

    function init()
    {
       sprite = document.getElementById ("sprite"); // the HTML element we will move
       animate(); // just to initialize sprite position
    }

    window.onload =init; // start doing things once the page has loaded
</script>
</head>
<body>
    <img id="sprite" src="http://petiteleve.free.fr/SO/yoshi.png" />
    <p>Click the buttons below to handle animation</p>
    <input type="button" value="Left"  onmousedown="move(-1);" onmouseup="stop();"/>
    <input type="button" value="Right" onmousedown="move( 1);" onmouseup="stop();"/>
</body>