1顶

几个漂亮缓冲效果

稿源：互联网 2022-06-26 19:13:44 点击： 2137 撤稿纠错

这里有几款很漂亮的缓冲效果，相信你也会喜欢的。

以下讨论的是和相关的几个漂亮缓冲效果教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<title>几款漂亮的缓冲效果，sky整理收集。</title>
</head>
<style>
body { font-size:12px}
#box { background:#FFFFCC; border:1px solid #FFCC66; width:600px; height:100px;display:none; text-align:right; margin:2px; overflow:hidden}
#box2 { background:#CDEDEC; border:1px solid #3399CC; width:600px; height:100px;display:none;text-align:right; margin:2px; overflow:hidden}
.bt_down {background: #DDDCE4 url(/img/arrow_down.gif) no-repeat 35px 46%; padding:5px 20px 5px 5px; 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:10px 0 10px 10px; height:140px}
#my .my_ ul li { width:48%; float:left; text-align:center; line-height:22px; border-bottom:1px solid #B6B6C0}
#s_img { width:430px; overflow:scroll; overflow-y:hidden;overflow-x:hidden; border:1px solid #ccc}
#imgs ul { list-style:none; margin-left:0; padding-left:0}
#imgs ul li{ float:left; margin:3px;}
</style>
<script>
//下面重复的类似的我就不做注释了~~
//fast to slow 由快到慢
//声明一个函数f_s()
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)
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
//关闭层
function closeW(id,w){
 var obj=document.getElementById(id);//获取ID为box的对象
 obj.style.width=w;
 var closeDiv=function(){
  var obj_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";
  }
 }
 var bw=window.setInterval(closeDiv,1)//每0.001秒调用一次changeW
}
//下面这个函数是打开我的↓
function open_my(){
 var obj=document.getElementById("my_");//获取ID为box的对象
 obj.style.display="block";//设置对象obj为显示
 obj.style.width="1px"; //设置对象obj的宽度为1px
 obj.style.height="1px";
 var changeW=function(){ //(关于函数这一点，什么闭包，什么类、原型的，弄的我头大了，以后慢慢理解吧。这里我理解的是创建一个函数直接量并把它存进变量changeW里)//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
  var obj_w=parseInt(obj.style.width);//把对象的宽度转换为一个数值，并存入变量obj_w中；
  var obj_h=parseInt(obj.style.height);
  if(obj_w<200 && obj_h<150){ //判断，如果宽度数值小于600
   obj.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,意思就是这个时候停止增加宽度了。
  }
 } //欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
 var bw=window.setInterval(changeW,1)//每0.001秒调用一次changeW
}
//下面这个函数是关闭我的↓显示出来的层
function close_my(id){
 var obj=document.getElementById(id);//获取ID为box的对象
 var closeDiv=function(){
  var obj_w=parseInt(obj.style.width);
  var obj_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";
  }
//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
 }
 var bw=window.setInterval(closeDiv,1)//每0.001秒调用一次changeW
}
</script>
<body>
<a href="<#ZC_BLOG_HOST#>">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>

<a href="#" onclick="f_s()">由快到慢</a>

<div id="box" ><h3>快->慢<a href="#" onclick="closeW('box','600px')">[关闭]</a></h3></div>
<div id="box2" ><h3>慢->快<a href="#" onclick="closeW('box2','600px')">[关闭]</a></h3></div>
<h3>我们既然做出这种效果了，就要把它应用到实际当中去</h3>
<h3>现在来看一下缓冲效果在实际当中的应用</h3>
<div id="my">
 <a href="#" class="bt_down" onmouseover="open_my()">我的</a>
    <div class="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><a href="#" onclick="close_my('my_')">关闭</a></li>
        </ul>
    </div>
</div>

关于几个漂亮缓冲效果的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2016324262614.shtml方便下次再访问哦。

·上一篇： 常见的js下拉菜单
·下一篇： 文字上下无间断滚动效果

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

几个漂亮缓冲效果

文章分类LIST >>返回首页

最新游戏

最新新闻