今天给大家分享一款动漫网站基于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. sqlite使用小结

    官方网站 http://www.sqlite.org/index.html 图形前端 http://www.sqlabs.net/sqlitemanager.php 个人觉得firefox的sqlit ...

  2. hdu4135-Co-prime & Codeforces 547C Mike and Foam (容斥原理)

    hdu4135 求[L,R]范围内与N互质的数的个数. 分别求[1,L]和[1,R]和n互质的个数,求差. 利用容斥原理求解. 二进制枚举每一种质数的组合,奇加偶减. #include <bit ...

  3. ESB服务号列表

    用于以下两个网址: -浙商ESB调用规范- xml格式 -浙商ESB调用规范- json格式   ESB服务号<SERVICE_NO>{serviceNo} 接口中文意思 42000000 ...

  4. JQuery与GridView控件结合示例

    JQuery是一种非常强大的客户端JS编程技术,这里不想过多阐述它的相关背景知识,只想简单演示一下如何与asp.net的控件结合开发. 比如,我们要做一个下面如图所示的功能,效果是状态.编号.数字1. ...

  5. oracle创建自增长列

    --创建一个新表 /*create table students(stu_id number,stu_name varchar2(20),stu_email varchar2(40),primary ...

  6. Tomcat设置自己的项目为默认项目(用IP访问的是自己的项目)

    方法一:将项目拷贝到webapps下,并更名为ROOT; 方法二:在tomcat/conf/service.xml的<host></host>中配置 <Context p ...

  7. 索引的实现:B+树

    [ http://blog.csdn.net/stormbjm/article/details/12033673 ]   见<数据库系统概念>P323.   [从B树.B+树.B*树谈到R ...

  8. flash 定义主舞台窗口大小

    1:[SWF(width=100 height=100)] 写在主类上面2:设置stageScaleMode属性为false;

  9. 表单input按钮在各浏览器之间的兼容性

    从网上看了这篇关于表单input按钮的浏览器兼容性问题,总结的还不错,所以copy下来学习下. input按钮在各个浏览器之间的兼容性问题,看下边这段代码: input.item { backgrou ...

  10. Unable to execute dex: Multiple dex files define 解决方法

    程序编译正常,在用Eclipse调试执行时,报错Unable to execute dex: Multiple dex files define: 方法:      原因是有重复的.jar被引用,可以 ...