js实现方块上下左右移动效果

2024-12-20 12:02:58

本文实例为大家分享了js实现方块移动的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      #box{
        width: 50px;
        height: 50px;
        position: absolute;
        background: palevioletred;
      }
    </style>
  </head>
  <body>
    <div id="box" style = "left: 0; top: 50px;"></div>
    <button id = "btn">stop</button>
  </body>
  <script type="text/javascript">
    var speed = 10;
    var flag = true;
    var interId; 

    function moveLeft(){
      var oldLeft = parseInt(box.style.left); 

      if(oldLeft >= window.innerWidth-50 || oldLeft < 0){
        speed *= -1;
      }
      box.style.left = oldLeft + speed + "px";
    } 

    function moveTop(){
      var oldTop = parseInt(box.style.top); 

      if(oldTop >= window.innerHeight-50 || oldTop < 0){
        speed *= -1;
      }
      box.style.top = oldTop + speed + "px";
    } 

    function onOff(rand){
//     var rand = random();
      if (flag) {
        btn.innerHTML = "start";
        clearInterval(interId);
        flag = false;
      } else{
        btn.innerHTML = "stop";
        if (rand == 1) {
          interId = setInterval("moveLeft()",50);
//         flag = true;
        } else{
          interId = setInterval("moveTop()",50);
//         flag = true;
        }
        flag = true;
      }
    } 

    btn.onclick =onOff; 

    //产生一个1-2的随机数
    function random(){
      rand = parseInt(Math.random() * 2 + 1);
      alert(rand); 

      if (rand == 1) {
        interId = setInterval("moveLeft()",50);
      } else{
        interId = setInterval("moveTop()",50);
      }
    } 

    random(); 

  </script>
</html>

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

Javascript 鼠标移动上去小三角形滑块缓慢跟随效果

先来一张截图. 鼠标移动到对应的分类,下面的红色小三角形就会自动跟随,缓慢的跟随. 不管有多少个都可以. javascript code: 复制代码代码如下: function changeCoord(id, left) { $$(id).style.left = left; } function $$(id) { return document.getElementById(id); } function $$$(id) { return document.getElementsByCla
js实现兼容PC端和移动端滑块拖动选择数字效果

本文为大家分享了js实现移动端滑块拖动选择数字的效果,可以通过鼠标拖拽滑动效果来选择数字,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta name="viewport&qu
JS实现网页游戏中滑块响应鼠标点击移动效果

本文实例讲述了JS实现网页游戏中滑块响应鼠标点击移动效果.分享给大家供大家参考,具体如下: 这是网页游戏中的一个有趣效果,可以完成以下几个动作:滚动.scroll 8个方向.鼠标坐标获娶对象上下左右位置获取,大家可以自己添加.MoveReady和ScrollReady两个注释掉了取消注释后防止鼠标连续点击效果叠加. 在线演示地址如下: http://demo.jb51.net/js/2015/js-web-game-click-move-demo/ 具体代码如下: <!DOCTYPE html
Javascript 鼠标移动上去滑块跟随效果代码分享

先来一张截图. 鼠标移动到对应的分类,下面的红色小三角形就会自动跟随,缓慢的跟随.不管有多少个都可以.javascript code: 复制代码代码如下: function changeCoord(id, left) { $$(id).style.left = left;} function $$(id) { return document.getElementById(id);} function $$$(id) { return document.getElementsByClassNam
仿3721首页模块拖曳移动效果js代码[可拖曳层移动层]

仿3721首页模块拖曳移动效果[拖曳层移动层]呵,做了一些细致的处理 html, body { width:100%; height:100%; padding:0px; margin:0px; } body { text-align:center; font-size:14px; } .cell_left, .cell_right { width:202px; } .cell_center { width:404px; } .left { float:left; } .row { clear:
js实现方块上下左右移动效果

本文实例为大家分享了js实现方块移动的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ width: 50px; height: 50px; position: absolute; background
JS实现元素上下左右移动效果

本文实例为大家分享了JS实现元素上下左右移动的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> a { cursor: pointer; } #cell { width: 30px; height: 30px;
js游戏人物上下左右跑步效果代码分享

本文实例讲述了js游戏人物上下左右跑步效果.分享给大家供大家参考.具体如下: js游戏人物上下左右跑步效果是一款jquery ui制作的点击按钮网格布局头像图片动画切换特效.你操控着游戏人物,掌控一切是不是很有意思,感兴趣的小伙伴们可以学习一下运行效果图:-------------------查看效果下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jQuery实现热气球动画背景登录框代码如下 <!DOCTYPE html>
js实现的彩色方块飞舞奇幻效果

本文实例讲述了js实现的彩色方块飞舞奇幻效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> body { margin:0; padding:0; } ul { list-style:none; margin:0; padding:0; } li
基于Two.js实现星球环绕动画效果的示例

Two.js 是面向现代 Web 浏览器的一个二维绘图 API.Two.js 可以用于多个场合:SVG,Canvas 和 WebGL,旨在使平面形状和动画的创建更方便,更简洁. Two.js 有一个内置的动画循环,可搭配其他动画库.Two.js 包含可伸缩矢量图形解释器,这意味着开发人员和设计人员都可以在商业应用中,如 Adobe Illustrator 中创建 SVG 元素,并把它引入 Two.js 使用场景中. 效果如下: 下面是核心js code HTML就不贴了,需要引入two.js文件
js实现多张图片延迟加载效果

本文实例为大家分享了js实现多张图片延迟加载效果的具体代码,供大家参考,具体内容如下具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">  <meta content="width=device-width, initial-scale=1.0, maximum-
JS基于递归实现倒计时效果的方法

本文实例讲述了JS基于递归实现倒计时效果的方法.分享给大家供大家参考,具体如下: 效果: 事件: //发送验证码 $('.js-sms-code').click(function(){ $(this).attr("disabled", "disabled").html("<span style='color:#666'><span id='countdown'>60</span>s 后再试</span>&qu
分别用marquee和div+js实现首尾相连循环滚动效果，仅3行代码

复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns="http://www.w3.org/1999/xhtml"> <HEAD> <TITLE>分别用marquee
JS实现不规则TAB选项卡效果代码

本文实例讲述了JS实现不规则TAB选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款不规则TAB选项卡效果,将中规中矩的方角换成了不规则的圆角,也就是这一换,倒让浏览者新鲜了不少,也使选项卡增多了几份灵感,不是吗? 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-box-tab-nav-style-menu-codes/ 具体代码如下: <html> <head> <meta http-equiv="C
用JS实现轮播图效果（二）

在上一篇用JS实现图片轮播效果代码(一)的基础上,增加了左右箭头的响应事件,实现了点击左右箭头也可以让图片滚动: js代码如下: window.onload = function(){ //轮播初始化 var lunbo = document.getElementById('content'); var imgs = lunbo.getElementsByTagName('img'); var uls = lunbo.getElementsByTagName('ul'); var lis = l

js实现方块上下左右移动效果

相关推荐

随机推荐