效果说明：当鼠标移动到已折叠广告的标题后，折叠当前已展开的广告，并同步展开相应的折叠广告。这种Accordion效果，看似简单，但因为存在动画同步的问题，不能简单地用两个animate()来实现。必须把它做成一个不断循环判断执行的动画。
演示地址：http://frontendcode.sinaapp.com/J-Lui/jQuery-jLaccordion-plugin/

js/jquery.jLaccordion.js：

;(function($){

    $.fn.extend({

        "jLaccordion":function(){

                var timer = null;

                var $aLi = $(this).find("ul li");    //获取li标签列表对象

                var $aSpan = $(this).find("ul li").eq(0).find("span");    //获取一个span标签对象

                var liWidth = $(this).find("ul li").eq(0).width();    //获取展开后li标签的宽度

                var spanWidth = $aSpan.width() + parseInt($aSpan.css("borderRightWidth").replace("px",""));    //获取span标签的宽度（包括有边框）

                    $aLi.mouseover(function(){

                        var $thisObj = $(this);    //存储鼠标当前所在li对象

                        clearInterval(timer);    //清理定时器

                        timer = setInterval(function(){    //设置定时器，每隔30毫秒对每一个li对象进行判断操作

                            for(var i = 0; i < $aLi.length; i++){

                                if($thisObj.width() == liWidth){  //如果鼠标移动到已完全展开的li对象上，则不用进行计算和判断操作

                                    break;

                                }

                                /* 缓冲算法，speed终将变成0 ，所有循环执行完之后的speed之和必将等于当前下标li的移动距离 */

                                var speed = ($aLi.eq(i).width() - spanWidth)/5;    //计算当前下标li对象在该次循环中的移动距离

                                speed = Math.ceil(speed);

                                if($aLi.eq(i).width() > spanWidth){

                                    $aLi.eq(i).width($aLi.eq(i).width() - speed);

                                    $thisObj.width($thisObj.width() + speed);

                                }

                                if($thisObj.width() == liWidth && speed == 0){

                                    clearInterval(timer);

                                }

                            }

                        },30);

                    });

        }

    })

})(jQuery);

index.html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jQuery手风琴广告展示插件</title>

<link href="css/style.css" rel="stylesheet" type="text/css" />

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

<script type="text/javascript" src="js/jquery.jLaccordion.js"></script>

<script type="text/javascript">

$(document).ready(function(){

    $("#show1").jLaccordion();

});

</script>

</head>

<body>

<div id="show1">

    <ul>

        <li class="active">

            <span class="bg0">第一个广告标题</span>

            <a href="#"><img src="data:images/pic1.png" /></a>

        </li>

        <li>

            <span class="bg1">第二个广告标题</span>

            <a href="#"><img src="data:images/pic2.png" /></a>

        </li>

        <li>

            <span class="bg2">第三个广告标题</span>

            <a href="#"><img src="data:images/pic3.png" /></a>

        </li>

        <li>

            <span class="bg3">第四个广告标题</span>

            <a href="#"><img src="data:images/pic4.png" /></a>

        </li>

        <li>

            <span class="bg2">第五个广告标题</span>

            <a href="#"><img src="data:images/pic5.png" /></a>

        </li>

        <li>

            <span class="bg3">第六个广告标题</span>

            <a href="#"><img src="data:images/pic6.png" /></a>

        </li>

    </ul>

</div>

</body>

</html>

css/style.css：

省略

