<!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. 基础7 面向对象进阶与socket编程

    1.静态方法(用得少)(解除某个函数跟类的关联,加了静态方法后,类便不能将类的参数传给静态方法函数了) class Dog(object): def __init__(self,name): @sta ...

  2. Java 之 Serializable 序列化和反序列化的概念,作用的通俗易懂的解释

    遇到这个 Java Serializable 序列化这个接口,我们可能会有如下的问题a,什么叫序列化和反序列化b,作用.为啥要实现这个 Serializable 接口,也就是为啥要序列化c,seria ...

  3. MySQL中的information_schema

    information_schema 数据库是MySQL自带的,可看作是一个数据库,确切说是信息数据库.其中保存着关于MySQL服务器所维护的所有其他数据库的信息.如数据库名,数据库的表,表栏的数据类 ...

  4. Hibernate系列3-----之修改

    只是修改测试类,先看其他的代码的同学,请翻看我的博客Hibernate1,嘿嘿,我就在这不在重写一遍来 @Test public void testhibernate() { updateStuden ...

  5. 服务器断电后 redis重启后启动不起来

    服务器断电后 redis 重启后启动不起来 原因:db持久化失败 1. 先查询redis的进程 ps -ef|grep redis 2. 查询redis的缓存文件在哪 whereis dump.rdb ...

  6. 实现AB值对换的两种方法

    package com.smbea.demo.exchange; /** * AB对换 * @author hapday * @2017年1月22日 @上午12:36:24 */ public cla ...

  7. While, DoWhile in WorkFlow.

    On 03/03/2010, in 4.0, WF, by bcakiroglu While Activity In a While activity, the activity in the Bod ...

  8. django orm 时间字段讲解

    创建django的model时,有DateTimeField.DateField和TimeField三种类型可以用来创建日期字段,其值分别对应着datetime().date().time()三中对象 ...

  9. vos限制客户呼出时间

    问题: 公司希望自己的卡线晚上 21:00-24:00    早上00:00-7:30不能打出电话,以防遭投拆, 那么如何设置? 方法: 找到客户使用的落地网关, 落地网关——补充设置——

  10. 中兴ZXR10 GER4核心路由器配置案例

    Connecting to 192.168.100.2:23...Connection established.To escape to local shell, press 'Ctrl+Alt+]' ...