1.  
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>jquery横向手风琴效果</title>
  6.     <style>
  7.         .solution-item{
  8.             position: relative;
  9.             width:1000px;
  10.             height:420px;
  11.             margin:50px auto;
  12.             overflow: hidden;
  13.             zoom:1;
  14.         }
  15.         .solution-item ul{
  16.             height:400px;
  17.         }
  18.         .solution-item li{
  19.             position: relative;
  20.             overflow: hidden;
  21.             zoom:1;
  22.             float:left;
  23.             width:60px;
  24.             margin-right: 5px;
  25.             height:400px;
  26.         }
  27.         .solution-item .num{
  28.             cursor:pointer;
  29.             position: absolute;
  30.             left:0;
  31.             top:0;
  32.             width:60px;
  33.             height:400px;
  34.             word-wrap: break-word;
  35.             text-align: center;
  36.             color:#8a8a8a;
  37.             background-color:#e5e5e5;
  38.         }
  39.         .num h1{
  40.             font-size: 20px;
  41.             font-weight: 400;
  42.             width:20px;
  43.             line-height: 1.1;
  44.             margin:80px auto 0;
  45.             letter-spacing: 0;
  46.         }
  47.         .num h1 span{
  48.             font-size: 24px;
  49.         }
  50.  
  51.         .solution-item .current {
  52.             background: #c20000;
  53.         }
  54.         .current h1{
  55.             color:#fff;
  56.         }
  57.         .description{
  58.             position: absolute;
  59.             left:60px;
  60.             top:0;
  61.             width:315px;
  62.             height:400px;
  63.             color:#000;
  64.             background: #eeeeee;
  65.         }
  66.         .description h2{
  67.             margin:40px 0 40px 10px;
  68.             font-size: 24px;
  69.             font-weight: 400;
  70.         }
  71.         .description p{
  72.             margin:0 10px;
  73.             font-size: 14px;
  74.             line-height: 1.7;
  75.         }
  76.         .description{
  77.             display: block;
  78.         }
  79.     </style>
  80. </head>
  81. <body>
  82. <div class="solution-item">
  83.     <ul>
  84.         <li class="first">
  85.             <div class="num current"><h1>平台解决方案</h1></div>
  86.             <div class="description description-current">
  87.                 <h2>RISS2平台解决方案</h2>
  88.                 <p>
  89.                     本方案将采用集成RISS2平台和定制新功能
  90.                     相结合的方式，实现特色数据库的建设。项目初
  91.                     步考虑分为：资源检索与个人中心、资源建设与
  92.                     管理系统等子系统。两个系统以资源展示的形式
  93.                     提供给最终用户。
  94.                 </p>
  95.             </div>
  96.         </li>
  97.         <li class="second">
  98.             <div class="num"><h1>读者行为分析服务平台</h1></div>
  99.             <div class="description">
  100.                 <h2>读者行为分析服务平台</h2>
  101.                 <p>
  102.                     本方案将采用集成RISS2平台和定制新功能
  103.                     相结合的方式，实现特色数据库的建设。项目初
  104.                     步考虑分为：资源检索与个人中心、资源建设与
  105.                     管理系统等子系统。两个系统以资源展示的形式
  106.                     提供给最终用户。
  107.                 </p>
  108.             </div>
  109.         </li>
  110.         <li class="third">
  111.             <div class="num"><h1>论文管理系统解决方案</h1></div>
  112.             <div class="description">
  113.                 <h2>论文管理系统解决方案</h2>
  114.                 <p>
  115.                     本方案将采用集成RISS2平台和定制新功能
  116.                     相结合的方式，实现特色数据库的建设。项目初
  117.                     步考虑分为：资源检索与个人中心、资源建设与
  118.                     管理系统等子系统。两个系统以资源展示的形式
  119.                     提供给最终用户。
  120.                 </p>
  121.             </div>
  122.         </li>
  123.         <li class="fourth">
  124.             <div class="num"><h1>采集系统解决方案</h1></div>
  125.             <div class="description">
  126.                 <h2>采集系统解决方案</h2>
  127.                 <p>
  128.                     本方案将采用集成RISS2平台和定制新功能
  129.                     相结合的方式，实现特色数据库的建设。项目初
  130.                     步考虑分为：资源检索与个人中心、资源建设与
  131.                     管理系统等子系统。两个系统以资源展示的形式
  132.                     提供给最终用户。
  133.                 </p>
  134.             </div>
  135.         </li>
  136.         <li class="fifth">
  137.             <div class="num"><h1>机构知识库解决方案</h1></div>
  138.             <div class="description">
  139.                 <h2>机构知识库解决方案</h2>
  140.                 <p>
  141.                     本方案将采用集成RISS2平台和定制新功能
  142.                     相结合的方式，实现特色数据库的建设。项目初
  143.                     步考虑分为：资源检索与个人中心、资源建设与
  144.                     管理系统等子系统。两个系统以资源展示的形式
  145.                     提供给最终用户。
  146.                 </p>
  147.             </div>
  148.         </li>
  149.         <li class="six">
  150.             <div class="num"><h1>学科服务系统解决方案</h1></div>
  151.             <div class="description">
  152.                 <h2>学科服务系统解决方案</h2>
  153.                 <p>
  154.                     本方案将采用集成RISS2平台和定制新功能
  155.                     相结合的方式，实现特色数据库的建设。项目初
  156.                     步考虑分为：资源检索与个人中心、资源建设与
  157.                     管理系统等子系统。两个系统以资源展示的形式
  158.                     提供给最终用户。
  159.                 </p>
  160.             </div>
  161.         </li>
  162.         <li class="seven">
  163.             <div class="num"><h1>远程访问系统解决方案</h1></div>
  164.             <div class="description">
  165.                 <h2>远程访问系统解决方案</h2>
  166.                 <p>
  167.                     本方案将采用集成RISS2平台和定制新功能
  168.                     相结合的方式，实现特色数据库的建设。项目初
  169.                     步考虑分为：资源检索与个人中心、资源建设与
  170.                     管理系统等子系统。两个系统以资源展示的形式
  171.                     提供给最终用户。
  172.                 </p>
  173.             </div>
  174.         </li>
  175.     </ul>
  176. </div>
  177. <script src="scripts/jquery.js"></script>
  178. <script>
  179.     $(".solution-item li").eq(0).css('width','375px');
  180.     $(".num").mouseenter(function(){//如果要点击效果,把mouseenter改成click
  181.         $(".solution-item li").stop(true,true);
  182.         $(this).css({"background-color":"#c20000"}).find("h1").css({"color":"#fff"}).find('img').attr('src','./images/RISS2.png');
  183.         $(this).parent().siblings().find(".num").css({"background-color":"#e5e5e5"}).find("h1").css("color","#8a8a8a").find('img').attr('src','./images/RISS2-1.png');
  184.         $(this).parent().animate({width:"375px"},500).siblings('li').animate({width:'60px'},500);
  185.     });
  186. </script>
  187. </body>
  188. </html>

