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= ...

随机推荐

httpd 的坑
Httpd服务器的坑在/etc/httpd/conf/httpd.conf中的配置信息, 有时注释到的内容仍然会生效配置Auth时, 允许htpasswd规定的文件中的所有的用户, Require ...
[HZOI 2015]复仇的序幕曲
[题目描述] 你还梦不梦痛不痛,回忆这么重你怎么背得动 ----序言当年的战火硝烟已经渐渐远去,可仇恨却在阿凯蒂王子的心中越来越深他的叔父三年前谋权篡位,逼宫杀死了他的父王,用铁血手腕平定了国内所 ...
为什么地址栏的快捷键是Alt D
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:为什么地址栏的快捷键是Alt D.
executenonquery只对insert,delete,update有效,查询select会默认返回-1
问题:cmd.ExecuteNonQuery() 方法总是返回-1 原因:ExecuteNonQuery() 方法 select 返回-1 解释:执行Select子句,数据库并无变化,自然返回-1同样 ...
MySQL(五)
一.视图视图是一个虚拟表(非真实存在),其本质是根据SQL语句获取动态的数据集,并为其命名,用户使用时只需使用名称即可获取结果集,可以将该结果集当做表来使用. 使用视图我们可以把查询过程中的临时表摘 ...
html 01前沿-web介绍
1. 认识网页网页主要由文字.图像和超链接等元素构成.当然,除了这些元素,网页中还可以包含音频.视频以及Flash等. 2. 浏览器(显示代码) 浏览器是网页显示.运行的平台,常用的浏览器有IE.火 ...
Cocos2d-x v3.1项目创建（三）
Cocos2d-x v3.1项目创建(三) Cocos2d-x官方为我们提供了用于创建.编译.运行和部署的一套命令行的工具集,也就是上篇文章中我们所提到的Cocos2d-Console,它位于我们的引 ...
22 Swap Nodes in Pairs
Given a linked list, swap every two adjacent nodes and return its head. For example,Given 1->2-&g ...
Second last week for the second last semester!
This week, I focused more on the final project, such as H335(Computer structure, still confused with ...
Xcode 自定义控件创建及触发事件
#pragma mark 控制器的view加载完毕的时候调用 //一般在这里进行界面的初始化 - (void)viewDidLoad { [super viewDidLoad]; NSLog(@&qu ...

jquery横向手风琴效果

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

随机推荐

热门专题