标签：des style io color ar os java sp div
学习web前端的开发已经将近一个月了，开发中的三个大兄弟——“html”、“css”、“JavaScript”，小菜我已经深入接触了前两位，并与他俩建立的深厚的友谊。在编写过程中，不能说达到各位大神的程度，但是对各个标签、若干属性也用得比较熟练了。而这最后一位姓J的大哥，却是怎么也得不到他的欣赏。对于变量的定义，函数的定义，还有各种调用，感觉自己写的命令就是人类看不懂，计算机看不明白。经过几天的深入交流，互诉衷肠。总算把彼此的距离拉近了几分，但是相对于温柔的“html”和“css”而言，“JS”依旧冷酷到底啊。
今天写了第一个比较成功的js效果，虽然过程磕磕绊绊，不停地报错，但还是顺利完成。为了记下属于我人生的伟大时刻。决定把这简陋不堪的代码上传上来。一为需要用到此类效果时留个参考，二为将来技术提高时，嘲笑当年自己代码的幼稚~请各位大神见证。。。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>动态广告是什么鬼</title>
<style>
#div_auto{
width:100px;
height:100px;
position:absolute;
background-color:#33ccff;
}
#div_main{
width:1000px;
height:600px;
position:relative;
border:1px #dc0000 solid;
}
button{
margin-left:400px;
}
</style>
</head>
<body>
<div id="div_main">我是一个少儿不宜的网站
<div id="div_auto">我是那种羞羞的动态广告</div>
</div>
<button onclick="clickA()">动起来/停下来</button>
<script type="text/javascript">
var divs = document.getElementById("div_auto");
var main = document.getElementById("div_main");
var posX = 200;
var posY = 300;
var time = null;
var moveX = true;
var moveY = true;
var a = true;
window.onload = pos;
function pos(){
divs.style.left=posX+‘px‘;
divs.style.top=posY+‘px‘;
}
function move(){
if(moveX){
if(posX>0){
posX--;
divs.style.left=posX+‘px‘;
}
else{
moveX = false;
}
}
else{
if(posX<main.offsetWidth-divs.offsetWidth){
posX++;
divs.style.left=posX+‘px‘;
}
else{
moveX = true;
}
}
if(moveY){
if(posY>0){
posY--;
divs.style.top=posY+‘px‘;
}
else{
moveY = false;
}
}
else{
if(posY<main.offsetHeight-divs.offsetHeight){
posY++;
divs.style.top=posY+‘px‘;
}
else{
moveY = true;
}
}
}
function clickA(){
clearInterval(time);
if((a==true)&&(time)){
clearInterval(time);
a=false;
}
else{
time=setInterval(move,10);
a=true;
}
}
</script>
</body>
</html>
不会放demo...还想请教园中各位大神，小菜跪谢！！！！
标签：des style io color ar os java sp div
原文地址：http://www.cnblogs.com/skyloveanna/p/4079595.html
