今天给大家分享一款动漫网站基于jquery的横向手风琴特效。这款手风琴特效适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果图如下：

在线预览   源码下载

实现的代码。

html代码：

 <div class="box2">

        <div class="banner_tit">

            动漫人物</div>

        <div class="hot_role">

            <ul id="centerwell">

                <li>

                    <h3>

                        <img alt="神崎·H·亚里亚" src="data:images/20141226132540254074.jpg"></h3>

                    <div class="hot_content">

                        <div class="hot_left">

                            <a href="#">

                                <img alt="神崎·H·亚里亚" class="img_box" src="data:images/w_2014100614085185182.jpg"></a></div>

                        <div class="hot_top">

                            <dl class="hot_line">

                                <dd>

                                    <div class="t16 yahei">

                                        <span><a href="#">神崎·H·亚里亚</a></span> <span class="role_fen ml15">8.9</span>

                                    </div>

                                    <div class="mt10">

                                        <span class="bold">性别：</span><span class="color444">女</span></div>

                                    <div class="mt5">

                                        <span class="bold">属性：</span> <span class="color444"><a href="#" class="mr7">长发</a>

                                            <a href="#" class="mr7">傲娇</a> <a href="#" class="mr7">贫RU</a> <a href="#" class="mr7">

                                                双马尾</a> <a href="#" class="mr7">枪械少女</a> <a href="#" class="mr7">萝莉</a> <a href="#"

                                                    class="mr7">虎牙</a> </span>

                                    </div>

                                    <div class="mt5">

                                        <span class="bold">动漫：</span><span class="color444"><a href="#">《绯弹的亚里亚》</a></span></div>

                                    <div class="mt5">

                                        <span class="bold">地区：</span><span class="color444"><a>日本</a></span></div>

                                </dd>

                                <div class="clear">

                                </div>

                            </dl>

                        </div>

                        <div class="clear">

                        </div>

                        <div class="mt10">

                            <span class="bold">动漫人物介绍：</span> <span class="color444">动漫作品《绯弹的亚里亚》中的女主角，英国著名侦探夏洛克·福尔摩斯的后裔，福尔摩斯四世。在第七卷可得知出生日为9月23日。没有遗传到祖先优秀推理能力的她，被家族视为废物。但性格不服输又自尊极强的亚里亚，凭借自身天生的战斗感及努力，在英国武侦界闯出了名气</span>

                            <span class="ml20"><a href="#">详情&gt;&gt;</a></span>

                        </div>

                    </div>

                </li>

                <li>

                    <h3>

                        <img alt="黑子哲也" src="data:images/20141212205639563966.jpg"></h3>

                    <div class="hot_content">

                        <div class="hot_left">

                            <a href="#">

                                <img alt="黑子哲也" class="img_box" src="data:images/w_20141006135756575615.jpg"></a></div>

                        <div class="hot_top">

                            <dl class="hot_line">

                                <dd>

                                    <div class="t16 yahei">

                                        <span><a href="#">神崎·H·亚里亚</a></span> <span class="role_fen ml15">8.9</span>

                                    </div>

                                    <div class="mt10">

                                        <span class="bold">性别：</span><span class="color444">女</span></div>

                                    <div class="mt5">

                                        <span class="bold">属性：</span> <span class="color444"><a href="#" class="mr7">长发</a>

                                            <a href="#" class="mr7">傲娇</a> <a href="#" class="mr7">贫RU</a> <a href="#" class="mr7">

                                                双马尾</a> <a href="#" class="mr7">枪械少女</a> <a href="#" class="mr7">萝莉</a> <a href="#"

                                                    class="mr7">虎牙</a> </span>

                                    </div>

                                    <div class="mt5">

                                        <span class="bold">动漫：</span><span class="color444"><a href="#">《绯弹的亚里亚》</a></span></div>

                                    <div class="mt5">

                                        <span class="bold">地区：</span><span class="color444"><a>日本</a></span></div>

                                </dd>

                                <div class="clear">

                                </div>

                            </dl>

                        </div>

                        <div class="clear">

                        </div>

                        <div class="mt10">

                            <span class="bold">动漫人物介绍：</span> <span class="color444">动漫作品《绯弹的亚里亚》中的女主角，英国著名侦探夏洛克·福尔摩斯的后裔，福尔摩斯四世。在第七卷可得知出生日为9月23日。没有遗传到祖先优秀推理能力的她，被家族视为废物。但性格不服输又自尊极强的亚里亚，凭借自身天生的战斗感及努力，在英国武侦界闯出了名气</span>

                            <span class="ml20"><a href="#">详情&gt;&gt;</a></span>

                        </div>

                    </div>

                </li>

                <li>

                    <h3>

                        <img alt="东乡美森" src="data:images/20141203132722272255.jpg"></h3>

                    <div class="hot_content">

                        <div class="hot_left">

                            <a href="#">

                                <img alt="东乡美森" class="img_box" src="data:images/w_20141204135621562190.jpg"></a></div>

                        <div class="hot_top">

                            <dl class="hot_line">

                                <dd>

                                    <div class="t16 yahei">

                                        <span><a href="#">神崎·H·亚里亚</a></span> <span class="role_fen ml15">8.9</span>

                                    </div>

                                    <div class="mt10">

                                        <span class="bold">性别：</span><span class="color444">女</span></div>

                                    <div class="mt5">

                                        <span class="bold">属性：</span> <span class="color444"><a href="#" class="mr7">长发</a>

                                            <a href="#" class="mr7">傲娇</a> <a href="#" class="mr7">贫RU</a> <a href="#" class="mr7">

                                                双马尾</a> <a href="#" class="mr7">枪械少女</a> <a href="#" class="mr7">萝莉</a> <a href="#"

                                                    class="mr7">虎牙</a> </span>

                                    </div>

                                    <div class="mt5">

                                        <span class="bold">动漫：</span><span class="color444"><a href="#">《绯弹的亚里亚》</a></span></div>

                                    <div class="mt5">

                                        <span class="bold">地区：</span><span class="color444"><a>日本</a></span></div>

                                </dd>

                                <div class="clear">

                                </div>

                            </dl>

                        </div>

                        <div class="clear">

                        </div>

                        <div class="mt10">

                            <span class="bold">动漫人物介绍：</span> <span class="color444">动漫作品《绯弹的亚里亚》中的女主角，英国著名侦探夏洛克·福尔摩斯的后裔，福尔摩斯四世。在第七卷可得知出生日为9月23日。没有遗传到祖先优秀推理能力的她，被家族视为废物。但性格不服输又自尊极强的亚里亚，凭借自身天生的战斗感及努力，在英国武侦界闯出了名气</span>

                            <span class="ml20"><a href="#">详情&gt;&gt;</a></span>

                        </div>

                    </div>

                </li>

                <li>

                    <h3>

                        <img alt="长门有希" src="data:images/20141109103459345940.jpg"></h3>

                    <div class="hot_content">

                        <div class="hot_left">

                            <a href="#">

                                <img alt="长门有希" class="img_box" src="data:images/w_20141103131840184098.jpg"></a></div>

                        <div class="hot_top">

                            <dl class="hot_line">

                                <dd>

                                    <div class="t16 yahei">

                                        <span><a href="#">神崎·H·亚里亚</a></span> <span class="role_fen ml15">8.9</span>

                                    </div>

                                    <div class="mt10">

                                        <span class="bold">性别：</span><span class="color444">女</span></div>

                                    <div class="mt5">

                                        <span class="bold">属性：</span> <span class="color444"><a href="#" class="mr7">长发</a>

                                            <a href="#" class="mr7">傲娇</a> <a href="#" class="mr7">贫RU</a> <a href="#" class="mr7">

                                                双马尾</a> <a href="#" class="mr7">枪械少女</a> <a href="#" class="mr7">萝莉</a> <a href="#"

                                                    class="mr7">虎牙</a> </span>

                                    </div>

                                    <div class="mt5">

                                        <span class="bold">动漫：</span><span class="color444"><a href="#">《绯弹的亚里亚》</a></span></div>

                                    <div class="mt5">

                                        <span class="bold">地区：</span><span class="color444"><a>日本</a></span></div>

                                </dd>

                                <div class="clear">

                                </div>

                            </dl>

                        </div>

                        <div class="clear">

                        </div>

                        <div class="mt10">

                            <span class="bold">动漫人物介绍：</span> <span class="color444">动漫作品《绯弹的亚里亚》中的女主角，英国著名侦探夏洛克·福尔摩斯的后裔，福尔摩斯四世。在第七卷可得知出生日为9月23日。没有遗传到祖先优秀推理能力的她，被家族视为废物。但性格不服输又自尊极强的亚里亚，凭借自身天生的战斗感及努力，在英国武侦界闯出了名气</span>

                            <span class="ml20"><a href="#">详情&gt;&gt;</a></span>

                        </div>

                    </div>

                </li>

                <li>

                    <h3>

                        <img alt="蒙奇·D·路飞" src="data:images/2014070607210321370.jpg"></h3>

                    <div class="hot_content">

                        <div class="hot_left">

                            <a href="#">

                                <img alt="蒙奇·D·路飞" class="img_box" src="data:images/w_2014100614182218227.jpg"></a></div>

                        <div class="hot_top">

                            <dl class="hot_line">

                                <dd>

                                    <div class="t16 yahei">

                                        <span><a href="#">神崎·H·亚里亚</a></span> <span class="role_fen ml15">8.9</span>

                                    </div>

                                    <div class="mt10">

                                        <span class="bold">性别：</span><span class="color444">女</span></div>

                                    <div class="mt5">

                                        <span class="bold">属性：</span> <span class="color444"><a href="#" class="mr7">长发</a>

                                            <a href="#" class="mr7">傲娇</a> <a href="#" class="mr7">贫RU</a> <a href="#" class="mr7">

                                                双马尾</a> <a href="#" class="mr7">枪械少女</a> <a href="#" class="mr7">萝莉</a> <a href="#"

                                                    class="mr7">虎牙</a> </span>

                                    </div>

                                    <div class="mt5">

                                        <span class="bold">动漫：</span><span class="color444"><a href="#">《绯弹的亚里亚》</a></span></div>

                                    <div class="mt5">

                                        <span class="bold">地区：</span><span class="color444"><a>日本</a></span></div>

                                </dd>

                                <div class="clear">

                                </div>

                            </dl>

                        </div>

                        <div class="clear">

                        </div>

                        <div class="mt10">

                            <span class="bold">动漫人物介绍：</span> <span class="color444">动漫作品《绯弹的亚里亚》中的女主角，英国著名侦探夏洛克·福尔摩斯的后裔，福尔摩斯四世。在第七卷可得知出生日为9月23日。没有遗传到祖先优秀推理能力的她，被家族视为废物。但性格不服输又自尊极强的亚里亚，凭借自身天生的战斗感及努力，在英国武侦界闯出了名气</span>

                            <span class="ml20"><a href="#">详情&gt;&gt;</a></span>

                        </div>

                    </div>

                </li>

                <li>

                    <h3>

                        <img alt="东兔角" src="data:images/2014070607310131167.jpg"></h3>

                    <div class="hot_content">

                        <div class="hot_left">

                            <a href="#">

                                <img alt="东兔角" class="img_box" src="data:images/w_2014100614051151165.jpg"></a></div>

                        <div class="hot_top">

                            <dl class="hot_line">

                                <dd>

                                    <div class="t16 yahei">

                                        <span><a href="#">神崎·H·亚里亚</a></span> <span class="role_fen ml15">8.9</span>

                                    </div>

                                    <div class="mt10">

                                        <span class="bold">性别：</span><span class="color444">女</span></div>

                                    <div class="mt5">

                                        <span class="bold">属性：</span> <span class="color444"><a href="#" class="mr7">长发</a>

                                            <a href="#" class="mr7">傲娇</a> <a href="#" class="mr7">贫RU</a> <a href="#" class="mr7">

                                                双马尾</a> <a href="#" class="mr7">枪械少女</a> <a href="#" class="mr7">萝莉</a> <a href="#"

                                                    class="mr7">虎牙</a> </span>

                                    </div>

                                    <div class="mt5">

                                        <span class="bold">动漫：</span><span class="color444"><a href="#">《绯弹的亚里亚》</a></span></div>

                                    <div class="mt5">

                                        <span class="bold">地区：</span><span class="color444"><a>日本</a></span></div>

                                </dd>

                                <div class="clear">

                                </div>

                            </dl>

                        </div>

                        <div class="clear">

                        </div>

                        <div class="mt10">

                            <span class="bold">动漫人物介绍：</span> <span class="color444">动漫作品《绯弹的亚里亚》中的女主角，英国著名侦探夏洛克·福尔摩斯的后裔，福尔摩斯四世。在第七卷可得知出生日为9月23日。没有遗传到祖先优秀推理能力的她，被家族视为废物。但性格不服输又自尊极强的亚里亚，凭借自身天生的战斗感及努力，在英国武侦界闯出了名气</span>

                            <span class="ml20"><a href="#">详情&gt;&gt;</a></span>

                        </div>

                    </div>

                </li>

            </ul>

        </div>

    </div>

