js实现方块上下左右移动效果
2017-08-17 09:11
946 查看
本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- JS实现元素上下左右移动效果
- Js实现图片缩放上下左右移动效果
- js实现移动端手指左右上下滑动翻页效果
- JS—实现元素上下左右移动
- 用javascript实现以个动画效果(可以上下左右的移动)
- 为ScrolloView加手势实现上下左右移动效果
- 基于jquery实现左右上下移动效果
- 使用jquery实现上下左右移动效果
- 图片的左右移动,js动画效果实现代码
- js扩展滚动窗口小插件实现文字左右上下滚动效果实例
- js实现简单的动画(4个按钮控制图片上下左右移动)
- js实现搜索框智能提示上下移动效果
- JS+CSS实现几个DIV层上下移动交换位置的效果
- js实现鼠标左右移动,图片也跟着移动效果
- js实现按键球,小球随键盘上下左右控制移动
- js实现搜索框智能提示上下移动效果
- js实现上下左右图片轮播效果(三)
- JS实现图片滚动(无缝、平滑、上下左右滚动)效果
- js实现上下左右弹框划出效果