基于css3实现手风琴效果

  终于在凌晨一点钟逼迫自己写博客。一直想记录自己的前端工程师之路,但毕竟拖延症晚期。因为第一篇随笔,所以多写一点废话吧。刚刚从学校毕业,放弃了一直学习的java,而想从事前端的工作。第一是觉得osgi这类的java框架实在太过笨重和繁琐,也许是真的好用,但也觉得真心不适合我。然后么,也许有点俗,前端真的能做很多华丽花哨的东西出来。到现在也工作一个月了,工资不高,老板不好,但社会毕竟不会总让人满意,没人有手把手教你成大神的话,只能自己努力了。也许会有很多弯路,但做技术的嘛,有磨练总是好事。

  对于我个人来说,也许是信心不足吧,总是害怕自己接手的项目会出事,最害怕的就是每次有人问我,这个项目能不能做,需要多少时间。其实我觉得吧,基本所有功能都是有办法实现的,至于估计时间的话,可能还需要更多时间的磨练。大概还是害怕承担责任吧,但这也一直使我保持虚心而一直学习的状态。在快膨胀的时候提醒自己,我还有很多的不足。嘛~不管是前端还是java,完成功能时的骄傲和满足感确实使人很愉悦。

  好了,回归正题,毕竟应届生还没有前端经验找工作简直难的一逼。机缘巧合或者也是命中注定,进入了一家7个人的创业公司。老板是抠门的富二代,这种设定也是醉,因为老板每天混,所以活少的可怜,只能自己做做公司的官网。正好也获得让自己阶段性成长的机会。于是用bootstrap框架做响应式的官网,因为年轻而且没什么经验,所以jquery真的很适合我这种刚刚出道的小菜鸡。轮播就用轮播插件,手风琴效果也可以自己用on绑定函数再用toggle实现。后来因为好强也挺好学,直接用了angular做双向数据绑定,angular简直方便。后来投资人兼主管说jquery和angular不要一起用,会分不清$符号。(投资人和那两个老板不一样,以后有机会再细说)没办法,投资人也是老板,据我所知,海康威视是jquery和angular一起玩的。不过工资在人手中,当然按人的要求来。于是用css3重写了轮播和手风琴效果,来这里记录一下,当然借鉴了网上很多的资料,然后自己也勉强实现了。

  其实主要的思路就是利用input:checked这个伪类。先说手风琴吧,因为这个比较简单。先设置一组的input type = "radio" 并且设置相同的name值 并且与一组label标签绑定,绑定之后只要点击label就能将绑定的input的style.checked属性设置为true就是选中。此时我们用~选择器(范兄弟选择器) 比如现在红色的input标签被选中,此时用input[name='indexKey'] ~ div.key-body就能调整在label被点击事蓝色部分的样式。

  知道如何区分点击和未点击label之后的key-body样式之后我们就可以做手风琴的效果了,很简单,将key-body的初始高度设置为0,overflow属性设置为hidden,transition设置高度的平滑移动。这样在之后高度改变的情况下能模拟出滑动的效果。然后设置点击后key-body的高度为一个固定值,例如200px。这样就能看到手风琴的效果了。睡觉了,晚上下班写基于css3的轮播吧。

  

<ul id="indexKeyBind">
  <li>
    <input type="radio" id="indexKey1" name="indexKey" style="display:none;" checked>
    <label for="indexKey1">123</label>
    <div class="key-body">   

      .......

    </div>
  </li>
  <li>
    <input type="radio" id="indexKey2" name="indexKey" style="display:none;" >
    <label for="indexKey2">456</label>
    <div class="key-body">
          
    </div>
  </li>

</ul>

上一篇:jQuery横向手风琴图片滑块


下一篇:jquery实现手风琴效果