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
js怎么让方块经过的地方留下痕迹
用js触发CSS3。
objstylewidth=400px时,就会有过渡段,出现过渡动画,出现痕迹。
当元素本身为display,none时,若此时我们想通过js先将其变为display:block并且随后再触发其他想要的transition过渡效果,需要在js改变其为display:block后延迟100ms左右的时间再去设置其他过渡动画,否则该过渡动画不会触发。
我想用 JavaScript实现 当鼠标 滑过方块时,通过添加active给li标签背景变白字便黑 我这样做怎么不行呢
你好,问题出现在你的第15行样式上;
应该这么写:
#tab ul li.active{background:white;color:#000;}
注意li.active之间没有空格。
希望能帮到你。
当前文章:javascript方块,编程方块图
标题来源:http://myzitong.com/article/pheepc.html