效果说明：当鼠标移动到已折叠广告的标题后，折叠当前已展开的广告，并同步展开相应的折叠广告。这种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. Mac下移动硬盘不能粘贴

    不想格式化,安装 Paragon NTFS 10.0.2 from:http://www.nowmac.com/support/mac/664.html 就可以解决

  2. C++ 继承的访问权限

    1.它解决什么问题?为什么设计出继承的各种访问权限? 可以这样认为,C++继承会把父类的东西拉到自己这里,这些东西都是自己的,父类中的字段和方法都有访问权限,如果我想改变这些东西的访问权限,该怎么办? ...

  3. 2015北京网络赛 G题 Boxes bfs

    Boxes Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://hihocoder.com/contest/acmicpc2015beijingonl ...

  4. （转）Dependency Walker使用说明

    在Windows世界中,有无数块活动的大陆,它们都有一个共同的名字——动态链接库.现在就让我们走进这些神奇的活动大陆,找出它们隐藏已久的秘密吧! 初窥门径:Windows的基石 随便打开一个系统目录, ...

  5. careercup-C和C++ 13.7

    13.7 写一个函数,其中一个参数是指向Node结构的指针,返回传入数据结构的一份完全拷贝. Node结构包含两个指针,指向另外两个Node. C++实现代码: typedef map<Node ...

  6. Supervised Learning-Regression

    假设我们有一张房子属性及其价格之间的关系表(如下图所示) ,根据这些数据如何估计其他房子的价格?我们的第一个反应肯定是参考属性相似的房子的价格.在属性较少时这个方法还行得通,属性太复杂时就不那么简单了 ...

  7. linux文件 编辑常用 inux手把手vi ---针对文件操作

    命令语法 说明 使用频率(1:常用;2一般:3:偶尔) 1.VI编辑器的启动与退出 VI编辑器的启动与退出 vi  file1 新建一个文本文件名为file1 :q 退出,如果对缓存去进行过修改,则提 ...

  8. springMVC项目在jboss7中配置应用自己的log4j--转载

    原文地址:http://www.xuebuyuan.com/1954635.html Jboss7默认采用容器自己的log4j module,应用自己配置的log4j不起作用,需要应用做一些设置: 以 ...

  9. jqgrid 的编辑信息提示

    在编辑时,无外乎两种结果:成功和失败.在form edit的弹出编辑窗体中隐藏了两个单元(td),一个的ID是FormError,另一个没有id,有class叫做topinfo.就是这两个家伙可以分别 ...

  10. C++ （P70—P96）

    1 类的成员默认为私有模型 2 类的声明内不允许对数据成员进行初始化 3 类的成员函数,如果在类外定义,只需在函数类型之前加上inline就为内联函数了,如果在类内定义函数则该函数自动成为内联成员函数 ...