使用JS实现手风琴效果

　　想要实现简单的手风琴切换效果，需要使用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]; //兼容标准浏览器
　　　　}
　　}　　　　　

　　实现如上的两个函数后，然后获取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实现手风琴效果的更多相关文章

JS+JQ手风琴效果
最新在学习JS写一些实用的小玩意——手风琴 CSS样式: <style type="text/css"> * { margin: 0px; border: 0px; p ...
js实现手风琴效果
之前在慕课网上有练习手风琴效果,但是老师使用jquery简简单单的两三行实现了,今天自己用js练习一下效果 <div id="divbox"> <ul> & ...
js 特效手风琴效果
$(document).ready(function(){ //定义展开的块 var lastBlock = $('#a1'); //展开的块的宽度 var maxWidth = 406; //折叠的 ...
jquery 图片手风琴效果
这篇主要是手风琴效果和无缝切换相结合,在Demo里的Demo3.html.Demo4.html. 手风琴原理比较简单,当鼠标经过的时候改变图片的路径,鼠标移到另一张图片时还原路径. 虽然原理简单,但是 ...
一步步教你css3手风琴效果的实现
什么是手风琴效果? 首先我们先来看一段动画,如下图所示: 在上面动画中,我们不难发现,一排照片正常排列,当我鼠标移上(:hover)时,照片会变大显示并且把其它照片挤小.那么在鼠标来回移动的过程中,画 ...
超简单jQuary链式操作代码实现手风琴效果
超简单jQuery代码实现手风琴效果 HTML代码 <div id="cont"> <div> <p>人生若只如初见</p> < ...
jQuery效果之简单的手风琴效果
实现效果如图所示: html结构: <div class="item_box box10"> <div class="item_box_wp" ...
Bootstrap手风琴效果
前面的话 Bootstrap 框架中 Collapse插件(折叠)其实就是我们常见的手风琴效果.当单击一个触发元素时,在另外一个可折叠区域进行显示或隐藏,再次单击时可以反转显示状态.经典的场景是多个折 ...
jQuery插件实例五：手风琴效果[动画效果可配置版]
昨天写了个jQuery插件实例四:手风琴效果[无动画版]那个是没有动画效果的,且可配置性不高,本篇为有动画效果.对于一些数据做了动态的计算,以实现自适应. 欢迎大家入群相互交流,学习,新群初建,欢迎各 ...

随机推荐

Spring MVC之RequestMapping
第一部分.概述 /**映射URL到控制器类或处理程序*/@Target({ElementType.METHOD, ElementType.TYPE})@Retention(RetentionPolic ...
安卓 webview背景色的设置
第一步:webview的xml属性设置:android:layerType = "software"(关闭webview硬件加速,颜色设置才可以起效果) 第二步:webview所在 ...
Oracle数据库和实例的区别
一般Oracle数据库(Oracle Database)可以分为两部分,即实例(Instance)和数据库(Database). 实例:是一个非固定的.基于内存的基本进程与内存结构.当服务器关闭后,实 ...
【转】sql语句的优化分析
开门见山,问题所在 sql语句性能达不到你的要求,执行效率让你忍无可忍,一般会时下面几种情况. 网速不给力,不稳定. 服务器内存不够,或者SQL 被分配的内存不够. sql语句设计不合理没有相应的索 ...
arcgis 瓦片图加载规则（转载）
arcgis 瓦片图加载规则最近需要做地图离线的功能,要能下载指定区域的瓦片图,我们都知道如何加载谷歌和天地图的加载规则,但是网上貌似没有找到如何加载arcgis自己发布的瓦片图规则,好不容易找到一 ...
OSG和osgearth显示中文（转载）
osgEarth支持中文过程详解 OSG和osgearth显示中文一.知识储备要想很好的理解和解决这个问题,首先要了解什么是多字节和宽字节.说实话我之前也知道这两个字节到底有什么区别,只是简单 ...
【Android】Activity
一.Android四大组件 Activity.Service.BroadCastReceiver.ContentProvider. 二.Activity的继承关系三.建立.配置和使用Activity ...
--@angularJS--指令与指令之间的交互demo
1.index.html: <!DOCTYPE HTML><html ng-app="app"><head> <title>c ...
C++中定义使用受限的类
1.只能在堆上使用的类栈上对象通过自动调用析构函数释放空间,将该类的析构函数定义为private就可以阻止其被自动调用,从而阻止在栈上使用该类的对象,为了避免资源泄漏问题,在堆上使用该类的对象时我们 ...
前端自动化构建工具-yoman浅谈
如今随着前端技术的飞速发展,前端项目也变得越来越复杂. 快速的搭建一个集成多种工具和框架的复杂前端项目也越来越成为一种需求. 当然如果你要自己从0开始完全自己diy,绝对可以,只不过需要耗费一些不少的 ...

使用JS实现手风琴效果

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

随机推荐

热门专题