想要实现简单的手风琴切换效果，需要使用JS实现，如下是使用javascript源码实现，后续会更新使用jQuery实现。

　　1. 先进行简单的布局：我们可以再ul下添加几个li实现html的简单布局，再给每个li 添加绝对定位，以及设置对应的宽高，如下：

　　　　<style>

　　　　　　* { padding:0 ;margin:0;}
　　　　　　　　ul { width:640px; height:400px; border:1px solid #ccc; position:relative; margin:100px auto; overflow:hidden;}
　　　　　　　　li { width:400px; height:400px; position:absolute; top:0; color:#000; font-size:100px; line-height:400px;list-style:none; 　　　　　　　　　　　　border:1px solid red;}
　　　　</style>

　　　　<body>
　　　　　　<ul id="box">
　　　　　　　　<li>1</li>
　　　　　　　　<li>2</li>
　　　　　　　　<li>3</li>
　　　　　　　　<li>4</li>
　　　　　　</ul>
　　　　</body>

　　布局完成后，得到的初步的效果图如下，所有的li由于绝对定位的原因，全部重叠在一起，不要怕，后面JS来帮忙。

　　　　

　　2 .如上，实现简单的布局之后，就需要使用JS实现手风琴效果了，

　　想要实现手风琴效果，首先， 需要准备几个使用原生JS封装好的函数，如获取元素属性值的方法getStyle,移动元素到固定位置的函数doMove,两个函数如下：

　　　　

　　function getStyle(obj,attr){ //获得样式的属性值,包括不透明度
　　　　if(!window.getComputedStyle){
　　　　　　return obj.currentStyle[attr]; //兼容IE6 7 8
　　　　}else{
　　　　　　return getComputedStyle( obj )[attr]; //兼容标准浏览器
　　　　}
　　}　　　　　

　　function doMove(obj,step,speed,attr,target,func){ //移动元素到目标点
　　　　/*
　　　　　　obj 待操作的元素
　　　　　　step 移动步长
　　　　　　speed 移动间隔时间
　　　　　　attr 移动方向，“left”代表左右，“top”代表上下
　　　　　　target 目标坐标值
　　　　　　func 回调函数
　　　　*/
　　var doMoveTimer = null;
　　clearInterval(doMoveTimer);   //先清除定时器
　　var num = parseInt(getStyle(obj,attr));    //获取当前元素的属性值
　　doMoveTimer = setInterval(function(){    //开启定时器
　　　　if(num<target){
　　　　　　num +=step;
　　　　  　 if(num>target){
　　　　　　　　num = target;
　　　　　　}
　　　　 }
　　　   if(num>target){
　　　　      num -=step;
　　           if(num<target){
　　　　        num = target;
　　           }
           }

　　　　obj.style[attr] = num+"px";
　　　　if(num === target){
　　　　　　clearInterval(doMoveTimer);   //当到达目标点时，清除定时器
　　　　　　func&&func();    //回掉函数
　　　　}
　　},speed);
　}

　　实现如上的两个函数后，然后获取ul以及其子元素li,

　　var oUl = document.getElementById("box");    //获取ul元素

　　var aLi = oUl.getElementsByTagName("li");　　　//获取ul下的所有li元素

　　var arrColor = ["red","blue","green","pink"];　　　　//首先定义几个颜色值，为后面每个Li设定不同的背景颜色

　　var liDistance = 80;　　　　　　//设置每个li之间距离值

　　var oLiW = parseInt(getStyle(aLi[0],"width"));   //由于所有li的宽度都相同，提前获取li的宽度值，后面会用到

　　for(var i=0;i<aLi.length;i++){
　　　　aLi[i].index = i;    //为每个li设定索引值，后续会用到
　　　　aLi[i].style.left = liDistance*i + "px";    //为每个li设定一个left值，让li不在重叠
　　　　aLi[i].style.background = arrColor[i];   //设定背景颜色，加以区分
　　　　aLi[i].onmouseover = function(){   //为li加入移入动作
　　　　　　if(parseInt(getStyle(this,"left")) != this.index * liDistance) {    //当li不在初始位置时，执行如下操作
　　　　　　　　for(var j=this.index;j>0;j--){     //从当前的li,直到小于其的所有li，都移动其left值到初始位置
　　　　　　　　　　doMove(aLi[j],20,20,"left",liDistance*j);
　　　　　　　　}
　　　　　　}else{                 //当li在初始位置时，执行如下操作
　　　　　　　　for(var j=this.index+1;j<aLi.length;j++){    //从当前的li的后一个开始，到最后的Li，开始移动

　　　　　　　　　　doMove(aLi[j],20,20,"left",oLiW+liDistance*(j-1));    //显示出需要的li的内容
　　　　　　　　}
　　　　　　}
　　　　}
　　}

3. 全部代码如下：

　　

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手风琴切换</title>
<style>
* { padding:0 ;margin:0;}
ul { width:640px; height:400px; border:1px solid #ccc; position:relative; margin:100px auto; overflow:hidden;}
li { width:400px; height:400px; position:absolute; top:0; color:#000; font-size:100px; line-height:400px;list-style:none; border:1px solid red;}
</style>
<script>
window.onload = function(){
var oUl = document.getElementById("box");
var aLi = oUl.getElementsByTagName("li");
var arrColor = ["red","blue","green","pink"];
var liDistance = 80;
var oLiW = parseInt(getStyle(aLi[0],"width"));
for(var i=0;i<aLi.length;i++){
aLi[i].index = i;
aLi[i].style.left = liDistance*i + "px";
aLi[i].style.background = arrColor[i];
aLi[i].onmouseover = function(){
if(parseInt(getStyle(this,"left")) != this.index * liDistance) {
for(var j=this.index;j>0;j--){
doMove(aLi[j],20,20,"left",liDistance*j);
}
}else{
for(var j=this.index+1;j<aLi.length;j++){

doMove(aLi[j],20,20,"left",oLiW+liDistance*(j-1));
}
}
}
}
function getStyle(obj,attr){ //获得样式的属性值,包括不透明度
if(!window.getComputedStyle){
if(attr ==="opacity"){
return obj.filters.alpha.opacity; //兼容IE6 7 8
}else{
return obj.currentStyle[attr]; //兼容IE6 7 8
}
}else{
if(attr ==="opacity"){
return getComputedStyle( obj )["opacity"]*100; //兼容标准浏览器 ,IE9+
}else{
return getComputedStyle( obj )[attr]; //兼容IE6 7 8
}
}
}
function doMove(obj,step,speed,attr,target,func){ //移动元素到目标点
/*
obj 待操作的元素
step 移动步长
speed 移动间隔时间
attr 移动方向，“left”代表左右，“top”代表上下
target 目标坐标值
func 回调函数
*/
var doMoveTimer = null;
clearInterval(doMoveTimer);
var num = parseInt(getStyle(obj,attr));
doMoveTimer = setInterval(function(){
if(num<target){
num +=step;
if(num>target){
num = target;
}
}
if(num>target){
num -=step;
if(num<target){
num = target;
}
}
if(attr ==="opacity"){
setStyle(obj,attr,num);
}else{
obj.style[attr] = num+"px";
}
//obj.style[attr] = num+"px";
if(num === target){
clearInterval(doMoveTimer);
/*
if(func){
func();
}
*/
func&&func();
}
},speed);

}
}
</script>
</head>
<body>
<ul id="box">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>

　　

使用JS实现手风琴效果的更多相关文章

  1. JS+JQ手风琴效果

    最新在学习JS写一些实用的小玩意——手风琴 CSS样式: <style type="text/css"> * { margin: 0px; border: 0px; p ...

  2. js实现手风琴效果

    之前在慕课网上有练习手风琴效果,但是老师使用jquery简简单单的两三行实现了,今天自己用js练习一下效果 <div id="divbox"> <ul> & ...

  3. js 特效 手风琴效果

    $(document).ready(function(){ //定义展开的块 var lastBlock = $('#a1'); //展开的块的宽度 var maxWidth = 406; //折叠的 ...

  4. jquery 图片手风琴效果

    这篇主要是手风琴效果和无缝切换相结合,在Demo里的Demo3.html.Demo4.html. 手风琴原理比较简单,当鼠标经过的时候改变图片的路径,鼠标移到另一张图片时还原路径. 虽然原理简单,但是 ...

  5. 一步步教你css3手风琴效果的实现

    什么是手风琴效果? 首先我们先来看一段动画,如下图所示: 在上面动画中,我们不难发现,一排照片正常排列,当我鼠标移上(:hover)时,照片会变大显示并且把其它照片挤小.那么在鼠标来回移动的过程中,画 ...

  6. 超简单jQuary链式操作代码实现手风琴效果

    超简单jQuery代码实现手风琴效果 HTML代码 <div id="cont"> <div> <p>人生若只如初见</p> < ...

  7. jQuery效果之简单的手风琴效果

    实现效果如图所示: html结构: <div class="item_box box10"> <div class="item_box_wp" ...

  8. Bootstrap手风琴效果

    前面的话 Bootstrap 框架中 Collapse插件(折叠)其实就是我们常见的手风琴效果.当单击一个触发元素时,在另外一个可折叠区域进行显示或隐藏,再次单击时可以反转显示状态.经典的场景是多个折 ...

  9. jQuery插件实例五：手风琴效果[动画效果可配置版]

    昨天写了个jQuery插件实例四:手风琴效果[无动画版]那个是没有动画效果的,且可配置性不高,本篇为有动画效果.对于一些数据做了动态的计算,以实现自适应. 欢迎大家入群相互交流,学习,新群初建,欢迎各 ...

随机推荐

  1. Linux_System11

    1.查看/var目录的大小:1)ll -hd /var 查看目录的实际大小2)du -sh /var 查看目录所占磁盘空间大小修改权限:chmod 750 hunan修改属主和属组:groupadd ...

  2. SQL Select结果增加自增自段（网转）

    http://www.cnblogs.com/haver/archive/2011/07/14/2106349.html/* 方法一*/ SELECT 序号= (SELECT COUNT(客户编号) ...

  3. bzoj2049

    2049: [Sdoi2008]Cave 洞穴勘测 Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 7579  Solved: 3548[Submit] ...

  4. MVC 视图-模型，动态更新

    <!DOCTYPE html> <html> <head> <title>Binding</title> <script src=&q ...

  5. 用scala实现一个基于TCP Socket的快速文件传输程序

    这是用scala实现的一个简单的文件传输程序. 服务端 package jpush import java.io.{DataInputStream, File, FileOutputStream} i ...

  6. Grunt实现自动化单元测试

    http://www.tuicool.com/articles/rAnaYvn   直奔主题: 一.安装grunt-contrib-qunit npm install grunt-contrib-qu ...

  7. Voilin 与 乐谱

    小提琴属于高音乐器,所以它使用的是高音谱号: 用音的时候,线不够用,那就得上加线,或下加线. 小提琴的弦对应的五线谱的位置为: 第四弦,对应五线谱的下加两条线的下面 第三弦,对应五线谱的第一线的下面 ...

  8. 25+免费的Bootstrap HTML5网站模板

    在前端框架中,Bootstrap可以说是非常有名的高级网站设计框架.网上也有很多使用Bootstrap程序创建的免费模板.这些模板设计成响应式模式,因此你可以使用它们来为所有的设备平台和浏览器创建网站 ...

  9. iOS 之 Aggregate Target

    工程导航栏>选中工程>菜单File>New>Target>Other>Aggregate

  10. Delphi中解析Xml的控件-SimDesign NativeXml

    Delphi中解析Xml的控件-SimDesign NativeXml 正在学习,感觉应用很方便.无源代码的版本还是免费的. SimDesign.NativeXml是一个delphi和bcb的XML控 ...