纯纯js+html和纯和纯css+html制作手风琴效果制作手风琴效果
本文分享了纯js+html制作手风琴和纯css+html制作手风琴两种效果，供大家参考，具体内容如下
一、纯一、纯css+html的手风琴效果的手风琴效果
这种用css写的手风琴比较简单，主要是应用到css中的，transition属性。
代码如下：
<!DOCTYPE HTML>
<html>
<head>
<style>
body{background: url('bg.gif') repeat;}
ul,li,p{margin: 0px;padding: 0px;list-style: none;}
#div{width: 1180px;height: 405px;border:5px solid #ccc;padding: 0px;margin: 0px auto;overflow: hidden;}
.list{width: 3200px;}
.list li{float: left;width: 170px;height: 500px;;position: relative;
-moz-transition:width 2s;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}
.list:hover li{width: 107px;}
.list li:hover{width: 538px;}
.list li p{width: 100%;height: 100%;opacity: 0.5;position: absolute;top: 0px;left: 0px;background: black; }
.list li:hover p{opacity:0}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
</script>
</head>
<body >
<div id="div">
<ul class="list"> <!--如果设置父级与子级之间没有空隙的话，将margin和padding设为0即可-->
<li><img src="image/1.jpg" style="width:538px;height:405px;"><p></p></li>
<li><img src="image/2.jpg" style="width:538px;height:405px;"><p></p></li>
<li><img src="image/3.jpg" style="width:538px;height:405px;"><p></p></li>
<li><img src="image/4.jpg" style="width:538px;height:405px;"><p></p></li>
<li><img src="image/5.jpg" style="width:538px;height:405px;"><p></p></li>
<li><img src="image/6.jpg" style="width:538px;height:405px;"><p></p></li>
<li><img src="image/7.jpg" style="width:538px;height:405px;"><p></p></li>
</ul>
</div>
</body>
</html>
二、纯二、纯js+html制作手风琴制作手风琴
这个手风琴出现一个问题，就是单独移动每个li时，没问题，但是当移动很快时，最右边的li出现空隙。我感觉是定时器的问
题，就是当每个li还没回到自己的位置时，下一个li就开始运动了。但我定时器已经关了啊。
麻烦哪位给我留言，帮我看看怎么改哈！
代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>手风琴效果</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="perfectMove2.js"></script>
<script type="text/javascript">
window.onload=function()
{
var oDiv=document.getElementById('show1');
var iMinWidth=9999999;
var aLi=oDiv.getElementsByTagName('li');
var aSpan=oDiv.getElementsByTagName('span');
var i=0;
var bool=false;
for(i=0;i<aLi.length;i++)
weixin_38703794
- 粉丝: 3
- 资源: 890
我的内容管理
收起
- 我的资源
快来上传第一个资源
我的收益 登录查看自己的收益
我的积分
登录查看自己的积分
我的C币
登录后查看C币余额
我的收藏 
我的下载 
下载帮助
会员权益专享
最新资源
- 保险服务门店新年工作计划PPT.pptx
- 车辆安全工作计划PPT.pptx
- ipqc工作总结PPT.pptx
- 车间员工上半年工作总结PPT.pptx
- 保险公司员工的工作总结PPT.pptx
- 报价工作总结PPT.pptx
- 冲压车间实习工作总结PPT.pptx
- ktv周工作总结PPT.pptx
- 保育院总务工作计划PPT.pptx
- xx年度现代教育技术工作总结PPT.pptx
- 出纳的年终总结PPT.pptx
- 贝贝班班级工作计划PPT.pptx
- 变电值班员技术个人工作总结PPT.pptx
- 大学生读书活动策划书PPT.pptx
- 财务出纳月工作总结PPT.pptx
- 大学生“三支一扶”服务期满工作总结(2)PPT.pptx
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
