正文
javascript方块,编程方块图
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
求javascript写一个方块或图片沿窗体做矩形运动的代码
用 jQuery 给你写了一个，保存成 html 文件用浏览器打开即可看到效果。
如果 不能打开，自己下一个 jquery，然后修改一下路径。
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8"
title移动方块/title
style type="text/css"
html, body {
width: 100%;
height: 100%;
}
#box {
position: absolute;
width: 20px;
height: 20px;
background: #FF0;
border: 1px solid #F00;
}
#fig {
position: absolute;
top: 100px;
left: 100px;
width: 200px;
height: 200px;
background: #E4F2FF;
border: 1px solid #B1C6D9;
}
/style
script type="text/javascript" src=" "/script
script type="text/javascript"
$(document).ready(function() {
var $fig = $('#fig');
var $box = $('#box');
var P = $fig.position();
var M = 2;
var L = P.left - $box.width() - M;
var T = P.top - $box.height() - M;
var R = P.left + $fig.width() + M;
var B = P.top + $fig.height() + M;
var left = L;
var top = T;
$box.css('left', left);
$box.css('top', top);
var status = 0;
var STEP = 5;
setInterval(function() {
switch(status) {
case 0:
if(left R) {
left += STEP;
if(left R) left = R;
$box.css('left', left);
} else {
status = 1;
}
break;
case 1:
if(top B) {
top += STEP;
if(top B) top = B;
$box.css('top', top);
} else {
status = 2;
}
break;
case 2:
if(left L) {
left -= STEP;
if(left L) left = L;
$box.css('left', left);
} else {
status = 3;
}
break;
case 3:
if(top T) {
top -= STEP;
if(top T) top = T;
$box.css('top', top);
} else {
status = 0;
}
break;
default: break;
}
}, 100);
});
/script
/head
body
div id="box"/div
div id="fig"/div
/body
/html
相关问答
Q1: js怎么让方块经过的地方留下痕迹
用js触发CSS3。
objstylewidth=400px时，就会有过渡段，出现过渡动画，出现痕迹。
当元素本身为display，none时，若此时我们想通过js先将其变为display：block并且随后再触发其他想要的transition过渡效果，需要在js改变其为display：block后延迟100ms左右的时间再去设置其他过渡动画，否则该过渡动画不会触发。
Q2: 我想用 JavaScript实现 当鼠标 滑过方块时，通过添加active给li标签背景变白字便黑 我这样做怎么不行呢
你好，问题出现在你的第15行样式上；
应该这么写：
#tab ul li.active{background:white;color:#000;}
注意li.active之间没有空格。
希望能帮到你。
