css3制作手风琴,一步步教你css3手风琴效果的实现

什么是手风琴效果？

首先我们先来看一段动画，如下图所示：

在上面动画中，我们不难发现，一排照片正常排列，当我鼠标移上(：hover)时，照片会变大显示并且把其它照片挤小。那么在鼠标来回移动的过程中，画面正常显示的效果类似我们的手风琴，所以叫手风琴效果。

手风琴效果的实现

把图片显示出来

通过上面的效果，我们不难发现，首先所有照片的集合是一个有1px边框的div盒子，盒子里面有一组ul li ，每个li标签里面有一张照片，那么我们首先把这段代码实现，html代码如下

css代码如下：

*{

margin:;

padding:;

border:;

list-style: none;

}

.box{

width: 1200px;

height: 300px;

border: 1px solid #000;

margin: 100px auto;

}

.box ul{

overflow: hidden;

}

.box ul li{

float: left;

width: 200px;

height: 300px;

transition: all 1s;

}

鼠标移上事件

接下来我们完成鼠标移上事件的代码。从上面的动画中我们不难发现，鼠标移上一共有3个效果；1、鼠标移上的那个li的宽度变大 2、其它li的宽度变小 3、移上两个效果的变化是逐渐完成的。首先我们想：第一个效果的话，是不是li：hover{width：XXXpx;}就可以实现了。那么第二个效果呢？我们是不是可以理解为鼠标移动到div上之后，div里面所有li的宽度都变小了，那代码实现为.box:hover li{width: XXXpx;}即可实现。第三个效果是不是可以使用css3中的trantation属性来实现？那么完整的代码如下

.box ul li{

transition: all 1s;

}

.box:hover li{

width: 150px;

}

.box ul li:hover{

width: 500px;

}

看效果调BUG

那么完成上述代码，我们是不是就完成了手风琴效果了呢？我们不妨来看看效果，运行代码，效果如下：

在上述效果中，我们发现当鼠标移动到右边数第二张照片的时候，最右边的照片显示不出来，这是为什么呢？我们来分析一下：上文中鼠标移上之后，我每张照片设置的宽度为150px，鼠标移上的那张照片为500px；150*5+500=1250，大于我们设置的1200的总宽度。由于ul上文中没有给它设置宽度，所以它默认的最大宽度为1200，所以没有足够的宽度让它来显示所有的照片，所以最后一张照片没有显示出来。那么我给ul的宽度设置的大一点可以吗？当然可以，保险起见，我给ul的宽度设置为9999px，那么有人会问了，ul这么宽，会超过div的宽度，这么办？放心，div给它设置一个overflow：hidden属性，超出隐藏即可。增加的代码如下：

.box{

overflow: hidden;

}

.box ul{

width: 9999px;

}

运行程序，完美实，但是gif太大，上传不了，最后还是放弃。有兴趣的同学可以自己试着写一下，然后看看效果。

总结

前面也写了几篇博客，但是每次都忘记总结一下在工作中实现一个功能的步骤，那在这里总结一下吧。

分析需求

首先我们拿到需求之后，我们不要急着去coding，而是先分析清楚我们的需求是什么，我们在实现这个需求的时候使用可以用到哪些标签，哪些样式，哪些js行为，哪些api等内容。

分步骤实现

分析完需求之后，我们按照分析的需求，一步一步实现代码。先搭建html标签，写css样式……在写的过程中，一步一步看看写的样式，js行为有没有起作用，确保上一条代码起作用之后再写下一条代码。

测试解决bug

所有的功能实现之后，我们来系统的测试一下完成的模块，看和需求有没有出入，有没有BUG，如果有BUG解决BUG，如果没有，那么，恭喜你，可以提交你的代码到测试部门了。

基于css3实现手风琴效果

终于在凌晨一点钟逼迫自己写博客.一直想记录自己的前端工程师之路,但毕竟拖延症晚期.因为第一篇随笔,所以多写一点废话吧.刚刚从学校毕业,放弃了一直学习的java,而想从事前端的工作.第一是觉得osgi这 ...

使用 jQuery & CSS3 实现优雅的手风琴效果

