效果说明：当鼠标移动到已折叠广告的标题后，折叠当前已展开的广告，并同步展开相应的折叠广告。这种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. 【美妙的Python之中的一个】Python简单介绍及环境搭建

    美妙的Python之Python简单介绍及安装         简而言之: Python 是能你无限惊喜的语言,与众不同.             1.Python:                  ...

  2. Effective C++ 第二版 17)operator=检查自己 18)接口完整 19)成员和友元函数

    条款17 在operator=中检查给自己赋值的情况 1 2 3 class  X { ... }; X a; a = a;  // a 赋值给自己 >赋值给自己make no sense, 但 ...

  3. nginx+tomcat动静分离的核心配置

    #所有jsp的页面均交由tomcat或resin处理 location ~ .(jsp|jspx|do)?$ { proxy_set_header Host $host; proxy_set_head ...

  4. [React Native] Complete the Notes view

    In this final React Native lesson of the series we will finalize the Notes view component and squash ...

  5. Windows下python环境变量配置

    默认情况下,在windows下安装python之后,系统并不会自动添加相应的环境变量.此时不能在命令行直接使用python命令. 1. 首先需要在系统中注册python环境变量:假设python的安装 ...

  6. 如何强化 TCP/IP 堆栈

    TCP/IP 是一种本质上不安全的协议.但是,Windows 2000 实现可以使您配置其操作以防止网络的拒绝服务攻击.默认情况下,本文中所涉及的一些项和值可能并不存在.在这些情况下,请创建该项.值或 ...

  7. ping与telnet的区别

    ping 查看某个IP地址是否有效.还可以得出解析IP..评估网络质量.telnet 查看可以PING通IP的机子上的某个端口是否可以进行访问(telnet IP port) ,如果连接失败,可能是防 ...

  8. Android_Intent_passValue(4)

    xml布局文件: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns ...

  9. 修改整个app的字体

    在项目开发中  有时候为了一些好的UI效果  可能需要自定义字体  app导入字体库的教程网上有很多 导进去 修改plist文件  然后如何将整个app的字体都换成自定义的字体呢  一个个去写太麻烦了 ...

  10. webbroswer 后台注入脚本 的方法

    HtmlElement script = webBrowser.Document.CreateElement("script"); script.SetAttribute(&quo ...