js代码：

   $(function () {

            $(".nav_item").removeClass("active");

            $("#nav_index").addClass("active");

            var $centerwell_first = $('#centerwell li:first');

            $centerwell_first.animate({ width: '545px' }, 300);

            $centerwell_first.find('h3').addClass("on");

            $('#centerwell li').click(function () {

                if (!$(this).is(':animated')) {

                    $(this).animate({ width: '545px' }, 300).siblings().animate({ width: '100px' }, 300);

                    $('#centerwell li h3').removeClass("on");

                    $(this).find("h3").addClass("on");

                }

            });

        });

via：http://www.w2bc.com/Article/20561

动漫网站基于jquery的横向手风琴特效的更多相关文章

  1. 《基于JQuery和CSS的特效整理》系列分享专栏

    <基于JQuery和CSS的特效整理>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/201724.html 文章 一款基于jQue ...

  2. 基于jquery结婚电子请柬特效素材

    分享基于jquery结婚电子请柬特效素材总共包含3个部分,第一部分是开着小轿车缓缓进入场景,第二部分是相册,第三部分是祝福墙.效果图如下: 在线预览   源码下载 实现的代码. html代码: < ...

  3. 基于jQuery个性圆圈倒计时特效

    基于jQuery个性圆圈倒计时特效里面包含十几款不用效果的jQuery倒计时特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <section class=" ...

  4. 基于jQuery开发的手风琴插件 jquery.accordion.js

     1.插件代码 少说多做,基于jQuery的手风琴插件jquery.accordion.js的代码:  /* * 手风琴插件说明: * 1.treeTrunk对应树干 * 2.treeLeaf对应树叶 ...

  5. 10款基于jquery的web前端特效及源码下载

    1.jQuery时间轴插件:jQuery Timelinr 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚 ...

  6. 基于jQuery左右滑动切换特效 附源码

    分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效.   效果图如下:   废话不多说,代码奉上!   html代码: <div ...

  7. 基于jQuery左右滑动切换特效

    分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  8. 基于jQuery制作的手风琴折叠菜单

    初始化为全部隐藏 点第一个,显示第一个所隐藏的内容 当点第二个的时候,第一个的内容隐藏,第二个栏目的内容显示,以此类推 下面是代码部分 <!DOCTYPE html><html la ...

  9. 10款基于jquery的web前端动画特效

    1.jQuery横向手风琴图片切换动画 之前我们为大家分享过很多款基于jQuery和CSS3的手风琴菜单和手风琴焦点图插件,比如CSS3响应式垂直手风琴菜单和jQuery横向手风琴图片展示插件.今天要 ...

随机推荐

  1. ninject学习笔记一：IOC的实现

    这篇文章主要介绍ninject在IOC方面的实现,至于IOC的含义,网络资源很丰富,我这儿就不再赘述了.官方的文档其实挺好的,只是本人英语很烂,看起来比较费劲,下面这些东西是看官方的代码推敲的,我觉得 ...

  2. 移动端rem布局

    手机页面——分辨率特别乱: 1.定宽320px——优点:简单,缺点:不能适应 2.百分比——优点:能适应各种分辨率,缺点:太麻烦 3.rem——优点:方便.适应各种分辨率(首先定义一个“根大小”htm ...

  3. DCPcrypt

    delphi dcp component TDCP_md5 md5 String; md5 stream;流文件 procedure TForm1.Button1Click(Sender: TObje ...

  4. 转】Maven学习总结(九)——使用Nexus搭建Maven私服

    原博文出自于:http://www.cnblogs.com/xdp-gacl/p/4068967.html 感谢! 一.搭建nexus私服的目的 为什么要搭建nexus私服,原因很简单,有些公司都不提 ...

  5. HDU 4602 Magic Ball Game（离线处理，树状数组，dfs）

    Magic Ball Game Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) ...

  6. ruby中实例变量、类变量等等的区别和联系

    ruby的变量有局部变量,全局变量,实例变量,类变量,常量. 1.局部变量 局部变量以一个小写字母开头或下划线开头 局部变量有局部作用域限制(比如一个block内),它的作用域起始于声明处,结束于该声 ...

  7. Memcached 实例

    建立Manager类 package com.alisoft.sme.memcached; import java.util.Date; import com.danga.MemCached.MemC ...

  8. jsp页面加载readyState的五种状态根据我们状态添加进度条

    这段代码放在页面最下面 原文如下: document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法. function subSomet ...

  9. C#扫描仪编程、条形码识别编程资料

    扫描仪编程资料:http://www.cnblogs.com/wubh/archive/2011/11/07/2239178.html 图片条形码识别资料:http://www.codeproject ...

  10. div+css样式表的id,class的常用命名规则

    div+css样式表的id的常用命名规则如下表所示: div+css样式表的id的常用命名规则如下表所示: 页头 header 登录条 loginBar 标志 logo 侧栏 sideBar 广告 B ...