基于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>

时间: 2024-10-03 14:01:00

基于css3实现手风琴效果的相关文章

CSS3实现手风琴效果-------Day88

所谓的手风琴效果,就是像手风琴一样拉开关上,至于手风琴啥样,貌似那是我好久之前的回忆了. 不扯那些没用的,说说这个坑人的手风琴效果,先来看下效果图: 这个效果不错吧,也比较常用吧,可怜的我最开始的时候以为自己可以做到这个效果,就用display:none/block写了一排的div,你别说,还真出来那个感觉啦,哈哈,这里当然不会这么做,但是在我看明白之后,发现是一样简单到要吐血,这样的应用当初自己怎么就想不到. 实现过程中的第一个让我没想到,却感觉确实这样才对的地方: <div id="h

基于jquery横向手风琴效果

基于jquery横向手风琴效果是一款基于jquery实现的左右滑动手风琴图片轮播切换特效.效果图如下: 在线预览   源码下载 效果图如下: <div class="flash"> <div class="con"> <ul> <li class="current ti1"> <h3>关于我们</h3> <div class="show"> &

CSS3仿手风琴效果! 给CSS3新手们看看!

/*代码大家看看*/ <style> body{ background: #ccc; } #box{ font-family: "微软雅黑"; font-size: 30px; text-align: center; width: 800px; height: 400px; margin: 100px auto; position: relative; overflow: hidden; border:20px solid #fff; } #box div{ -webkit

分享一款jquery+css3实现的手风琴效果代码【js插件】

代码适用于大部分浏览器 演示Demo地址:请猛戳 效果图片 程序吧下载地址 分享一款jquery+css3实现的手风琴效果代码[js插件],布布扣,bubuko.com

16种基于 CSS3 &amp; SVG 的创意的弹窗效果

在去年,我给大家分享了<基于 CSS3 的精美模态窗口效果>,而今天我要与大家分享一些新鲜的想法.风格和趋势变化,要求更加适合现代UI的不同的效果.这组新模态窗口效果包含了一些微妙的动画,还有一些应用了SVG变形技术. 在线演示      源码下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[源码下载] 12款经典的白

基于 jQuery 实现垂直滑动的手风琴效果

今天我们要与大家分享一个漂亮而灵活的垂直 jQuery 手风琴效果.其主要思想是扩大手风琴片上的点击和显示更多的信息.其他内容片段将变得不那么透明.当使用一个导航箭头导航下一个片段,新的片会从顶部或底部滑动. 效果演示     插件下载 HTML 示例代码: <div id="va-accordion" class="va-container"> <div class="va-nav"> <span class=&q

基于css3的轮播效果

花了一上午来调整页面在ie10上的显示问题,sass编译生成的css文件在ie内核下一直不能正确加载,果然兼容性的问题还需要好好研究.转入正题,用css3实现轮播效果主要是基于css3的framework动画效果实现轮播效果以及之前提到的input:checked伪类来实现轮播的控制.在轮播的控制上不可避免的使用了js,一直想写出优雅的js代码,在看了自己写的代码之后发现自己还有很大的提升空间,也许该找个机会去阅读优秀框架的源代码了. 当然也借鉴了网上很多资料,有问题的是在ie下完全没有效果,对

一款基于jquery的手风琴图片展示效果

今天要给大家分享一款基于jquery的手风琴图片展示效果.这款图片的展示效果鼠标经过前是灰色的,当鼠标经过时图片变大且变为彩色.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="page-container"> <div class="flex-container"> <div class="country netherlands"> <div> Nethe

一款基于jQuery/CSS3实现拼图效果的相册

之前为大家介绍了 HTML5 3D立体图片相册, HTML5图片相册重力感应特效, 基于CSS3图片可倾斜摆放的动画相册 今天我们要来分享一款很酷的jQuery相册插件,首先相册中的图片会以一定的角度倾斜放置在页面上,点击图片缩略图就可以展开图片,并且图片是由所有缩略图拼接而成,图片展开和收拢的动画效果也非常不错.当然图片倾斜需要CSS3支持.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="im_wrapper" class="im