<!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. Golang笔记（二）面向对象的设计

    Golang笔记(二)面向对象的设计 Golang本质还是面向过程的语言,但它实现了一些OOP的特性,包括抽象.封装.继承和多态. 抽象和封装 Golang和C语言一样以struct为数据结构核心,不 ...

  2. DB2错误码大全

    sqlcode sqlstate 说明 000 00000 SQL语句成功完成 01xxx SQL语句成功完成,但是有警告 +012 01545 未限定的列名被解释为一个有相互关系的引用 +098 0 ...

  3. Chrome谷歌浏览器中js代码Array.sort排序的bug乱序解决办法

    [现象] 代码如下: var list = [{ n: "a", v: 1 }, { n: "b", v: 1 }, { n: "c", v ...

  4. Hibernate课程 初探多对多映射2-2 创建持久化类和映射文件

    生成实体类 和 cfg.xml配置 cfg.xml 参照一对多映射 实体类如下: Project 类 package com.ddwei.entity; import java.util.HashSe ...

  5. Vue之组件间传值

    标签: Vue Vue之父子组件传值 父向子传递通过props 子向父传递通过$emit 演示地址 代码示例如下: <!DOCTYPE html> <html lang=" ...

  6. python基础:冒泡和选择排序算法实现

    冒泡排序和选择排序   首先引用一下百度百科对于冒泡算法的定义:   冒泡排序算法的原理如下: 比较相邻的元素.如果第一个比第二个大,就交换他们两个. 对每一对相邻元素做同样的工作,从开始第一对到结尾 ...

  7. iOS沙盒(sandbox)机制及获取沙盒路径

    一.每个iOS应用SDK都被限制在沙盒中,沙盒相当于一个加了仅主人可见权限的文件夹,苹果对沙盒有以下几条限制. (1).应用程序可以在自己的沙盒里运作,但是不能访问任何其他应用程序的沙盒. (2).应 ...

  8. 《ArcGIS Runtime SDK for Android开发笔记》——（8）、关于ArcGIS Android开发的未来（“Quartz”版Beta）

    1.前言 今天再一次在官网看到了ArcGIS Runtime SDK for Android下一个版本“Quartz”版的更新资料,它将是一个非常重要的更新,包括API接口的重构和开发思路的调整.具体 ...

  9. iptable防范ddos攻击

    Basic DoS Protection https://github.com/MPOS/php-mpos/wiki/Basic-DoS-Protection # Rule 1: Limit New ...

  10. 动软代码生成器，主子表增加的时候子表的parentID无法插入问题解决方案

    StringBuilder strSql=new StringBuilder(); strSql.Append("insert into HT_XunJiaMain("); str ...