关键代码请看这两个就可以了
function f_s(){
var obj=document.getElementById("box");//获取ID为box的对象
obj.style.display="block";//设置对象obj为显示
obj.style.width="1px"; //设置对象obj的宽度为1px
var changeW=function(){ //(关于函数这一点，什么闭包，什么类、原型的，弄的我头大了，以后慢慢理解吧。这里我理解的是创建一个函数直接量并把它存进变量changeW里)
var obj_w=parseInt(obj.style.width);//把对象的宽度转换为一个数值，并存入变量obj_w中；
if(obj_w<600){ //判断，如果宽度数值小于600
obj.style.width=(obj_w+Math.ceil((600-obj_w)/15))+"px";//计算对象的宽度。。。随着宽度的变长，递增量越来越小
}
else{
clearInterval(bw);//如果大于等于600的话，不再执行setInterval,意思就是这个时候停止增加宽度了。
}
}
var bw=window.setInterval(changeW,1)//每0.001秒调用一次changeW
}
//slow to fast 由慢到快
//声明一个函数s_f()
function s_f(){
var obj=document.getElementById("box2");
var e_add=1;//初始化递增量
obj.style.display="block";
obj.style.width="1px";
var changeW=function(){//我理解的是创建一个函数直接量并把它存进变量changeW里
var obj_w;e_add
obj_w=parseInt(obj.style.width);
e_add*=1.05;//以后每次递增的值都是
if(obj_w<600){
obj.style.width=(obj_w+e_add)+"px";//随着宽度的变长，递增量越来越大
}
else{
clearInterval(bw);
obj.style.width="600px";//因为(obj_w+e_add)这种计算方法会超出预定义的宽度,所以这里在缓冲完以后重新设置它的宽度.造成一种假象哈哈
}
}
var bw=window.setInterval(changeW,1)
}
|
