- 多物体同时运动
- 多个div,鼠标移入变宽
- 单定时器,存在问题
- 每个Div一个定时器
多物体运动不能共用一个定时器,每个div定一个定时器。
多物体运动不能共用一个属性,所有东西不能共用。
鼠标一接触,其宽度到300px.
<style>
div{
width: 100px;
height: 100px;
background: red;
margin-top: 5px;
}
</style>
</head>
<script>
window.onload=function(){
var oDiv=document.getElementsByTagName('div');
for(var i=0;i<oDiv.length;i++){
oDiv[i].onmouseover=function(){
startMove(300,this);
}
oDiv[i].onmouseout=function(){
startMove(100,this);
}
}
}
var timer=null;
function startMove(iTarget,obj){
clearInterval(timer);
timer=setInterval(function(){
var speed=(iTarget-obj.offsetWidth)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(obj.offsetWidth==iTarget){
clearInterval(timer)
}else{
obj.style.width=obj.offsetWidth+speed+'px';
}
},30);
}
</script>
<body>
<div></div>
<div></div>
<div></div>
</body>
问题:整个程序中只有一个定时器,当鼠标从一个div移到另一个div中,所以前一个div变不会原来的位置。
在每个obj上面都加一个定时器。
<script>
window.onload=function(){
var oDiv=document.getElementsByTagName('div');
for(var i=0;i<oDiv.length;i++){
oDiv[i].timer=null;
oDiv[i].onmouseover=function(){
startMove(300,this);
}
oDiv[i].onmouseout=function(){
startMove(100,this);
}
}
}
/*var timer=null;*/
function startMove(iTarget,obj){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var speed=(iTarget-obj.offsetWidth)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(obj.offsetWidth==iTarget){
clearInterval(obj.timer)
}else{
obj.style.width=obj.offsetWidth+speed+'px';
}
},30);
}
</script>
多个div淡入淡出
<style>
div{
width: 100px;
height: 100px;
margin: 20px;
float: left;
background: red;
filter:alpha(opacity:30);
opacity: 0.3;
}
</style>
</head>
<script>
window.onload=function(){
var oDiv=document.getElementsByTagName('div');
for(var i=0;i<oDiv.length;i++){
oDiv[i].timer=null;
oDiv[i].onmouseover=function(){
startMove(this,100);
}
oDiv[i].onmouseout=function(){
startMove(this,30);
}
}
}
var alpha=30;
/*var timer=null;*/
function startMove(obj,iTarget){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
/*var speed=0;
if(iTarget>alpha){
speed=10;
}else{
speed=-10;
}*/
var speed=(iTarget-alpha)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(alpha==iTarget){
clearInterval(obj.timer);
}else{
alpha+=speed;
obj.style.filter='alpha(opacity:'+alpha+')';//IE
obj.style.opacity=alpha/100;
}
},30);
}
</script>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
还是有问题。在多物体运动中,所有的东西都不能共用。alpha共用了。
- 多物体运动框架
- 定时器作为物体的属性
- 参数的传递:物体、目标值
- 多个物体淡入淡出:
- 所有东西都不能共用
- 属性与运动对象绑定
<style>
div{
width: 100px;
height: 100px;
margin: 20px;
float: left;
background: red;
filter:alpha(opacity:30);
opacity: 0.3;
}
</style>
</head>
<script>
window.onload=function(){
var oDiv=document.getElementsByTagName('div');
for(var i=0;i<oDiv.length;i++){
oDiv[i].alpha=30;
oDiv[i].timer=null;
oDiv[i].onmouseover=function(){
startMove(this,100);
}
oDiv[i].onmouseout=function(){
startMove(this,30);
}
}
}
var alpha=30;
/*var timer=null;*/
function startMove(obj,iTarget){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
/*var speed=0;
if(iTarget>alpha){
speed=10;
}else{
speed=-10;
}*/
var speed=(iTarget-obj.alpha)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(obj.alpha==iTarget){
clearInterval(obj.timer);
}else{
obj.alpha+=speed;
obj.style.filter='alpha(opacity:'+obj.alpha+')';//IE
obj.style.opacity=obj.alpha/100;
}
},30);
}
</script>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
offsetWidth:width+border+padding.
<style>
#div1{
width: 200px;
height: 200px;
background: red;
border: 1px solid black;
}
</style>
<script>
setInterval(function(){
var oDiv=document.getElementById('div1');
oDiv.style.width=oDiv.offsetWidth-1+'px';
},30);
</script>
</head>
<body>
<div id="div1"></div>
</body>
红块的宽度不会减少反而会增加oDiv.offsetWidth=202.
解决方法我们用行间样式获取width。
<style>
#div1{
height: 200px;
background: red;
border: 1px solid black;
}
</style>
<script>
setInterval(function(){
var oDiv=document.getElementById('div1');
oDiv.style.width=parseInt(oDiv.style.width)-1+'px';
},30);
</script>
</head>
<body>
<div id="div1" style="width: 200px"></div>
</body>
注意:style只能取行间样式,如果width放在样式表里,就不能style.width获取了。
获取样式表的属性:
<style>
#div1{
width: 200px;
height: 200px;
background: red;
border: 1px solid black;
}
</style>
<script>
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
}
}
setInterval(function(){
var oDiv=document.getElementById('div1');
oDiv.style.width=parseInt(getStyle(oDiv,'width'))-1+'px';
},30);
</script>
</head>
<body>
<div id="div1"></div>
</body>
我们不能再用offsetWidth了,
两个div变宽变高:
<style>
#div1,#div2{
width: 100px;
height: 100px;
background: yellow;
float: left;
margin: 20px;
}
</style>
<script>
window.onload=function(){
var oDiv1=document.getElementById('div1');
oDiv1.onmouseover=function(){
startMove(this,300);
}
oDiv1.onmouseout=function(){
startMove(this,100);
}
var oDiv2=document.getElementById('div2');
oDiv2.onmouseover=function(){
startMove2(this,300);
}
oDiv2.onmouseout=function(){
startMove2(this,100);
}
}
function startMove(obj,iTarget){
/* var timer=null;*/
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var speed=(iTarget-obj.offsetHeight)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(obj.offsetHeight==iTarget){
clearInterval(obj.timer);
}else{
obj.style.height=obj.offsetHeight+speed+"px";
}
},30);
}
function startMove2(obj,iTarget){
/*var timer=null;*/
clearInterval(obj.timer);
timer=setInterval(function(){
var speed=(iTarget-obj.offsetWidth)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(obj.offsetWidth==iTarget){
clearInterval(obj.timer);
}else{
obj.style.width=obj.offsetWidth+speed+"px";
}
},30);
}
</script>
</head>
<body>
<div id="div1">变高</div>
<div id="div2">变宽</div>
</body>
不用offsetWidth.....:
<style>
#div1,#div2{
width: 100px;
height: 100px;
background: yellow;
float: left;
margin: 20px;
border: 10px solid black;
}
</style>
<script>
window.onload=function(){
var oDiv1=document.getElementById('div1');
oDiv1.onmouseover=function(){
startMove(this,300);
}
oDiv1.onmouseout=function(){
startMove(this,100);
}
var oDiv2=document.getElementById('div2');
oDiv2.onmouseover=function(){
startMove2(this,300);
}
oDiv2.onmouseout=function(){
startMove2(this,100);
}
}
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
}
}
function startMove(obj,iTarget){
/* var timer=null;*/
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var cur=parseInt(getStyle(obj,'height'));
var speed=(iTarget-cur)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(cur==iTarget){
clearInterval(obj.timer);
}else{
obj.style['height']=cur+speed+"px";
}
},30);
}
/* function startMove2(obj,iTarget){
/!*var timer=null;*!/
clearInterval(obj.timer);
timer=setInterval(function(){
var speed=(iTarget-obj.offsetWidth)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(obj.offsetWidth==iTarget){
clearInterval(obj.timer);
}else{
obj.style.width=obj.offsetWidth+speed+"px";
}
},30);
}*/
</script>
</head>
<body>
<div id="div1">变高</div>
<div id="div2">变宽</div>
</body>
- 任意值运动框架 :
简化:使用一个函数。
<style>
#div1,#div2{
width: 100px;
height: 100px;
background: yellow;
float: left;
margin: 20px;
border: 10px solid black;
}
</style>
<script>
window.onload=function(){
var oDiv1=document.getElementById('div1');
oDiv1.onmouseover=function(){
startMove(this,300,'height');
}
oDiv1.onmouseout=function(){
startMove(this,100,'height');
}
var oDiv2=document.getElementById('div2');
oDiv2.onmouseover=function(){
startMove(this,300,'width');
}
oDiv2.onmouseout=function(){
startMove(this,100,'width');
}
}
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
}
}
function startMove(obj,iTarget,attr){
/* var timer=null;*/
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var cur=parseInt(getStyle(obj,attr));
var speed=(iTarget-cur)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(cur==iTarget){
clearInterval(obj.timer);
}else{
obj.style[attr]=cur+speed+"px";
}
},30);
}
</script>
</head>
<body>
<div id="div1">变高</div>
<div id="div2">变宽</div>
</body>
上面的代码不仅仅可以让width和height变化,也可以让其他属性变化。但是opacity不可以。
var oDiv3=document.getElementById('div3');
oDiv3.onmouseover=function(){
startMove(this,50,'fontSize');
}
oDiv3.onmouseout=function(){
startMove(this,14,'fontSize');
}
opacity也可以:
<style>
#div1{
width: 100px;
height: 100px;
background: yellow;
float: left;
margin: 20px;
border: 10px solid black;
filter: alpha(opacity:30);
opacity: 0.3;
}
</style>
<script>
window.onload=function(){
var oDiv1=document.getElementById('div1');
oDiv1.onmouseover=function(){
startMove(this,100,'opacity');
}
oDiv1.onmouseout=function(){
startMove(this,30,'opacity');
}
}
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
}
}
function startMove(obj,iTarget,attr){
/* var timer=null;*/
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var cur=0;
if(attr=='opacity'){
cur=parseFloat(getStyle(obj,attr))*100;
}else{
cur=parseInt(getStyle(obj,attr));
};
var speed=(iTarget-cur)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(cur==iTarget){
clearInterval(obj.timer);
}else{
if(attr=='opacity'){
obj.style.filter='alpha(opacity:'+(cur+speed)+')';
obj.style.opacity=(cur+speed)/100;
}else{
obj.style[attr]=cur+speed+"px";
};
}
},30);
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
计算机不能真正存储小数。其实它存的是近似值。
Math.round();四舍五入。
//Math.round四舍五入
cur=Math.round(parseFloat(getStyle(obj,attr))*100);