效果说明：当鼠标移动到已折叠广告的标题后，折叠当前已展开的广告，并同步展开相应的折叠广告。这种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. java基础复习之对于String对象，能够使用“=”赋值，也能够使用newkeyword赋值，两种方式有什么差别？

    String类型是实际工作中经经常使用到的类型,从数据类型上划分,String是一个引用类型,是API中定义的一个类.所以String类型的对象能够用new创建,比如String name=new S ...

  2. careercup-C和C++ 13.5

    13.5 谈谈C语言关键字”volatile”的意义(或重要性)? 解答 关键字volatile的作用是指示编译器,即使代码不对变量做任何改动,该变量的值仍可能被外界修改.操作系统.硬件或其他线程都可 ...

  3. PHP中的全局变量$_SERVER

    1.常用 $_SERVER['PHP_SELF'] #当前正在执行脚本的文件名,与 document root相关.$_SERVER['argv'] #传递给该脚本的参数.$_SERVER['argc ...

  4. 基础：c++中引用与java中的引用

    using namespace std; class Point { public: double x; double y; Point(){} void setPoint(double x,doub ...

  5. Java 8 Date Time API Example Tutorial – LocalDate, Instant, LocalDateTime, Parse and Format

    参考 Java 8 Date and Time API is one of the most sought after change for developers. Java has been mis ...

  6. Linux学习之路：shell变量（一）

    一.变量的显示与设置 1.变量的显示运用echo命令 +$符号: 上图例子显示的是系统变量,咱们可以自己设置变量 2.设置变量运用“=”符号 设置了变量NIU 值为“niunai” 变量设置规则: ( ...

  7. 寻找对象在父元素下的index

    方法一. window.onload=function(){    //寻找对象在父元素下的index    function getIndexParent(element){         var ...

  8. 用happen-before规则重新审视DCL(转载)

    编写Java多线程程序一直以来都是一件十分困难的事,多线程程序的bug很难测试,DCL(Double Check Lock)就是一个典型,因此对多线程安全的理论分析就显得十分重要,当然这决不是说对多线 ...

  9. 关于Git的merge和rebase命令解析

    git rebase是对提交执行变基的操作.即可以实现将指定范围的提交"嫁接"到另外一个提交智商. 其常用的命令格式有: 用法1:git rebase --onto <new ...

  10. HuffmanTree && HuffmanCode

    如何构造HuffmanTree? Huffman算法: (1)根据给定的n个权值{w1, w2, ...,wn}构成n棵二叉树集合