让梦想照进现实,js 基础收尾工作-运动框架基本写法演化3
进一步演化就是可以给多个div 都让它移动的方法,那么这个时候,每个div 应该有自己的定时器变量
也就是将全局变量转成对象的属性,让他们互相不影响
<!DOCTYPE html>
<html>
<head>
<title>action</title>
<meta charset="utf-8">
<style type="text/css">
#box{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
top:200px;
}
#box4{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
top:600px;
}
/*
一旦你指定了定位布局,就必须将left 和top写上,这样能避免一些莫名其妙的问题
也就是不用它的默认值
*/
#endLine{
width:0px;
height: 500px;
position: absolute;
border: 1px solid black;
top:0;
left: 500px;
}
</style>
</head>
<body>
<h1>运动框架的演变</h1>
<button id ="oBtn">move</button>
<button id ="oBtn2">move2</button>
<div id="box">
</div>
<div id="box4">
</div>
<div id="endLine">
</div>
<script type="text/javascript">
// 添加onclick event(测试过了,这个写法没问题,又复习了一遍!复习多了,自然就会写了!)
function addListener(obj,enentName,callback){
if(obj.addEventListener){
obj.addEventListener(enentName,callback);
}else{
// ie explorer
obj.attachEvent('on'+ attachEvent,callback);
}
}
// 兼容写法, 一般问题,按照一般方式对待,特殊问题,特殊对待!
//要有两手准备!(普遍性+ 特殊性)(矛盾普遍性,矛盾特殊性)
function getStyle(obj,attr){
if(window.getComputedStyle){
// 在sublime 中,大凡方法都是蓝绿色的,很舒服这个颜色
return window.getComputedStyle(obj,null)[attr];
}else{
// 由于attr 是个变量,所以呢, 不能用obj.currentStyle.attr 的方式
// 用如下方式
return obj.currentStyle[attr];
// ie explorer IE 非常讨厌,都是为了兼容它
}
}
// 下一步就是为多个div 都添加运动操作,那你就要一些全局变量做成属性了!、
window.onload = function(){
var oDiv = document.getElementById('box');
var oDiv4 = document.getElementById('box4');
var oBtn = document.getElementById('oBtn');
var oBtn2 = document.getElementById('oBtn2');
function move2(obj,target,speed){
clearInterval(obj.timer);
// 1,在开启定时器之前,首先要判断一下,确定speed 的正负
// 11 得到当前值
var currentLeft =parseInt(getStyle(obj,'left')) ;
if(currentLeft>target){
// 从右往左移动
speed = -speed;
}else{
speed = Math.abs(speed);
}
obj.timer = setInterval(function(){
var left = parseInt(getStyle(obj,'left')) ;
if((speed>0 &&left>=target)||(speed<0 &&left<=target)){
//防止超出边界
obj.style.left = target+"px";
clearInterval(obj.timer);
}else{
// 若没到达目的地,则继续向右走
obj.style.left = left + speed + "px";
}
},20);
}
// 往左移动
function dealClick (){
move2(oDiv4,500,10);
move2(oDiv,500,20);
}
addListener(oBtn,'click',dealClick);
oBtn2.onclick = function(){
move2(oDiv4,0,10);
}
}
</script>
</body>
</html>
但是我们这个版本还是很low ,只能左右移动,那么我想上下,变宽变高呢?,我们就得继续重构!放下一篇吧