js实现方块上下左右移动效果
本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍.net中实现listBox左右移动，包括了.net中实现listBox左右移动的使用技巧和注意事项，需要的朋友参考一下 今天用到listbox左右移动在网上找了一个，网友分享出来的，感觉不错，这里推荐给大家 以上所述就是本文的全部内容了，希望对大家熟练使用listbox能够有所帮助。
-
本文向大家介绍jQuery简单实现上下,左右滑动的方法，包括了jQuery简单实现上下,左右滑动的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery简单实现上下,左右滑动的方法。分享给大家供大家参考，具体如下： 渐变移动出足够的空白 -> 淡出最后一个 ->渐变移动出足够的空白 我们要做的是向左移动效果.这个效果用时需添加一个DIV设置超出部分不显示,这样就可以用了. 闲话不
-
本文向大家介绍jQuery实现百度图片移入移出内容提示框上下左右移动的效果，包括了jQuery实现百度图片移入移出内容提示框上下左右移动的效果的使用技巧和注意事项，需要的朋友参考一下 闲来无聊，看到百度图片hover的时候提示框的效果，遂想试一试自己能否实现。 百度图片hover的效果： 需求： 1. 当鼠标从图片上部移入的时候，提示框从上部移到正常位置。从上部移出的时候，提示框从正常位置移到
-
本文向大家介绍js实现左右两侧浮动广告，包括了js实现左右两侧浮动广告的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js实现左右浮动广告展示的具体代码，供大家参考，具体内容如下 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍js简单实现点击左右运动的方法，包括了js简单实现点击左右运动的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js简单实现点击左右运动的方法。分享给大家供大家参考。具体分析如下： 这里可实现点击向右，方块向右移动，点击向左，方块向左移动的效果 可以用setInterval来实现过多长时间，div移动多长的距离来实现运动效果。 要点一：如果元素的左边距离小于目标距离，则是
-
本文向大家介绍基于JavaScript实现下拉列表左右移动代码，包括了基于JavaScript实现下拉列表左右移动代码的使用技巧和注意事项，需要的朋友参考一下 废话不多说，先给大家展示一下效果图，如果大家感觉不错，请参考实现代码。 效果图如下所示： 代码如下所示： 以上所述是小编给大家介绍的基于JavaScript实现下拉列表左右移动，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回