来看看：网页缓冲效果殊效代码
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>
关头代码请看这两个就能够了
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图片来控制标题，改变字体颜色，字体样式等等 是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。 所见则所得网页编辑器的优点就是直观性，使用方便，容易上手. 帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。 只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。 时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上 以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。 Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。 难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.
页:
[1]