<!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. [转]在离线环境中发布.NET Core至Windows Server 2008
			
    本文转自:http://www.cnblogs.com/durow/p/5765145.html 0x00 写在开始 之前一篇博客中写了在离线环境中使用.NET Core,之后一边学习一边写了一些页面 ...
    
			
    2. 
						
  2. DataColumn.Expression提示“...循环引用”的错误
			
    我碰到这个问题的时候,在网上找了找,找到了有好几个提出这个问题的人,但是都没有得到解答,当时很郁闷.然后再看看msdn中的解释与自己的测试,才把这个问题给解决了. 代码如下: person.Colum ...
    
			
    3. 
						
  3. 在页面rem布局中用到的js代码
			
    在你的页面加入以下代码,就初步搞定了 function fontSize() { var view_width = document.getElementsByTagName('html')[0].g ...
    
			
    4. 
						
  4. Gradle 教程：第二部分，JAVA PROJECTS【翻译】
			
    原文地址:http://rominirani.com/2014/07/28/gradle-tutorial-part-2-java-projects/ 在这部分的教学中,我们会学习如何使用Gradle ...
    
			
    5. 
						
  5. TX Text Control X10新特性之图像占位符合并
			
    文档处理控件TX Text Control即将发布的X10版本,将升级重点还是放到了其比较优势的流式布局报表设计和生成上.慧都获得了来自其开发商Text Control GmbH公司的一手资料,迫不及 ...
    
			
    6. 
						
  6. Miner3D 数据分析软件
			
    现在,越来越多的专业人士愿意选择Miner3D来帮助他们进行快速高效的智能决策,因为它是一个功能强大.专业性强.海量数据存储能力.三维可视化效果逼真的数据分析解决工具.Miner3D凭借出色的图形质量 ...
    
			
    7. 
						
  7. window系统安装jdk，jre
			
    java开发少不了安装jdk.当然如果只是想运行其他人的java项目,只需要安装jre就行了,不需要安装jdk,jdk是编译用的.jdk可以同时安装多个 版本,只需要在项目部署时注意切换版本选择.在这 ...
    
			
    8. 
						
  8. 【起航计划 002】2015 起航计划 Android APIDemo的魔鬼步伐 01
			
    本文链接:[起航计划 002]2015 起航计划 Android APIDemo的魔鬼步伐 01 参考链接:http://blog.csdn.net/column/details/mapdigitap ...
    
			
    9. 
						
  9. JavaScript 关闭浏览器窗口
			
    <input type="button" name="m" value="关闭窗口" onclick="window.clo ...
    
			
    10. 
						
  10. Js arguments.callee();函数自己调用自己
			
    1.阶乘的时候,函数一般要用到递归算法,所以函数内部一定会调用自身 //递归,阶乘 function sum(num){ ) { ; } else{ ); //自己调用自己,递归 } } alert( ...
    
			
    11.