<!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. 先定个小目标, 使用C# 开发的千万级应用

    dotNET跨平台 微信号 opendotnet 功能介绍 在这里你可以谈微软.NET,Mono的跨平台开发技术,也可以谈谈其他的跨平台技术.在这里可以让你的.NET项目有新的思路,不局限于微软的技术 ...

  2. c#-day03学习笔记

    循环语句 一共有三种 1: For循环 2: while 循环 3: do while 循环 //1             //2             //4 For循环  语法       f ...

  3. C#继承 多态

    1.继承 允许我们根据一个类来定义另一个类.已有的类被称为的基类(父类),新的类被称为派生类(子类). 单一继承:只能有一个基类,一个基类可以派生出多个派生类,一个类别只可以继承自一个父类. 多重继承 ...

  4. asp实现网页浏览总数

    <% AlldayView=0 Set Rs=Server.CreateObject("Adodb.RecordSet") Sql="select * from v ...

  5. 什么是NIO2

    NIO2I/O发展历史Java1.0-1.3在Java的早期版本中,没有完整的I/O支持,在开发过程中需要解决以下问题:1)没有数据缓冲区或者NIO的通道概念,需要编程人员处理底层细节.2)I/O是受 ...

  6. Java编译及装载

    Java类加载机制 JVM将类加载过程划分为三个步骤:装载.链接和初始化. 装载(Load):装载过程负责找到二进制字节码并加载至JVM中,JVM通过类的全限定名(com.bluedavy. Hell ...

  7. css画扇形按钮

    最近项目中需要制作一个扇形按钮,效果是这样的: 周围四个扇形,和中间的小圆,全是能点击的.这就需要画扇形.百度了一下,有很多文章讲了如何生成扇形,最后我借鉴了一个最简单的实现方式,使用css的clip ...

  8. Python常用模块(一)

    一.time模块 time模块提供各种操作时间的函数 时间三种格式 1.时间戳 以1970年1月1日 00:00:00开始的秒数 2.本地时间 localtime,表示计算机当前的时间 3.UTC世界 ...

  9. viewport信息设置

  10. java.lang.OutOfMemoryError: Failed to allocate a 3110419 byte allocation with 741152 free bytes and

    在进行SurfaceView的开发时,出现了java.lang.OutOfMemoryError错误: 由于项目是同时显示四路远端传输过来的视频 所以采用的方法是使用:android:hardware ...