jQuery手风琴广告展示插件的更多相关文章

  1. jQuery图片组展示插件----Galleria使用简介

    1.技术目标 掌握Galleria插件的基本操作 2.Galleria简介 Galleria是一个jQuery插件,可用于展示多张图片,操作也比较简单, 展示效果也非常不错,如图: 提示:Galler ...

  2. jQuery Panorama Viewer – 360度全景展示插件

    jQuery Panorama Viewer 这款插件可以帮助你在网站中嵌入全景图片.要做到这一点,首先只需要在页面中引入最新的 jQuery 库,以及 jquery.panorama_viewer. ...

  3. bootstrap-简洁实用的jQuery手风琴插件

    前端 <html lang="zh"> <head> <meta charset="UTF-8"> <meta htt ...

  4. 【jquery】fancybox 是一款优秀的 jquery 弹出层展示插件

    今天给大家分享一款优秀的 jquery 弹出层展示插件 fancybox.它除了能够展示图片之外,还可以展示 flash.iframe 内容.html 文本以及 ajax 调用,我们可以通过 css ...

  5. 即时新闻展示插件jQuery News Ticker，超级简单！

    有时候我们为了节省页面空间,会在页面明显处放一小条,用来展示比较重要的即时新闻,一般以轮播的形式出现.今天要介绍的jQuery News Ticker插件就是用来实现这个即时新闻展示功能的,效果图如下 ...

  6. 一款基于jquery的手风琴图片展示效果

    今天要给大家分享一款基于jquery的手风琴图片展示效果.这款图片的展示效果鼠标经过前是灰色的,当鼠标经过时图片变大且变为彩色.效果图如下: 在线预览   源码下载 实现的代码. html代码: &l ...

  7. 20+功能强大的jQuery/CSS3图片特效插件

    以下是分享的20几个不错的图片特效插件,基于jQuery和CSS3. 1.jQuery图片下滑切换播放效果 这是一款基于jQuery的焦点图插件,这款焦点图的特点是有向下滑动的动画效果,滑到底部时,有 ...

  8. 使用jQuery开发tab选项卡插件

    为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动 ...

  9. 使用图片视频展示插件blueimp Gallery改造网站的视频图片展示

    在很多情况下,我们网站可能会展示我们的产品图片.以及教程视频等内容,结合一个比较好的图片.视频展示插件,能够使得我们的站点更加方便使用,也更加酷炫,在Github上有很多相关的处理插件可以找来使用,有 ...

随机推荐

  1. ShowcaseView-master

      ShowcaseView.rar

  2. 傲娇Android二三事之操蛋的开发日记(第一回)

    武宗元年 十一月初四 霾 今日魔都,依旧仙雾环绕,仿佛蓬莱落凡尘.望着470这个鲜红的AQI修仙指数,贫道不禁吟道,“正是修仙好光景,雾霾时节又逢君”.但在这个只修bug,不修仙的时代,路上的行人都步 ...

  3. java_泛型（设置通配符下限）

    package ming; import java.util.ArrayList; import java.util.Collection; import java.util.List; /* * 返 ...

  4. Android（java）学习笔记135：Android中assets文件夹资源的访问

    Android资源文件分类: Android资源文件大致可以分为两种: 第一种是res目录下存放的可编译的资源文件: 这种资源文件系统会在R.java里面自动生成该资源文件的ID,所以访问这种资源文件 ...

  5. android开发之路02（浅谈BroadcastReceiver）

    一.BroadcastReceiver (广播接收者)的作用是用来接收来自系统和应用中的广播.应用如下: 1.开机完成后系统会产生一条广播----->接收到这条广播就能实现开机启动服务的功能: ...

  6. mysql：通用查询日志general_log

    1.通用查询日志:记录建立的客户端连接和执行的语句,通用查询日志默认情况下不是开启的,通用查询日志是以文本方式存放的 当需要采样分析的时候手工开启: SET Global general_log=1; ...

  7. posix thread概述

    1. 基本概念 一个Unix进程可以理解为一个线程加上地址空间.文件描述符和其他数据.异步表明事情相互独立发生, 除非有强加的依赖性. 并发指实际可能是穿行发生的事情好像同时发生一样.并行指并发序列同 ...

  8. java基础学习总结五(递归算法、冒泡排序、查看生成API)

    一:递归算法 概念:自己调用自己的方法 示例代码如下: @Test /** * 递归求和 * 5+4+3+2+1=15 */ public void getSum() { long sum = sum ...

  9. 【Objective-C】3 -self关键字

    一.Java中的this只能用在动态方法中,不能用在静态方法中 1.在动态方法中使用this关键字 1 public class Student { 2 private int age; 3 publ ...

  10. php中GD库的一些简单使用

    今天了解了一些GD库的简单使用,现在稍微做一下总结! GD库是什么?,graphic device,图像工具库,gd库是php处理图形的扩展库,gd库提供了一系列用来处理图片的API,使用GD库可以处 ...