|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
Div全称division意为“区分”使用DIV的方法跟使用其他tag的方法一样。
poluoluo文章简介：起首我要说的是,我是菜鸟,这些文章是献给和我一样想要进修的菜鸟们.论坛里有几位伴侣发过缓冲效果,可是象我这类菜鸟看他们的代码其实是一种疾苦,由于不是一个条理的.
先我要说的是,我是菜鸟,这些文章是献给和我一样想要进修的菜鸟们.
论坛里有几位伴侣发过缓冲效果,可是象我这类菜鸟看他们的代码其实是一种疾苦,由于不是一个条理的.
以是我用最最冗余的代码来写出这类效果,目标就是但愿菜鸟们能看懂,
当我们不菜的时分我们再转头往看妙手们的器材.
最初,请信任这句话:
有一天菜鸟也会成为妙手,(条件是你要勉力哈哈^^)运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>UntitledDocument</title></head><style>body{font-size:12px}#box{background:#FFFFCC;border:1pxsolid#FFCC66;width:600px;height:100px;display:none;text-align:right;margin:2px;overflow:hidden}#box2{background:#CDEDEC;border:1pxsolid#3399CC;width:600px;height:100px;display:none;text-align:right;margin:2px;overflow:hidden}.bt_down{background:#DDDCE4url(http://bbs.blueidea.com/images/default/arrow_down.gif)no-repeat35px46%;padding:5px20px5px5px;text-align:left}#my{}#my.my_{background:#DDDCE4;width:200px;height:150px;display:none;overflow:hidden}#my.my_ul{list-style:none;padding:0;margin:10px010px10px;height:140px}#my.my_ulli{width:48%;float:left;text-align:center;line-height:22px;border-bottom:1pxsolid#B6B6C0}#s_img{width:430px;overflow:scroll;overflow-y:hidden;overflow-x:hidden;border:1pxsolid#ccc}#imgsul{list-style:none;margin-left:0;padding-left:0}#imgsulli{float:left;margin:3px;}</style><script>//上面反复的相似的我就不做正文了~~//fasttoslow由快到慢//声明一个函数f_s()functionf_s(){varobj=document.getElementById("box");//猎取ID为box的工具obj.style.display="block";//设置工具obj为显现obj.style.width="1px"; //设置工具obj的宽度为1pxvarchangeW=function(){//(关于函数这一点，甚么闭包，甚么类、原型的，弄的我头年夜了，今后渐渐了解吧。这里我了解的是创立一个函数间接量并把它存进变量changeW里)varobj_w=parseInt(obj.style.width);//把工具的宽度转换为一个数值，并存进变量obj_w中；if(obj_w<600){//判别，假如宽度数值小于600obj.style.width=(obj_w+Math.ceil((600-obj_w)/15))+"px";//盘算工具的宽度。。。跟着宽度的变长，递增量愈来愈小}else{clearInterval(bw);//假如年夜于即是600的话，不再实行setInterval,意义就是这个时分中断增添宽度了。}}varbw=window.setInterval(changeW,1)//每0.001秒挪用一次changeW}//slowtofast由慢到快//声明一个函数s_f()functions_f(){varobj=document.getElementById("box2");vare_add=1;//初始化递增量obj.style.display="block";obj.style.width="1px";varchangeW=function(){//我了解的是创立一个函数间接量并把它存进变量changeW里varobj_w;e_addobj_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)这类盘算办法会超越预界说的宽度,以是这里在缓冲完今后从头设置它的宽度.形成一种假象哈哈}}varbw=window.setInterval(changeW,1)}//封闭层functioncloseW(id,w){varobj=document.getElementById(id);//猎取ID为box的工具obj.style.width=w;varcloseDiv=function(){varobj_w=parseInt(obj.style.width);if(obj_w>1){obj.style.width=(obj_w-Math.ceil(obj_w)/20)+"px";//盘算工具的宽度。。。跟着宽度的变长，递增量愈来愈小}else{clearInterval(bw);obj.style.display="none";}}varbw=window.setInterval(closeDiv,1)//每0.001秒挪用一次changeW}//上面这个函数是翻开我的↓functionopen_my(){varobj=document.getElementById("my_");//猎取ID为box的工具obj.style.display="block";//设置工具obj为显现obj.style.width="1px"; //设置工具obj的宽度为1pxobj.style.height="1px";varchangeW=function(){//(关于函数这一点，甚么闭包，甚么类、原型的，弄的我头年夜了，今后渐渐了解吧。这里我了解的是创立一个函数间接量并把它存进变量changeW里)varobj_w=parseInt(obj.style.width);//把工具的宽度转换为一个数值，并存进变量obj_w中；varobj_h=parseInt(obj.style.height);if(obj_w<200&&obj_h<150){//判别，假如宽度数值小于600obj.style.width=(obj_w+Math.ceil((200-obj_w)/20))+"px";//盘算工具的宽度。。。跟着宽度的变长，递增量愈来愈小obj.style.height=(obj_h+Math.ceil((150-obj_h)/15))+"px";}else{clearInterval(bw);//假如年夜于即是600的话，不再实行setInterval,意义就是这个时分中断增添宽度了。}}varbw=window.setInterval(changeW,1)//每0.001秒挪用一次changeW}//上面这个函数是封闭我的↓显现出来的层functionclose_my(id){varobj=document.getElementById(id);//猎取ID为box的工具varcloseDiv=function(){varobj_w=parseInt(obj.style.width);varobj_h=parseInt(obj.style.height);if(obj_w>1&&obj_h>1){obj.style.width=(obj_w-Math.ceil(obj_w)/20)+"px";//盘算工具的宽度。。。跟着宽度的变长，递增量愈来愈小obj.style.height=(obj_h-Math.ceil(obj_h)/15)+"px";}else{clearInterval(bw);obj.style.display="none";}}varbw=window.setInterval(closeDiv,1)//每0.001秒挪用一次changeW}</script><body>起首我要说的是,这些文章是献给和我一样想要进修的菜鸟们.<br/><br/>论坛里有几位伴侣发过缓冲效果,可是象我这类菜鸟看他们的代码其实是一种疾苦,由于不是一个条理的.<br/><br/>以是我用最最冗余的代码来写出这类效果,目标就是但愿菜鸟们能看懂,<br/><br/>当我们不菜的时分我们再转头往看妙手们的器材.<br/><br/>最初,请信任这句话:<br/><br/>有一天菜鸟也会成为妙手,(条件是你要勉力哈哈^^)<br/><br/><ahref="#"onclick="f_s()">由快到慢</a><br/><br/><ahref="#"onclick="s_f();returnfalse">由慢到快</a><br/><br/><divid="box"><h3>快->慢<ahref="#"onclick="closeW(box,600px)">[封闭]</a></h3></div><divid="box2"><h3>慢->快<ahref="#"onclick="closeW(box2,600px)">[封闭]</a></h3></div><h3>我们既然做出这类效果了，就要把它使用到实践傍边往</h3><h3>如今来看一下缓冲效果在实践傍边的使用</h3><divid="my"><ahref="#"class="bt_down"onmou搜索引擎优化ver="open_my()">我的</a><divclass="my_"id="my_"><ul><li>我的话题</li><li>我的保藏</li><li>我的权限</li><li>我的投票</li><li>我的举动</li><li>我的同城</li><li>我的作品</li><li>我的地点</li><li>我的特长</li><li>我的密友</li><li>我的空间</li><li><ahref="#"onclick="close_my(my_)">封闭</a></li></ul></div></div><br/><br/><divid="s_img"style="width:430px;"><divid="imgs"style="width:1700px;"><ul><li>向左转动</a><ahref="#"onclick="scror();returnfalse">向右转动</a><br/><br/>固然,下面这类效果只是我用来演示缓冲效果的,<br/><br/>它其实不合适做这类效果,由于我这里写的函数只会转一次.<br/><br/>屡次的话用这类办法好象不是很好完成,<br/><br/>最初我说一下,不要被我这里的代码吓跑,<br/><br/>看上往代码良多,次要是前面2个列子的缘故原由使代码看起来良多<br/><br/>真正主要的是f_s(),s_f(),closeW()<br/><br/>假如可以看分明,那末你也能够触类旁通了.<br/><br/>明天就说到这里了,但愿这些器材能对你有一点匡助^^<br/><br/>by退色<br/><br/><scripttype="text/javascript">functionscror(){varobj=document.getElementById("s_img");varh=function(){varobj_w=parseInt(obj.style.width);if(obj.scrollLeft<obj_w){obj.scrollLeft=(obj.scrollLeft+Math.ceil((obj_w-obj.scrollLeft)/15));}else{clearInterval(bw);}}varbw=window.setInterval(h,1)}functionscrol(){varobj=document.getElementById("s_img");varh=function(){varobj_w=parseInt(obj.style.width);if(obj.scrollLeft>1){obj.scrollLeft-=Math.ceil(obj_w)/50;}else{clearInterval(bw);}}varbw=window.setInterval(h,1)//obj.scrollLeft-=parseInt(obj.style.width);}</script></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
关头代码请看这两个就能够了
functionf_s(){
varobj=document.getElementById("box");//猎取ID为box的工具
obj.style.display="block";//设置工具obj为显现
obj.style.width="1px";//设置工具obj的宽度为1px
varchangeW=function(){//(关于函数这一点，甚么闭包，甚么类、原型的，弄的我头年夜了，今后渐渐了解吧。这里我了解的是创立一个函数间接量并把它存进变量changeW里)
varobj_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,意义就是这个时分中断增添宽度了。
}
}
varbw=window.setInterval(changeW,1)//每0.001秒挪用一次changeW
}
//slowtofast由慢到快
//声明一个函数s_f()
functions_f(){
varobj=document.getElementById("box2");
vare_add=1;//初始化递增量
obj.style.display="block";
obj.style.width="1px";
varchangeW=function(){//我了解的是创立一个函数间接量并把它存进变量changeW里
varobj_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)这类盘算办法会超越预界说的宽度,以是这里在缓冲完今后从头设置它的宽度.形成一种假象哈哈
}
}
varbw=window.setInterval(changeW,1)
}
有了CSS，我们不再需要用FONT标签或者透明的1pxGIF图片来控制标题，改变字体颜色，字体样式等等 |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-15 23:59:09
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