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= ...
随机推荐
- fetch技术
Snandy If you cannot hear the sound of the genuine in you, you will all of your life spend your days ...
- 排序 & 常用算法
一.快速排序QuickSort 快速排序和归并排序都使用分治法来设计算法,区别在于归并排序把数组分为两个基本等长的子数组,分别排好序之后还要进行归并(Merge)操作,而快速排序拆分子数组的时候显得更 ...
- HttpClient4.x工具获取如何使用
HttpClient4.x工具可以让我们输入url,就可以请求某个页面(个人感觉挺实用的,特别是封装在代码中) 首先我们需要在maven工程中添加依赖 <dependency> ...
- poj 3107 删点最大分支最小
http://poj.org/problem?id=3107 这实际上就是找重心,在之前有做过:http://www.cnblogs.com/qlky/p/5780933.html #include ...
- #CSS的盒子模型、元素类型
CSS的盒子模型.元素类型 本文首先介绍了CSS元素的统一内部结构模型,盒子模型:然后介绍了CSS元素基于不同分类标准定义的元素类型,包括基于不同内容设置方式定义的replaced元素和non-r ...
- FragmentPagerAdapter 与 FragmentStatePagerAdapter的区别。通过验证证明的。
在一个 Android 应用中,我使用 FragmentPagerAdapter 来处理多 Fragment 页面的横向滑动.不过我碰到了一个问题,即当 Fragment 对应的数据集发生改变时,我希 ...
- Cookie和Session 简单介绍
cookie : 1.cookie是存在客户端(浏览器)的进程内存中和客户端所在的机器硬盘上 2.cookie只能能够存储少量文本,大概4K大小 3.cookie是不能在不同浏 ...
- eclipse中安装thymeleaf插件完成thymeleaf模板中自动代码提示功能
插件地址:https://github.com/thymeleaf/thymeleaf-extras-eclipse-plugin 页面有介绍如何使用:
- JS兼用IE8的通过class名获取CSS对象组
转自:Garon_InE 原生js方法“document.getElementsByClassName”在ie8及其以下浏览器中不能使用,所以写了一个兼容IE的方法. 完整的页面代码如下: testJ ...
- ARM实验6——ADC实验
实验内容: 编写ADC程序,通过FS4412开发板上的电位器,改变ADC通道输入的电压值,经过ADC转换的值打印到终端. 实验目的: 熟悉开发环境: 掌握猎户座4412处理器ADC模块的使用和编程. ...