目录
0x00 js的运动基础
先让div动起来，动起来之后设置一个条件让他停止运动，要不然他会一直运动下去
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#div1{
position: absolute;
left:0;
top:50px;
width:200px;
height:200px;
background: blue;
}
</style>
</head>
<body>
<button οnclick="moving()">开始运动</button>
<div id='div1'></div>
<script type="text/javascript">
var oDiv=document.getElementById('div1')
var timer =null
function moving(){
timer = setInterval(function(){
if(oDiv.offsetLeft>300){
clearInterval(timer);
}else{
oDiv.style.left = oDiv.offsetLeft +1+'px';
}
},30);
}
</script>
</body>
</html>0x01 单物体运动框架
封装好一个方法，让外部传入目的地的值，即让物体停下来的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#div1{
position: absolute;
left:0;
top:50px;
width:200px;
height:200px;
background: blue;
}
</style>
</head>
<body>
<button οnclick="moving(500)">开始运动</button>
<div id='div1'></div>
<script type="text/javascript">
var oDiv=document.getElementById('div1')
var timer =null
function moving(target){
var speed = 0;
if(oDiv.offsetLeft > target){
speed = -7
}else{
speed = 7
}
timer = setInterval(function(){
if(Math.abs(oDiv.offsetLeft-target)<=7){
oDiv.style.left = target+'px';
clearInterval(timer);
}else{
oDiv.style.left = oDiv.offsetLeft +speed+'px';
}
},30);
}
</script>
</body>
</html>0x02 多物体运动框架
封装一个方法让多个物体共用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1,div{
float:left;
height:100px;
width:100px;
background:black;
margin-left:20px;
}
</style>
</head>
<body>
<div id='div1'></div>
<div></div>
<div></div>
<script type="text/javascript">
var oDiv = document.getElementsByTagName('div');
for(var i=0;i<oDiv.length;i++){
oDiv[i].timer =null;
oDiv[i].onmouseover = function(){
moving(this,400);
};
oDiv[i].onmouseout = function(){
moving(this,100);
};
}
function moving(obj,target){
clearInterval(obj.timer);
var speed =(target-obj.offsetHeight)/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
obj.timer = setInterval(function(){
if(Math.abs(obj.offsetHeight-target)<=Math.abs(speed)){
obj.style.height=target+'px';
clearInterval(obj.timer);
}else{
obj.style.height = obj.offsetHeight + speed+'px';
}
},30)
}
</script>
</body>
</html>0x03 改变单一任意值运动框架
在多物体运动框架的基础上增加一些修改样式的参数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1,div{
float:left;
height:100px;
width:100px;
background:black;
margin-left:20px;
font-size: 10px;
color:green;
}
</style>
</head>
<body>
<div id='div1'>西北老汉</div>
<div>空条承太郎</div>
<div>乔瑟夫乔斯达</div>
<script type="text/javascript">
var oDiv = document.getElementsByTagName('div');
oDiv[0].timer =null;
oDiv[0].onmouseover = function(){
moving(this,'fontSize',50);
};
oDiv[0].onmouseout = function(){
moving(this,'fontSize',12);
};
oDiv[1].timer =null;
oDiv[1].onmouseover = function(){
moving(this,'width',400);
};
oDiv[1].onmouseout = function(){
moving(this,'width',100);
};
oDiv[2].timer =null;
oDiv[2].onmouseover = function(){
moving(this,'height',400);
};
oDiv[2].onmouseout = function(){
moving(this,'height',100);
};
// 返回对象obj的attr属性
function getStyleValue(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
function moving(obj,attr,target){
clearInterval(obj.timer);
// 获取要修改属性的值
var currvalue=parseInt(getStyleValue(obj,attr));
var speed =(target-currvalue)/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
obj.timer = setInterval(function(){
currvalue=parseInt(getStyleValue(obj,attr));
if(Math.abs(currvalue-target)<=Math.abs(speed)){
obj.style[attr]= target+'px';
clearInterval(obj.timer);
}else{
obj.style[attr] = currvalue + speed+'px';
}
},30)
}
</script>
</body>
</html>0x04 链式运动框架
在改变单一任意值运动框架的基础上添加一个回调函数参数
链式运动顾名思义就是先运动完一个值再运动另一个。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1,div{
float:left;
height:100px;
width:100px;
background:black;
margin-left:20px;
font-size: 10px;
color:green;
}
</style>
</head>
<body>
<div id='div1'>点击我展开</div>
<div id='div2'>空条承太郎</div>
<div id='div3'>点击我收起</div>
<script type="text/javascript">
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');
oDiv1.timer=oDiv2.timer =oDiv3.timer=null;
oDiv1.onclick = function(){
moving(oDiv2,'width',400,function(){
moving(oDiv2,'height',400);
});
};
oDiv3.onclick = function(){
moving(oDiv2,'height',100,function(){
moving(oDiv2,'width',100);
});
}
// 返回对象obj的attr属性
function getStyleValue(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
function moving(obj,attr,target,callbackfun){
clearInterval(obj.timer);
// 获取要修改属性的值
var currvalue=parseInt(getStyleValue(obj,attr));
var speed =(target-currvalue)/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
obj.timer = setInterval(function(){
currvalue=parseInt(getStyleValue(obj,attr));
if(Math.abs(currvalue-target)<=Math.abs(speed)){
obj.style[attr]= target+'px';
clearInterval(obj.timer);
if(callbackfun){
callbackfun();
}
}else{
obj.style[attr] = currvalue + speed+'px';
}
},30)
}
</script>
</body>
</html>0x05 改变多值运动框架
同时改变多个我们需要改变的样式值，不像链式操作那样需要等待前一个完成才可以执行下一个
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1,div{
float:left;
height:100px;
width:100px;
background:black;
margin-left:20px;
font-size: 10px;
color:green;
}
</style>
</head>
<body>
<div id='div1'>点击我展开</div>
<div id='div2'>空条承太郎</div>
<div id='div3'>点击我收起</div>
<script type="text/javascript">
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');
oDiv1.timer=oDiv2.timer =oDiv3.timer=null;
oDiv1.onclick = function(){
moving(oDiv2,{"width":400,"height":400,"font-size":30});
};
oDiv3.onclick = function(){
moving(oDiv2,{"width":100,"height":100,"font-size":10});
}
// 返回对象obj的attr属性
function getStyleValue(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
function moving(obj,json){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
// 判断所有运动是否已完成
var isClear= true;
for(var attr in json){
var currvalue=parseInt(getStyleValue(obj,attr));
var speed =(json[attr]-currvalue)/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(currvalue!=json[attr]){
isClear=false;
obj.style[attr] = currvalue + speed+'px';
}
}
if(isClear == true){
clearInterval(obj.timer);
}
},30)
}
</script>
</body>
</html>0x06 完美运动框架
在多值运动框架的基础上考虑运动完之后传入回调函数
注意改变透明度opacity需要做特殊处理
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
float:left;
height:100px;
width:100px;
background:black;
margin-left:20px;
font-size: 10px;
color:green;
}
#div2{
/*兼容ie的写法*/
filter: alpha(opacity:30);
/*兼容非ie的写法*/
opacity:0.3;
/*写0到1之间的数，修改透明度*/
}
</style>
</head>
<body>
<div id='div1'>点击我展开</div>
<div id='div2'>空条承太郎</div>
<div id='div3'>点击我收起</div>
<script type="text/javascript">
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');
oDiv1.timer=oDiv2.timer =oDiv3.timer=null;
oDiv1.onclick = function(){
moving(oDiv2,{"width":400,"height":400,"font-size":30,'opacity':100},function(){alert("我已经执行完了");});
};
oDiv3.onclick = function(){
moving(oDiv2,{"width":100,"height":100,"font-size":10,'opacity':30});
}
// 返回对象obj的attr属性
function getStyleValue(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
function moving(obj,json,callbackfun){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
// 判断所有运动是否已完成
var isClear= true;
for(var attr in json){
var currvalue=0;
if(attr=='opacity'){
currvalue=Math.round(getStyleValue(obj,attr)*100);
// Math.round()四舍五入
}else{
currvalue=parseInt(getStyleValue(obj,attr));
}
var speed =(json[attr]-currvalue)/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(currvalue!=json[attr]){
isClear=false;
if(attr=='opacity'){
obj.style.filter="opacity(alpha:"+currvalue+speed+')';
obj.style.opacity=(currvalue+speed)/100;
}else{
obj.style[attr] = currvalue + speed+'px';
}
}
}
if(isClear == true){
clearInterval(obj.timer);
if(callbackfun){
callbackfun();
}
}
},30)
}
</script>
</body>
</html>