首页 > 代码库 > 手风琴效果和滑动条

手风琴效果和滑动条

由于本周开始编写 宝石迷阵这款益智游戏,其中涉及到的两个效果我觉得很有趣。

  1. 手风琴:点击一级餐单,二级菜单动态弹出;再次点击一级菜单,二级菜单缩回;

        实现方法如下:

        首先,用CSS和HTML规划9个框,其中第1、4、7个相对大一点,作为我们的一级餐单。其他尺寸小的就用来做二级餐单。

        其次,再每个一级菜单中嵌入一个A标签,改标签引用一个能够让我们达到效果的函数。

 

以下是我的函数,有点搓,但是有效果

  var clickno = 1;        //这个是标记变量,干嘛的呢,当标记为-1时,说第一次点击,我收缩或者展开,每次点击完自动乘以-1
   function shorter(){  
        if(clickno >0){    //收缩函数
      var makeshort = setInterval(function(){
      var temphigh = parseInt($(‘cp‘).offsetHeight);
          $(‘cp‘).style.height = temphigh-2+‘px‘;
          $(‘pc‘).style.height = temphigh-2+‘px‘;
          $(‘males‘).style.height = temphigh-2+‘px‘;
          $(‘femaleb‘).style.height = temphigh-2+‘px‘;
          $(‘day‘).style.height = temphigh-2+‘px‘;
          $(‘mant‘).style.height = temphigh-2+‘px‘;
          if(temphigh == 0 ){
              clickno*=-1;    //当二级菜单收缩到最小时,标记变量为负,那么下次点击时因为是-1,则执行展开函数
              clearInterval(makeshort);//不可能永远收缩下去,所以二级菜单高度为0时结束收缩
          }
       },25)
        }

       if(clickno <0){              //展开函数
       var makelong =  setInterval(function(){
           var temphigh2 = parseInt($(‘cp‘).offsetHeight);
           $(‘cp‘).style.height = temphigh2+2+‘px‘;
           $(‘pc‘).style.height = temphigh2+2+‘px‘;
           $(‘males‘).style.height = temphigh2+2+‘px‘;
           $(‘femaleb‘).style.height = temphigh2+2+‘px‘;
           $(‘day‘).style.height = temphigh2+2+‘px‘;
           $(‘mant‘).style.height = temphigh2+2+‘px‘;
           if(temphigh2 == 30 ){
               clickno*=-1;   //当二级菜单展开到最大时,标记变量为正,那么下次点击时因为是+1,则执行展收缩函数
               clearInterval(makelong);  //不可能永远展开下去,所以二级菜单高度为0时结束展开    

       },25)
       }

   }

再次强调,有点搓,but有效果,呵呵!

2. 滑动条效果:随着时间推移,框中的颜色像水一样上涨并直至填充完整个外框,同时上边有个小标签跟着走;

首先,用HTML和CSS画出以上效果,什么?不会画三角形。设置和没高宽,粗边框、三边透明的DIV就完事了撒。

其次,再次在按钮A标签中植入JS函数,;

        以下还是我比较搓的代码:

   var marker =1;     //标记变量,用来区分是暂停还是继续
    $(‘movetips‘).style.marginLeft = 0;
    function timing(){  //利用marginleft的属性随时间增加的方式让填充条变宽
     var moveab = setInterval(function(){
         var tempwidth = parseInt($(‘fill‘).offsetWidth);
         $(‘fill‘).style.width =tempwidth+1+‘px‘;
         $(‘movetips‘).style.marginLeft = parseInt($(‘movetips‘).style.marginLeft)+1+‘px‘; //小标签跟着走
         var showtimes =parseInt((1- (parseInt($(‘movetips‘).style.marginLeft)/600))*60); //填充条走
         $(‘time‘).innerHTML =‘<p>‘+showtimes+‘&nbsp;S</p>‘;  //小标签中的剩余时间显示
//         console.log($(‘movetips‘).style.width)
         if(tempwidth >= 600 || marker == 1){  //小机关:当填充条满了,或者标记变量为1时歇歇
             clearInterval(moveab)     //填充条走满了就该歇歇了
         }
     },100)
    }

     function go(){     //嵌在按钮A标签中的函数
        marker*=-1; //整个干嘛的,我按钮一次就取反一次,负的继续走,正的歇歇;
        timing()
    }

我的这两个效果的共同点是:都放了一个标记变量用来判断是停还是走。代码体极其粗糙,but基本逻辑不粗糙。