想要实现简单的手风琴切换效果，需要使用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. sql数据库恢复 文件丢失误删除 误格式化置疑报错修复 数据库置疑修复总结/SQL SERVER 2000/2005/2008/2008R2

    数据库置疑的原因会有多种多样,不同的问题采用的步骤也会有所不同,以下的步骤不能适用所有的情况,但包括了一些基本的步骤. 数据库置疑是指数据库内部处于不一致的状态,很有可能会有数据丢失.我们推荐您从做数 ...

  2. 如何编写高质量CSS

    虽然写过很多css代码,但每次动手写都让我痛苦不堪,如何组织好那一堆堆的代码,如何提高代码复用率,甚至如何命名类,这些都让我纠结.下面的浅显的谈一谈在看了<编写高质量代码>中的html和c ...

  3. iOS 之 socket 与 http

    http连接:短连接,发送一次请求,服务器响应后连接就断开. socket连接:长连接,连接后长期保持连接状态.

  4. 使用karma+jasmine做单元测试

    目的 使用karma和jasmine来配置自动化的js单元测试. Karma和Jasmine Karma是由Angular团队所开发的一种自动化测试工具.链接:http://karma-runner. ...

  5. #图# #SPFA# ----- codevs1021 玛丽卡

    codevs1021 玛丽卡 题目描述 Description麦克找了个新女朋友,玛丽卡对他非常恼火并伺机报复.因为她和他们不住在同一个城市,因此她开始准备她的长途旅行.在这个国家中每两个城市之间最多 ...

  6. Linux笔记（五） - 用户管理命令

    (1)添加用户:useradd [选项] 用户 -u UID:手工指定用户的UID号-d 家目录:手工指定用户的家目录-c 用户说明:手工指定用户说明,有空格需加双引号-g 初始组:手工指定初始组-G ...

  7. IOS隐藏navigationItem左右按钮的方法

    在移除一个View的时候或者根据需要希望让navigationItem的rightBarButtonItem或者leftBarButtonItem处于隐藏状态,一个简单的方法如下:   self.na ...

  8. 在点击div中的p时，如何阻止事件冒泡？

    今天整理笔记,发现在学习javaScript的过程中,遇到过一个在当时看来很棘手的问题,现在特地总结一下,也希望能帮助到曾像我一样迷惘的初学者. 我还是以一个案例来说明问题,html代码如下: < ...

  9. Google HTML/CSS 编码规范

    Google HTML/CSS 规范 本文介绍了 Google 推荐的 HTML 和 CSS 编写格式规范,以建立良好的个人编码习惯. 1.通用样式规范 省略图片.样式.脚本以及其他媒体文件 URL ...

  10. duilib 绘制IP控件

    在使用duilib时,发现本来的库并没有提供IP控件,如是自己想到绘制IP控件,控件的绘制不难,首先赋值UIEdit的两个文件,命名为UIIPEdit,更改完成后,便可以进行修改绘制IP控件. 绘制难 ...