当前位置：网页特效 > 网页特效演示页  

菜单导航特效日期时间特效背景图像特效图层样式特效鼠标特效代码页面窗口特效色彩表格特效文字特效代码表单按钮特效计数转换特效游戏网页特效实例网页特效

缓冲效果(原创) - 网页特效代码演示 - 特效代码运行 

以下是HTML网页特效代码，点击运行按钮可查看效果：

[提示：可先修改代码再按运行]

关键代码请看这两个就可以了

复制内容到剪贴板
代码:
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)
}

刚被其它网友点击的网页特效 

搜索查询面板 

本月特效排行 

本周特效排行 

本日特效排行