效果说明：当鼠标移动到已折叠广告的标题后，折叠当前已展开的广告，并同步展开相应的折叠广告。这种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. Graph（2014辽宁ACM省赛）

    问题 F: Graph 时间限制: 1 Sec  内存限制: 128 MB 提交: 30  解决: 5 [cid=1073&pid=5&langmask=0" style=& ...

  2. C++ Primer 学习笔记_95_用于大型程序的工具 --多重继承与虚继承

    用于大型程序的工具 --多重继承与虚继承 引言: 大多数应用程序使用单个基类的公用继承,可是,在某些情况下,单继承是不够用的,由于可能无法为问题域建模,或者会对模型带来不必要的复杂性. 在这些情况下, ...

  3. 详解 MySQL 中的 explain

    来源:persister 链接:http://www.blogjava.net/persister/archive/2008/10/27/236813.html 在 explain的帮助下,您就知道什 ...

  4. mysql 源码调试方法

     http://blog.itpub.net/29254281/viewspace-1847415/ 其中吕海波老师分享的内容是 <调试Oracle二三例:调试技术在日常运维中的应用>其中 ...

  5. jQuery的.bind()、.live()和.delegate()，on之间区别

    基本要素 51CTO推荐专题:jQuery从入门到精通 DOM树 首先,可视化一个HMTL文档的DOM树是很有帮助的.一个简单的HTML页面看起来就像是这个样子: 事件冒泡(又称事件传播) 当我们点击 ...

  6. UILabel 自动换行 和支持换行符

    这个主要是 lable对\n换行符号的支持,有的时候我们从网页或者后台拿到的数据需要处理一下: 这里没什么要说的,注意两点,一个是label的numofline属性的值要为0 或者不能为1  这样la ...

  7. 修改BASH的配色

    PS1变量简介 PS1是Linux终端用户的一个环境变量,用来说明命令行提示符的设置. \d :#代表日期,格式为weekday month date,例如:"Mon Aug 1" ...

  8. Centos 7中 vim 中文乱码

    参考:http://www.myexception.cn/operating-system/1534005.html 一. sudo vim /etc/vimrc 在文件中加入如下几行:      s ...

  9. (转)战斗bug技巧全攻略

    原文地址:http://www.cnblogs.com/manuosex/p/3736077.html 程序员不是有一幅这样的对联吗 上联:一个项目两部电脑三餐盒饭只为四千工资搞得五脏俱损六神无主仍然 ...

  10. 聊聊css盒子模型

    css盒子模型原理: 在网页设计中常听的属性名:内容(content).填充/内边距(padding).边框(border).外边距(margin), CSS盒子模式都具备这些属性. 这些属性我们可以 ...