<!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横向手风琴效果的更多相关文章
	

    
						
  1. 基于jquery横向手风琴效果
		
    基于jquery横向手风琴效果是一款基于jquery实现的左右滑动手风琴图片轮播切换特效.效果图如下: 在线预览   源码下载 效果图如下: <div class="flash&quo ...
    
		
    2. 
								
  2. jquery横向手风琴效果2
		
    <!doctype html> <html> <head> <meta charset="utf-8"> <script ty ...
    
		
    3. 
						
  3. jQuery横向手风琴图片滑块
		
    jQuery横向手风琴图片滑块是一款非常不错的jQuery特效横向手风琴图片滑块插件,可以自动播放,也可以鼠标滑过时切换.+ 欢迎喜欢的朋友下载研究 源码下载页:http://www.huiyi8.c ...
    
		
    4. 
						
  4. jquery 图片手风琴效果
		
    这篇主要是手风琴效果和无缝切换相结合,在Demo里的Demo3.html.Demo4.html. 手风琴原理比较简单,当鼠标经过的时候改变图片的路径,鼠标移到另一张图片时还原路径. 虽然原理简单,但是 ...
    
		
    5. 
						
  5. jquery实现手风琴效果
		
    html----accordion.html <!DOCTYPE html> <html lang="en"> <head> <meta  ...
    
		
    6. 
						
  6. jQuery做出手风琴效果
		
    今天学到JQuery中的遍历-siblings,便手痒做了个手风琴的动态效果,有一点收获,分享给大家.mouseout的时候一定要记得opacity必须设置,不然li的opacity会保持mousem ...
    
		
    7. 
						
  7. jQuery横向手风琴
		
    在线演示 本地下载
    
		
    8. 
						
  8. jquery版手风琴效果
		
    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
    
		
    9. 
						
  9. jQuery实现手机竖直手风琴效果
		
    效果:http://hovertree.com/texiao/jquery/65/ 效果图: 手机扫描二维码查看效果: 代码: <!doctype html> <html lang= ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. redis 读写锁实现
			
    一 先搞清楚读写锁要做什么. 基本就是 读读不互斥,读写互斥,写写互斥.可重入. 关于redis读写锁,我写了一次之后,总觉得很怪,然后就上网看到大神的redisson了,果断借鉴一番. 二 读行为  ...
    
			
    2. 
						
  2. 拼json对象批量向后台添加数据
			
    网站中如果遇到批量提交格式相同数据,可以使用json来传输 $("#catalogSave").click(function(){ var array=[]; $("[n ...
    
			
    3. 
						
  3. [转]Linq语法二
			
    本文将讲述LINQ的基础查询(此文所有例子都使用LINQ to Object) 在此之前,我们先创建一个用于示例的数据源: Student类:表示学生,包括学号.姓名及班级 Courses类:表示学生 ...
    
			
    4. 
						
  4. [JAVA][Liferay] Duplicate key value violates unique constraint for resourcepermissionid in Liferay
			
    Unexpected exception thrown when create new site: 09:47:10,114 ERROR [ajp-bio-8009-exec-113][JDBCExc ...
    
			
    5. 
						
  5. 2019.3.26判断是否回文（java实现）
			
    我所有的文章都是对我总结学习的总结,那里不好或者冒犯了那里,我先对您说声对不起,请告知我进行改正. 今天java老师作业题目是判断是一个字符串否是回文: emmmm,我的思路是将字符串逆序,然后使用方 ...
    
			
    6. 
						
  6. JavaSE之Java基础（2）
			
    6.java8新特性 Lambda表达式 接口的默认方法与静态方法 方法引用 重复注解 扩展注解的支持 Optional类 Stream API Date Time API JavaScript引擎N ...
    
			
    7. 
						
  7. Spring InitializingBean init-method @PostConstruct  执行顺序
			
    Spring 容器中的 Bean 是有生命周期的,Spring 允许在 Bean 在初始化完成后以及 Bean 销毁前执行特定的操作,常用的设定方式有以下三种:   通过实现 Initializing ...
    
			
    8. 
						
  8. Windows环境下sublime text 3搭建前端开发环境
			
    一.安装SubLime Text 3 SubLime Text 3官网下载:https://www.sublimetext.com/ 二.安装Package Control 进入sublime后,按快 ...
    
			
    9. 
						
  9. Dictionary and KeyValuePair.
			
    简单一句话: Dictionary 是 由 KeyValuePair结构 组成的集合 The Dictionary<TKey, TValue>.Enumerator.Current pro ...
    
			
    10. 
						
  10. tomcat的相关使用
			
    tomcat服务器是apache下非常优秀的一款web服务器,当今的互联网企业中90%左右的中小型企业使用的都是tomcat.tomcat在部署项目时有很多很多的解决方案,这些你都清楚吗? 1.同一个 ...
    
			
    11.