网页缓冲效果特效代码

网页制作Webjx文章简介:首先我要说的是,我是菜鸟,这些文章是献给和我一样想要学习的菜鸟们.论坛里有几位朋友发过缓冲效果,但是象我这种菜鸟看他们的代码实在是一种痛苦,因为不是一个层次的. 先我要说的是,我是菜鸟,这些文章是

首先我要说的是,我是菜鸟,这些文章是献给和我一样想要学习的菜鸟们.论坛里有几位朋友发过缓冲效果,但是象我这种菜鸟看他们的代码实在是一种痛苦,因为不是一个层次的. 先我要说的是,我是菜鸟,这些文章是献给和我一样想要学习的菜鸟们.
论坛里有几位朋友发过缓冲效果,但是象我这种菜鸟看他们的代码实在是一种痛苦,因为不是一个层次的.
所以我用最最冗余的代码来写出这种效果,目的就是希望菜鸟们能看懂,
当我们不菜的时候我们再回头去看高手们的东西.
最后,请相信这句话:
有一天菜鸟也会成为高手,(前提是你要努力哈哈^^)
运行代码框

[Ctrl A 全部选择 提示:你可先修改部分代码,再按运行]

关键代码请看这两个就可以了
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)
}
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

将如下代码加到你网页的头部之间: meta name=viewport content=width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no meta name=apple-mobile-web-app-capable content=yes / meta name=apple-mobile-web-app-statu
demo展示1: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=http://www.w3.org/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / tit
本文实例为大家分享了js弹出窗口展示的具体代码,供大家参考,具体内容如下 !DOCTYPE htmlhtmlhead lang=en meta charset=UTF-8 title/title style body{ /*margin: 0;*/ } #div1{ width: 100px; height: 100px; border: 1px solid red; } /style/headbodydi
每次想快速测试页面效果的时候,特别是在学习前端代码的时候,就想到W3school的那个试一试功能,一直都是用他们那个在线的版本测试, 今天发现网上有类似的代码,以后就不需要联网了,想测就可以直接用了。 下面把代码贴上 首先先建立一个样式文件tc.css Css
HTML5可不是什么虚幻的概念,与其高谈阔论的讨论HTML5未来的趋势和价值,不如一起研究一下现在的HTML5可以做出哪些成果,可以让我们做出出色的产品。 Form Follows Function 就是一个展示HTML5实现的网站,目前网站展示了14个作品,其中包括了交互操作以及视
document.onkeydown = function(event) { var target, code, tag; if (!event) { event = window.event; //针对ie浏览器 target = event.srcElement; code = event.keyCode; if (code == 13) { tag = target.tagName; if (tag == TEXTAREA) { return true; }