jquery横向手风琴效果的更多相关文章

  1. 基于jquery横向手风琴效果

    基于jquery横向手风琴效果是一款基于jquery实现的左右滑动手风琴图片轮播切换特效.效果图如下: 在线预览   源码下载 效果图如下: <div class="flash&quo ...

  2. jquery横向手风琴效果2

    <!doctype html> <html> <head> <meta charset="utf-8"> <script ty ...

  3. jQuery横向手风琴图片滑块

    jQuery横向手风琴图片滑块是一款非常不错的jQuery特效横向手风琴图片滑块插件,可以自动播放,也可以鼠标滑过时切换.+ 欢迎喜欢的朋友下载研究 源码下载页:http://www.huiyi8.c ...

  4. jquery 图片手风琴效果

    这篇主要是手风琴效果和无缝切换相结合,在Demo里的Demo3.html.Demo4.html. 手风琴原理比较简单,当鼠标经过的时候改变图片的路径,鼠标移到另一张图片时还原路径. 虽然原理简单,但是 ...

  5. jquery实现手风琴效果

    html----accordion.html <!DOCTYPE html> <html lang="en"> <head> <meta ...

  6. jQuery做出手风琴效果

    今天学到JQuery中的遍历-siblings,便手痒做了个手风琴的动态效果,有一点收获,分享给大家.mouseout的时候一定要记得opacity必须设置,不然li的opacity会保持mousem ...

  7. jQuery横向手风琴

    在线演示 本地下载

  8. jquery版手风琴效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. jQuery实现手机竖直手风琴效果

    效果:http://hovertree.com/texiao/jquery/65/ 效果图: 手机扫描二维码查看效果: 代码: <!doctype html> <html lang= ...

随机推荐

  1. HDU 2819 ——Swap——————【最大匹配、利用linker数组、邻接表方式】

     Swap Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Status ...

  2. Spring课程 Spring入门篇 3-4 Spring bean装配（上）之自动装配

    课程链接: 1 自动装配的方式 2 自动装配实现 1 自动装配的方式 根据反射的机制 1.1 byName根据属性名自动装配,类似于依赖注入的set注入.(如果找不到set属性中的bean,如果tes ...

  3. Redis的原子自增性

    INCR key 将 key 中储存的数字值增一. 如果 key 不存在,那么 key 的值会先被初始化为 0 ,然后再执行 INCR 操作. 如果值包含错误的类型,或字符串类型的值不能表示为数字,那 ...

  4. 详解HTML中的表单元素

    代码详讲: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  5. Sharepoint 2013企业内容管理学习笔记终章

    说完了半自动化内容管理&全自动化内容管理,下面我们来说另外一个企业内容管理的东东吧 企业内容记录化 这个企业内容记录化,其实是我起的名字了,在sharepoint里面它叫做声明记录 这个声明记 ...

  6. android错误整理

    1.Caused by: java.lang.IllegalStateException: Only fullscreen opaque activities can request orientat ...

  7. ssh配置解释

    http://vbird.dic.ksu.edu.tw/linux_server/0310telnetssh_2.php /etc/ssh/sshd_config Port 29922 #Addres ...

  8. Office加载项安装

    出自我的个人主页 Alvin Blog 前言 Excel加载项离不开安装,Excel加载项本身安装及其简单,但这是在申请下来Office开发者账户之后,再次之前都得自行安装 线上安装 微软申请开发者账 ...

  9. 洛谷 P3905 道路重建

    题目描述 从前,在一个王国中,在n个城市间有m条道路连接,而且任意两个城市之间至多有一条道路直接相连.在经过一次严重的战争之后,有d条道路被破坏了.国王想要修复国家的道路系统,现在有两个重要城市A和B ...

  10. reactjs--父组件调用子组件的内部方法（转载）

    reactjs--父组件调用子组件的内部方法 发表于2016/10/11 9:21:37  965人阅读 1.引入相关js <script src="js/react.js" ...