想要实现简单的手风琴切换效果，需要使用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. IOS 消息

    发送消息: NSDictionary *dict=[[NSDictionary alloc]initWithObjectsAndKeys:@"num",[NSString stri ...

  2. php AES 加密类

    <?php class CryptAES { protected $cipher = MCRYPT_RIJNDAEL_128; protected $mode = MCRYPT_MODE_ECB ...

  3. Angular - - $resource 更高端的数据交互

    $resource 创建一个resource对象的工厂函数,可以让你安全的和RESFUL服务端进行数据交互. 需要注入 ngResource 模块.angular-resource[.min].js ...

  4. java IMAGEIO

    javax.imageio使用 ImageIO 类的静态方法可以执行许多常见的图像 I/O 操作. 此包包含一些基本类和接口,有的用来描述图像文件内容(包括元数据和缩略图)(IIOImage): 有的 ...

  5. springMvc获取servletContext

    springMvc获取servletContext WebApplicationContext webApplicationContext = ContextLoader.getCurrentWebA ...

  6. FLV格式详解

    Overview Flash Video(简称FLV),是一种流行的网络格式.目前国内外大部分视频分享网站都是采用的这种格式. File Structure 从整个文件上开看,FLV是由The FLV ...

  7. log4j.appender.stdout.layout.ConversionPattern

    http://501565246-qq-com.iteye.com/blog/1991881 http://wenku.baidu.com/link?url=e4Z9v9CY_gwRxHrggzHXx ...

  8. SpringMVC+RestFul详细示例实战教程

    一.SpringMVC基础入门,创建一个HelloWorld程序 1.首先,导入SpringMVC需要的jar包. 2.添加Web.xml配置文件中关于SpringMVC的配置 <!--conf ...

  9. JS可维护性代码

    最近在看一本Js的书名叫“Javascript高级程序设计”在里面学到了很多东西,是一本不错的书,非常值得一看. 解耦css/javascript element.style.color=" ...

  10. 这个发现是否会是RSA算法的BUG、或者可能存在的破解方式？

    笔者从事各种数据加解密算法相关的工作若干年,今天要说的是基于大数分解难题的RSA算法,可能有些啰嗦. 事情的起因是这样的,我最近针对一款芯片进行RSA CRT解密的性能优化.因为期望值是1024bit ...