<!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. 【第一篇笔记】C# 全局容错,全局异常
			
    网上找到两个方式,一个简单的只是做个记录,另一个能像QQ一样提交到后台. 方法一: static class Program { /// <summary> /// 应用程序的主入口点.  ...
    
			
    2. 
						
  2. hibernate课程 初探单表映射4-1 课程总结
			
    ORM是一种面向对象编程的方法,用这种方法来避免写数据库底层语言sql语句,这样有利于java的跨平台,扩展.维护.而hirenate是ORM的一种框架 hirbernate开发基本步骤编写配置文档h ...
    
			
    3. 
						
  3. BZOJ4503: 两个串(bitset字符串匹配)
			
    题意 题目链接 Sol Orz xudyh F个毛T啊..直接bitset一波就赢了啊...(虽然复杂度很假) 就是记录匹配串中每个元素出现的位置,将第\(i\)个位置的bitset右移\(i\)位后 ...
    
			
    4. 
						
  4. （一）Hybrid app混合开发模式
			
    hybrid app是什么? 这里我们先看一下词条上的定义 Hybrid App:Hybrid App is a mobile application that is coded in both br ...
    
			
    5. 
						
  5. CRM的划分
			
          CRM提供完整的客户生命周期管理解决方案,帮助您管理各项与客户有关的事件,包括市场.销售以及客户支持等方面,优化事件处理流程,从而赢得更多客户,并提高客户满意度.   按企业经营类型划分  ...
    
			
    6. 
						
  6. u-boot分析（九）----nand flash初始化|nand flash读写分析
			
    u-boot分析(九) 上篇博文我们按照210的启动流程,分析到了初始化串口,由于接下来的取消存储保护不是很重要,所以我们今天按照u-boot的启动流程对nand flash初始化进行分析. 今天我们 ...
    
			
    7. 
						
  7. zabbix 编译安装指导
			
    zabbix 编译安装 下载 安装 安装后的配置 下载源码包 zabbix官网:https://www.zabbix.com/ zabbix下载:https://www.zabbix.com/down ...
    
			
    8. 
						
  8. java最大最小堆
			
    堆是一种经过排序的完全二叉树,其中任一非终端节点的数据值均不大于(或不小于)其左孩子和右孩子节点的值. 最大堆和最小堆是二叉堆的两种形式. 最大堆:根结点的键值是所有堆结点键值中最大者. 最小堆:根结 ...
    
			
    9. 
						
  9. Simotion应用案例，使用Simotion web server调试，使用Project Generator创建项目，Simosim模拟运行运行项目
			
    Simotion web server simotion项目设计和调试过程中,web server功能越来越常用.例如Project generator生成的FBAxis, winder, print ...
    
			
    10. 
						
  10. ELF格式文件符号表全解析及readelf命令使用方法
			
    http://blog.csdn.net/edonlii/article/details/8779075 1. 读取ELF文件头: $ readelf -h signELF Header:  Magi ...
    
			
    11.