手风琴效果常用于切换显示一组内容,这种方式既可以节省网页空间又可以有动画效果.今天,我们将创造一个优雅的手风琴内容效果.这个想法是有悬停时滑出一些垂直手风琴标签.我们将添加一些 CSS3 属性来提升外 ...

纯css3实现美化复选框和手风琴效果(详细)

关键技术点和原理: 原理就是把 checkbox或 radio 给隐藏掉   ,然后给选框 绑定一个label标签. 然后用label标签作为容器,在里面放一个:before或一个after 用bef ...

一步步教你轻松学主成分分析PCA降维算法

一步步教你轻松学主成分分析PCA降维算法 (白宁超 2018年10月22日10:14:18) 摘要:主成分分析(英语:Principal components analysis,PCA)是一种分析.简 ...

一步步教你轻松学奇异值分解SVD降维算法

一步步教你轻松学奇异值分解SVD降维算法 (白宁超 2018年10月24日09:04:56 ) 摘要:奇异值分解(singular value decomposition)是线性代数中一种重要的矩阵分 ...

一步步教你轻松学支持向量机SVM算法之案例篇2

一步步教你轻松学支持向量机SVM算法之案例篇2 (白宁超 2018年10月22日10:09:07) 摘要:支持向量机即SVM(Support Vector Machine) ,是一种监督学习算法,属于 ...

一步步教你轻松学支持向量机SVM算法之理论篇1

一步步教你轻松学支持向量机SVM算法之理论篇1 (白宁超 2018年10月22日10:03:35) 摘要:支持向量机即SVM(Support Vector Machine) ,是一种监督学习算法,属于 ...

一步步教你轻松学K-means聚类算法

一步步教你轻松学K-means聚类算法(白宁超  2018年9月13日09:10:33) 导读:k-均值算法(英文:k-means clustering),属于比较常用的算法之一,文本首先介绍聚类的理 ...

一步步教你轻松学朴素贝叶斯模型算法Sklearn深度篇3

一步步教你轻松学朴素贝叶斯深度篇3(白宁超   2018年9月4日14:18:14) 导读:朴素贝叶斯模型是机器学习常用的模型算法之一,其在文本分类方面简单易行,且取得不错的分类效果.所以很受欢迎,对 ...

随机推荐

vue.js之过渡效果-css

概述 vuejs的过渡效果可以让我们的页面元素在出现和消失时实现过渡.官方文档这样描述过渡效果的方式: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Anima ...

修改linux文件权限命令：chmod

Linux系统中的每个文件和目录都有访问许可权限,用它来确定谁可以通过何种方式对文件和目录进行访问和操作. 文件或目录的访问权限分为只读,只写和可执行三种.以文件为例,只读权限表示只允许读其内容, ...

SUN dataset图像数据集下载

SUN dataset数据集,有两个不错的网址: http://vision.princeton.edu/projects/2010/SUN/ (普林斯顿大学) http://groups.csail ...

[Everyday Mathematics]20150218

设 $A,B$ 是 $n$ 阶复方阵, 适合 $$\bex A^2B+BA^2=2ABA. \eex$$ 试证: 存在 $k\in\bbZ^+$, 使得 $(AB-BA)^k=0$.

笔记本电脑连接wifi有时候会自动断网提示有限的访问权限解决办法

解决办法如下: [设备管理器],找到[网络适配器]第一项,右键属性

centos 安装 acrobat Reader之后

IV: 为Firefox等浏览器安装Acrobat Reader插件:sudo /usr/local/Adobe/Acrobat7.0/Browser/install_browser_plugin按照 ...

Core Data (一)备

序 恩,用Core Data也有一段时间了.大大小小的坑也都坑过了.重来没有认真的记录一次.这次需要好好的理一理Core Data.就当一次绝好的机会记录下来.也为了自己加深认识. 为什么要用Core ...

SpecFlow使用入门之C# BDD

SpecFlow使用入门 http://www.specflow/ SpecFlow是一个BDD工具,在这里对BDD不多赘述,你可以阅读一下微软2010年十二月的一篇文章,此外如果你想要更多了 ...

Python 练习冊，每天一个小程序