手风琴效果和滑动条

标签：style   http   os   io   2014   ar   cti   代码   

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

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基本逻辑不粗糙。

手风琴效果和滑动条,布布扣,bubuko.com

手风琴效果和滑动条

标签：style   http   os   io   2014   ar   cti   代码   

原文地址：http://my.oschina.net/u/1865749/blog/297973