Heim > Artikel > Web-Frontend > 纯js+html和纯css+html制作手风琴效果_javascript技巧
纯js+html和纯css+html制作手风琴效果_javascript技巧
- WBOYOriginal
- 2016-05-16 15:06:351374Durchsuche
本文分享了纯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="max-width:90%" alt="纯js+html和纯css+html制作手风琴效果_javascript技巧" ><p></p></li>
<li><img src="image/2.jpg" style="max-width:90%" alt="纯js+html和纯css+html制作手风琴效果_javascript技巧" ><p></p></li>
<li><img src="image/3.jpg" style="max-width:90%" alt="纯js+html和纯css+html制作手风琴效果_javascript技巧" ><p></p></li>
<li><img src="image/4.jpg" style="max-width:90%" alt="纯js+html和纯css+html制作手风琴效果_javascript技巧" ><p></p></li>
<li><img src="image/5.jpg" style="max-width:90%" alt="纯js+html和纯css+html制作手风琴效果_javascript技巧" ><p></p></li>
<li><img src="image/6.jpg" style="max-width:90%" alt="纯js+html和纯css+html制作手风琴效果_javascript技巧" ><p></p></li>
<li><img src="image/7.jpg" style="max-width:90%" alt="纯js+html和纯css+html制作手风琴效果_javascript技巧" ><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++)
{
aSpan[i].index=i;
aSpan[i].onmouseover=function ()
{
for(i=0;i<aLi.length;i++)
{
startMove(aLi[i],{width:this.offsetWidth});//调用运动函数
bool=true;
}
if(bool)
{
startMove(aLi[this.index],{width:552});
}
}
}
};
</script>
</head>
<body>
<div id="show1">
<ul>
<li class="active">
<span class="bg0">这是第一个</span>
<img src="images/1.jpg" / alt="纯js+html和纯css+html制作手风琴效果_javascript技巧" >
</li>
<li >
<span class="bg1">这是第二个</span>
<img src="images/2.jpg" / alt="纯js+html和纯css+html制作手风琴效果_javascript技巧" >
</li>
<li >
<span class="bg2">这是第三个</span>
<img src="images/3.jpg" / alt="纯js+html和纯css+html制作手风琴效果_javascript技巧" >
</li>
<li>
<span class="bg3">这是第四个</span>
<img src="images/4.jpg" / alt="纯js+html和纯css+html制作手风琴效果_javascript技巧" >
</li>
<li>
<span class="bg4">这是第五个</span>
<img src="images/5.jpg" / alt="纯js+html和纯css+html制作手风琴效果_javascript技巧" >
</li>
<li>
<span class="bg5">这是第六个</span>
<img src="images/6.jpg" / alt="纯js+html和纯css+html制作手风琴效果_javascript技巧" >
</li>
</ul>
</div>
</body>
</html>
perfectMove2.js代码如下：
function getStyle(obj,attr)//用此种方法获取样式中的属性
{
if(obj.currentStyle)
{
return obj.currentStyle[attr];
}
else
{
return getComputedStyle(obj,false)[attr];
}
}
function startMove(obj,json,fn)
{
clearInterval(obj.timer);//清除定时器
obj.timer=setInterval(function ()
{
var stop=true;
for(var attr in json)
{
var iCur=0;
if(attr=='opacity')
{
iCur=parseInt(parseFloat(getStyle(obj, attr))*100);//这里加parseInt是避免div的数值不稳定，在波动
}
else
{
iCur=parseInt(getStyle(obj, attr));
}
var iSpeed=(json[attr]-iCur)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
if(iCur!=json[attr])
{
stop=false;
}
if(attr=='opacity')
{
obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
obj.style.opacity=(iCur+iSpeed)/100;
}
else
{
obj.style[attr]=iCur+iSpeed+'px';
}
}
if(stop)
{
clearInterval(obj.timer);
if(fn){fn();}
}
}, 30)
}
以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JavaScript图像延迟加载库Echo.js_javascript技巧Nächster Artikel：AngularJS中的$watch()，$digest()和$apply()区分_AngularJS