jquery横向手风琴效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery横向手风琴效果</title>
<style>
.solution-item{
position: relative;
width:1000px;
height:420px;
margin:50px auto;
overflow: hidden;
zoom:1;
}
.solution-item ul{
height:400px;
}
.solution-item li{
position: relative;
overflow: hidden;
zoom:1;
float:left;
width:60px;
margin-right: 5px;
height:400px;
}
.solution-item .num{
cursor:pointer;
position: absolute;
left:0;
top:0;
width:60px;
height:400px;
word-wrap: break-word;
text-align: center;
color:#8a8a8a;
background-color:#e5e5e5;
}
.num h1{
font-size: 20px;
font-weight: 400;
width:20px;
line-height: 1.1;
margin:80px auto 0;
letter-spacing: 0;
}
.num h1 span{
font-size: 24px;
} .solution-item .current {
background: #c20000;
}
.current h1{
color:#fff;
}
.description{
position: absolute;
left:60px;
top:0;
width:315px;
height:400px;
color:#000;
background: #eeeeee;
}
.description h2{
margin:40px 0 40px 10px;
font-size: 24px;
font-weight: 400;
}
.description p{
margin:0 10px;
font-size: 14px;
line-height: 1.7;
}
.description{
display: block;
}
</style>
</head>
<body>
<div class="solution-item">
<ul>
<li class="first">
<div class="num current"><h1>平台解决方案</h1></div>
<div class="description description-current">
<h2>RISS2平台解决方案</h2>
<p>
本方案将采用集成RISS2平台和定制新功能
相结合的方式，实现特色数据库的建设。项目初
步考虑分为：资源检索与个人中心、资源建设与
管理系统等子系统。两个系统以资源展示的形式
提供给最终用户。
</p>
</div>
</li>
<li class="second">
<div class="num"><h1>读者行为分析服务平台</h1></div>
<div class="description">
<h2>读者行为分析服务平台</h2>
<p>
本方案将采用集成RISS2平台和定制新功能
相结合的方式，实现特色数据库的建设。项目初
步考虑分为：资源检索与个人中心、资源建设与
管理系统等子系统。两个系统以资源展示的形式
提供给最终用户。
</p>
</div>
</li>
<li class="third">
<div class="num"><h1>论文管理系统解决方案</h1></div>
<div class="description">
<h2>论文管理系统解决方案</h2>
<p>
本方案将采用集成RISS2平台和定制新功能
相结合的方式，实现特色数据库的建设。项目初
步考虑分为：资源检索与个人中心、资源建设与
管理系统等子系统。两个系统以资源展示的形式
提供给最终用户。
</p>
</div>
</li>
<li class="fourth">
<div class="num"><h1>采集系统解决方案</h1></div>
<div class="description">
<h2>采集系统解决方案</h2>
<p>
本方案将采用集成RISS2平台和定制新功能
相结合的方式，实现特色数据库的建设。项目初
步考虑分为：资源检索与个人中心、资源建设与
管理系统等子系统。两个系统以资源展示的形式
提供给最终用户。
</p>
</div>
</li>
<li class="fifth">
<div class="num"><h1>机构知识库解决方案</h1></div>
<div class="description">
<h2>机构知识库解决方案</h2>
<p>
本方案将采用集成RISS2平台和定制新功能
相结合的方式，实现特色数据库的建设。项目初
步考虑分为：资源检索与个人中心、资源建设与
管理系统等子系统。两个系统以资源展示的形式
提供给最终用户。
</p>
</div>
</li>
<li class="six">
<div class="num"><h1>学科服务系统解决方案</h1></div>
<div class="description">
<h2>学科服务系统解决方案</h2>
<p>
本方案将采用集成RISS2平台和定制新功能
相结合的方式，实现特色数据库的建设。项目初
步考虑分为：资源检索与个人中心、资源建设与
管理系统等子系统。两个系统以资源展示的形式
提供给最终用户。
</p>
</div>
</li>
<li class="seven">
<div class="num"><h1>远程访问系统解决方案</h1></div>
<div class="description">
<h2>远程访问系统解决方案</h2>
<p>
本方案将采用集成RISS2平台和定制新功能
相结合的方式，实现特色数据库的建设。项目初
步考虑分为：资源检索与个人中心、资源建设与
管理系统等子系统。两个系统以资源展示的形式
提供给最终用户。
</p>
</div>
</li>
</ul>
</div>
<script src="scripts/jquery.js"></script>
<script>
$(".solution-item li").eq(0).css('width','375px');
$(".num").mouseenter(function(){//如果要点击效果,把mouseenter改成click
$(".solution-item li").stop(true,true);
$(this).css({"background-color":"#c20000"}).find("h1").css({"color":"#fff"}).find('img').attr('src','./images/RISS2.png');
$(this).parent().siblings().find(".num").css({"background-color":"#e5e5e5"}).find("h1").css("color","#8a8a8a").find('img').attr('src','./images/RISS2-1.png');
$(this).parent().animate({width:"375px"},500).siblings('li').animate({width:'60px'},500);
});
</script>
</body>
</html>
jquery横向手风琴效果的更多相关文章
- 基于jquery横向手风琴效果
基于jquery横向手风琴效果是一款基于jquery实现的左右滑动手风琴图片轮播切换特效.效果图如下: 在线预览 源码下载 效果图如下: <div class="flash&quo ...
- jquery横向手风琴效果2
<!doctype html> <html> <head> <meta charset="utf-8"> <script ty ...
- jQuery横向手风琴图片滑块
jQuery横向手风琴图片滑块是一款非常不错的jQuery特效横向手风琴图片滑块插件,可以自动播放,也可以鼠标滑过时切换.+ 欢迎喜欢的朋友下载研究 源码下载页:http://www.huiyi8.c ...
- jquery 图片手风琴效果
这篇主要是手风琴效果和无缝切换相结合,在Demo里的Demo3.html.Demo4.html. 手风琴原理比较简单,当鼠标经过的时候改变图片的路径,鼠标移到另一张图片时还原路径. 虽然原理简单,但是 ...
- jquery实现手风琴效果
html----accordion.html <!DOCTYPE html> <html lang="en"> <head> <meta ...
- jQuery做出手风琴效果
今天学到JQuery中的遍历-siblings,便手痒做了个手风琴的动态效果,有一点收获,分享给大家.mouseout的时候一定要记得opacity必须设置,不然li的opacity会保持mousem ...
- jQuery横向手风琴
在线演示 本地下载
- jquery版手风琴效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- jQuery实现手机竖直手风琴效果
效果:http://hovertree.com/texiao/jquery/65/ 效果图: 手机扫描二维码查看效果: 代码: <!doctype html> <html lang= ...
随机推荐
- HDU 5352——MZL's City——————【二分图多重匹配、拆点||网络流||费用流】
MZL's City Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total ...
- 关于微信小程序登录授权
小程序的API接口文档写的很清晰,现在理一遍思路. 前端通过wx.login()获取code ,把code发给后台,后台返回openid,再获取用户的授权信息(这里先判断是否授权,授权过的就直接进入小 ...
- C# 获取格式
1. 身份证日期 DateTime.ParseExact((IDCard.Substring(6, 8)), "yyyyMMdd", System.Globalization.Cu ...
- css 两大特性:继承性和层叠性
css 有两大特性: 继承性和层叠性, 继承性 面向对象语言都会存在继承的概念,在面向对象的语言中,继承的特点:继承了父类的属性和方法.那么我们现在主要研究css,css中没有方法,所以我们仅仅继承属 ...
- sass-基础
导入: sass的导入(@import)规则和CSS的有所不同,编译时会将@import的scss文件合并进来只生成一个CSS文件. 但是如果你在sass文件中导入css文件如@import 'res ...
- Azure 媒体服务换新锁，更安全更方便，新钥匙请收好！
不知道有多少人已经把家里的门锁换成了数字化的指纹锁?沿用了几百上千年的传统门锁,在技术的帮助下无疑变得更方便,不用带钥匙,还能远程控制和操作,最重要的是,终于不用担心「衣果(luǒ)着」出门扔垃圾,风 ...
- Linux命令之查看日志等实时文件命令（less 、tail）使用
一.less的使用 1)less 文件名,即可快速打开文件 2)相关查看搜索 3)利用键盘向上向下箭头键盘上的向上和向下箭头,点击一次向下简单,文件内容往下读取一行:点击一次向上箭头,文件内容,往上 ...
- 关于java@Override错误
重写的接口的方法,编译的时候一直报@override is not override a method from superclass,查了一下资料,这个@override报错是因为版本的原因. 在J ...
- April 15 2017 Week 15 Saturday
Attitude is a little thing that makes a big difference. 小态度,大不同. Attitudes can make a big difference ...
- Makedown语法说明
Markdown 语法说明 (简体中文版) / (点击查看快速入门) 概述 宗旨 兼容 HTML 特殊字符自动转换 区块元素 段落和换行 标题 区块引用 列表 代码区块 分隔线 区段元素 链接 强调 ...