动漫网站基于jquery的横向手风琴特效
今天给大家分享一款动漫网站基于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="#">详情>></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="#">详情>></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="#">详情>></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="#">详情>></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="#">详情>></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="#">详情>></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的横向手风琴特效的更多相关文章
- 《基于JQuery和CSS的特效整理》系列分享专栏
<基于JQuery和CSS的特效整理>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/201724.html 文章 一款基于jQue ...
- 基于jquery结婚电子请柬特效素材
分享基于jquery结婚电子请柬特效素材总共包含3个部分,第一部分是开着小轿车缓缓进入场景,第二部分是相册,第三部分是祝福墙.效果图如下: 在线预览 源码下载 实现的代码. html代码: < ...
- 基于jQuery个性圆圈倒计时特效
基于jQuery个性圆圈倒计时特效里面包含十几款不用效果的jQuery倒计时特效下载.效果图如下: 在线预览 源码下载 实现的代码. html代码: <section class=" ...
- 基于jQuery开发的手风琴插件 jquery.accordion.js
1.插件代码 少说多做,基于jQuery的手风琴插件jquery.accordion.js的代码: /* * 手风琴插件说明: * 1.treeTrunk对应树干 * 2.treeLeaf对应树叶 ...
- 10款基于jquery的web前端特效及源码下载
1.jQuery时间轴插件:jQuery Timelinr 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚 ...
- 基于jQuery左右滑动切换特效 附源码
分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效. 效果图如下: 废话不多说,代码奉上! html代码: <div ...
- 基于jQuery左右滑动切换特效
分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- 基于jQuery制作的手风琴折叠菜单
初始化为全部隐藏 点第一个,显示第一个所隐藏的内容 当点第二个的时候,第一个的内容隐藏,第二个栏目的内容显示,以此类推 下面是代码部分 <!DOCTYPE html><html la ...
- 10款基于jquery的web前端动画特效
1.jQuery横向手风琴图片切换动画 之前我们为大家分享过很多款基于jQuery和CSS3的手风琴菜单和手风琴焦点图插件,比如CSS3响应式垂直手风琴菜单和jQuery横向手风琴图片展示插件.今天要 ...
随机推荐
- python实现不可修改的常量
因为种种原因,Python并未提供如C/C++/Java一样的const修饰符,换言之,python中没有常量,至少截止2015年年末,还没有这个打算.Python程序一般通过约定俗成的变量名全大写的 ...
- Mapreduce读取Hbase表，写数据到一个Hbase表中
public class LabelJob { public static void main(String[] args) throws Exception { Job job = Job.getI ...
- 笔记：修改centos的IP地址相关配置
最近碰到不少认识的人问相关问题 索性做个笔记 图个方便 修改eth0的网卡配置vi /etc/sysconfig/network-scripts/ifcfg-eth0DEVICE=eth0BOOTPR ...
- 通过VMware Tools 将主机windows的目录共享给linux虚拟机
之前有写过 本地虚拟机挂载windows共享目录搭建开发环境 这篇,里面讲通过使用samba来实现网络共享 最近发现其实完全不用这么麻烦,VMware tools就可以帮助我们轻松的共享文件夹 这里引 ...
- 40 个顶级 jQuery 图片、内容滑块和幻灯片(转）
在这个快速发展的网络世界中,我们使用图片.内容滑块和幻灯片来给网站实现良好.有吸引力的外观.你可以吸引浏览者借助图像滑块让网站更加具有活力.使用 JavaScript 可以轻松实现轻量级的图片和内容滑 ...
- （转载）javascript函数作用域和提前声明
http://www.cnblogs.com/ArthurPatten/p/3274080.html 一些语言如C.java都有块级作用域,即花括号内的每一段代码都具有各自的作用域,而且变量在声明它们 ...
- G450 CPU 升级
T系列是正常功耗的CPU,功耗35W,发热量大些, P系列是低功耗的U,功耗25W,发热量小些. P8700的性能比T6600高15%左右,不过平常应用感觉不是很明显. p8800cpu P8600 ...
- HDU3535AreYouBusy（分组背包）
http://acm.hdu.edu.cn/showproblem.php?pid=3535 分组背包,每一组加了以下三个限制 0 stands for the sets that should ch ...
- ThinkPHP C+F方式
ThinkPHP常用C+F方法进行配置设置于缓存设置 比如常见的 C(F('smtp'),'smtp');表示获取F方法中smtp缓存,设置配置为smtp函数 C方法是ThinkPHP用于设置.获取, ...
- RecyclerView 下拉刷新上拉加载
步骤: 首先直接定义一个XRecyclerView继承RecyclerView,重写他的三个构造方法. init(Context mContext)方法用来初始化底部加载的view 回到XRecycl ...