<!doctype html>

<html>

<head>

<meta charset="utf-8">

<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

<style>

*{margin:0;padding:0;}

body{font-size:12px;}

#accordion{width:727px; height:350px; margin:100px auto 0 auto; position:relative; overflow:hidden; border:1px solid #CCC;}

#accordion ul{list-style:none;}

#accordion ul li{width:643px;height:350px; position:absolute; background:#FFF;}

#accordion ul li span{display:block;width:20px; height:350px; float:left; text-align:center; color:#FFF; padding-top:5px; cursor:pointer;}

#accordion ul li img{display:block; float:right;}

.bar01{left:0px;}

.bar02{left:643px;}

.bar03{left:664px;}

.bar04{left:685px;}

.bar05{left:706px;}

.bar01 span{background:#09E0B5;}

.bar02 span{background:#3D7FBB;}

.bar03 span{background:#5CA716;}

.bar04 span{background:#F28B24;}

.bar05 span{background:#7C0070;}

</style>

<script type="text/javascript">

    $(function(){

        $('#accordion li').click(function() {        

            $(this).animate({left:$(this).index()*21});            

            $(this).prevAll().each(function(){

                $(this).animate({left:$(this).index()*21});

            });

            $(this).nextAll().each(function(){

                $(this).animate({left:(727-(5-$(this).index())*21)});

            });

        });

    })

</script>

<title>手风琴效果</title>

</head>

<body>

<div id="accordion">

    <ul>

    <li class="bar01"><span>非洲景色01</span><img src="data:images/001.jpg" /></li>

    <li class="bar02"><span>非洲景色02</span><img src="data:images/002.jpg" /></li>

    <li class="bar03"><span>非洲景色03</span><img src="data:images/003.jpg" /></li>

    <li class="bar04"><span>非洲景色04</span><img src="data:images/004.jpg" /></li>

    <li class="bar05"><span>非洲景色05</span><img src="data:images/005.jpg" /></li>

    </ul>

</div>

</body>

</html>

jquery横向手风琴效果2的更多相关文章

  1. 基于jquery横向手风琴效果

    基于jquery横向手风琴效果是一款基于jquery实现的左右滑动手风琴图片轮播切换特效.效果图如下: 在线预览   源码下载 效果图如下: <div class="flash&quo ...

  2. jquery横向手风琴效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. jQuery横向手风琴图片滑块

    jQuery横向手风琴图片滑块是一款非常不错的jQuery特效横向手风琴图片滑块插件,可以自动播放,也可以鼠标滑过时切换.+ 欢迎喜欢的朋友下载研究 源码下载页:http://www.huiyi8.c ...

  4. jquery 图片手风琴效果

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

  5. jquery实现手风琴效果

    html----accordion.html <!DOCTYPE html> <html lang="en"> <head> <meta ...

  6. jQuery做出手风琴效果

    今天学到JQuery中的遍历-siblings,便手痒做了个手风琴的动态效果,有一点收获,分享给大家.mouseout的时候一定要记得opacity必须设置,不然li的opacity会保持mousem ...

  7. jQuery横向手风琴

    在线演示 本地下载

  8. jquery版手风琴效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. jQuery实现手机竖直手风琴效果

    效果:http://hovertree.com/texiao/jquery/65/ 效果图: 手机扫描二维码查看效果: 代码: <!doctype html> <html lang= ...

随机推荐

  1. Java学习第十六天

    1:List的子类(掌握) (1)List的子类特点 ArrayList: 底层数据结构是数组,查询快,增删慢 线程不安全,效率高 Vector: 底层数据结构是数组,查询快,增删慢 线程安全,效率低 ...

  2. Day6上 括号匹配专项

    滑稽的题 T1 #include<iostream> #include<cstring> #include<queue> #include<algorithm ...

  3. IIS设置问题

    1.解决IIS7.5中部署WCF时,访问.svc文件的404错误问题  如果你直接在IIS 7中配置WCF,访问.svc文件时会出现404错误.解决方法,以管理员身份进入命令行模式,运行:" ...

  4. .net 与 asp.net

    .net 指的是框架,框架包含很多东西例如: > 语言: VB, C#, C++, Ruby, Python ... > 类库: 网络通讯,图像处理, 安全,IO,数据链接访问 ... & ...

  5. 树莓派直连线连接PC

    刚入手树莓派一天不到,SSH树莓派一直用的是路由+无线网卡的配置.想到明天就要出差了,本想把树莓派也带去,可宾馆的房间只有一个网口,通常都是兄弟们连接小型无线路由用的,连接树莓派似乎成了一个难题.于是 ...

  6. 设计模式之装饰器模式io的小入门(十一)

    装饰器模式详解地址 原文总结 定义: 在不必改变原类文件和使用继承的情况下, 动态的扩展一个对象的功能. 通过创建一个包装对象, 也就是装饰来包裹真实的对象 部分详解提示 看了一些文档, 装饰器模式非 ...

  7. EF--Model First

    Model First先设计Model对象,再由对象生成数据库. 1.新建控制台项目,名称ModelFirst,确定. 2.点击选中项目,右键-->添加-->新建项目--选择数据模板--& ...

  8. android sqlite3命令行检查自己的代码操作数据库是否正确

    真机调试的话需要root ,否则没有访问目录的权限 在 linux 的终端 或者 windows的cmd 中输入 adb shell 进入shell 环境 cd /data/data/程序包名/dat ...

  9. 【转】VMware虚拟机系统无法上网怎么办?

    有很多用户通过安装VMware软件来创建虚拟机系统,其中就有部分用户在创建好虚拟机系统后遇到无法上网的问题,下面PC6苹果网小编就给大家带来VMware虚拟机系统下无法上网的解决办法: 1.在虚拟机右 ...

  10. CentOS下用rinetd做端口转发

    windows下的端口转发一般用的是自带的nat和porttunnel.portmap linux下端口转发映射的程序叫rinetd,启动方法rinetd -c /etc/rinetd.conf  , ...