<!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. SQL语句增删改字段、表、修改默认值

    收集转载: 1.修改字段,默认值 .修改字段默认值 alter table 表名 drop constraint 约束名字 ------说明:删除表的字段的原有约束 alter table 表名 ad ...

  2. Winform窗体“空闲事件”

    Application.Idle += Application_Idle; void Application_Idle(object sender, EventArgs e){ } 当应用程序完成处理 ...

  3. 最小白的webpack+react环境搭建

    本文也同步发表在我的公众号“我的天空” 从零开始,用最少的配置.最少的代码.最少的依赖来搭建一个最简单的webpack+react环境. 最近在玩webpack+react+移动端,那么第一步自然是搭 ...

  4. staticmethod classmethod property方法

    @staticmethod 静态方法 函数修饰符,用来修饰一个函数,类似于装饰器 class Dog(object): def __init__(self,name): self.name = nam ...

  5. Eclipse JSP 页面设置 charset=UTF-8

    windows —> Preferences —> 搜索框中输入:JSP,设置如下:

  6. [bootstrap]模态框总结

    <!--data-backdrop禁止点击空白处关闭模态框,也可以js设置,其他参数可参考官网模态框文档--> <div class="modal fade" i ...

  7. 百度开源项目插件 - Echarts 图表

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  8. jquery对checkbox的操作汇总

    1.全选 $("#btn1").click(function(){ $("input[name='checkbox']").attr("checked ...

  9. May 8th 2017 Week 19th Monday

    Art lies in concealing art. 隐而不露即艺术. Sometimes, concealing is much more seductive than totally naked ...

  10. 141. Linked List Cycle (amazon)

    Given a linked list, determine if it has a cycle in it. Follow up:Can you solve it without using ext ...