html某个模块移动,【图片】【JS】有关div收缩和模块移动【it发烧友吧】_百度贴吧...

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼

HTML+JS：

动画效果制作

#dv1{

width:400px;

height:100px;

border:1px solid blue;

}

#dv2{

width:100px;

height:100px;

background-color:red;

position:absolute;

top:135px;

}

var get=function(id){

return document.getElementById(id);

};

οnlοad=function(){

var btn1=get("btn1");

var dv1=get("dv1");

btn1.οnclick=function(){

var recId1=setInterval(

function(){

var width=parseInt(dv1.style.width||dv1.offsetWidth);

var p=Math.ceil(width/10);

width=width-p;

if(width<=0){

clearInterval(recId1);

dv1.style.display="none";

}

dv1.style.width=width+"px";}

,20);

};

var btn2=get("btn2");//这个获取值必须写在onload里面，不然获取到的值为null

var dv2=get("dv2");

btn2.οnclick=function(){

var recId2=setInterval(

function(){ //这里千万要注意定义函数

var curX=parseInt(dv2.style.left||dv2.offsetLeft);

var p=Math.ceil((800-curX)/10);

curX=curX+p;

if(curX>=800){

clearInterval(recId2);

}

dv2.style.left=curX;

}

,20);

};

};