<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        body{

            overflow: hidden;

        }

        .nav-container{

            position: absolute;

            bottom:0px;

        }

        .nav-container a{

            text-decoration: none;

        }

        .nav{

            display: table;

            position: relative;

            float:left;

            float:left;

            width: 20%;

            height: 30px;

            text-align: center;

            z-index:2;

        }

        .nav:hover a{

            background-color: gray;

        }

        .nav a{

            display: table-cell;

            vertical-align: middle;

            width:100%;

            height:100%;

            color:white;

            background-color: lightgray;

            font-size: 20px;

        }

        .nav input{

            display: inline-block;

            width: 100%;

            height: 28px;

            opacity: 0;

            position: absolute;

        }

        input:checked + em {

            position: absolute;

            left: 50%;

            margin-left: -20px;

            margin-top: -20px;

            width: 1px;

            border-left: 20px solid transparent;

            border-right: 20px solid transparent;

            border-bottom: 20px solid gray;

        }

        input:checked ~ a {

            background-color: gray;

        }

        .page-container{

            position: fixed;

            width:100%;

            top:0px;

            bottom:0px;

        }

        .show-container{

            position: absolute;

            width:100%;

            height:500%;

        }

        section{

            width:100%;

            height:20%;

        }

        img{

            width:100%;

            height:100%;

        }

    </style>

</head>

<body>

    <div class="nav-container">

        <div id="nav1" class="nav">

            <input id="r1" name="nav" type="radio" checked="checked"/>

            <em class="triangle"></em>

            <a href="javascript:;">医疗</a>

        </div>

        <div id="nav2" class="nav">

            <input id="r2" name="nav" type="radio" />

            <em class="triangle"></em>

            <a href="javascript:;">卫生</a>

        </div>

        <div id="nav3" class="nav">

            <input id="r3" name="nav" type="radio" />

            <em class="triangle"></em>

            <a href="javascript:;">食品</a>

        </div>

        <div id="nav4" class="nav">

            <input id="r4" name="nav" type="radio" />

            <em class="triangle"></em>

            <a href="javascript:;">旅游</a>

        </div>

        <div id="nav5" class="nav">

            <input id="r5" name="nav" type="radio" />

            <em class="triangle"></em>

            <a href="javascript:;">教育</a>

        </div>

        <div class="page-container">

            <div class="show-container">

                <section id="sec1" class="show-sec">

                    <img src="data:images/1.jpg" />

                </section>

                <section id="sec2" class="show-sec">

                    <img src="data:images/2.jpg" />

                </section>

                <section id="sec3" class="show-sec">

                    <img src="data:images/3.jpg" />

                </section>

                <section id="sec4" class="show-sec">

                    <img src="data:images/4.jpg" />

                </section>

                <section id="sec5" class="show-sec">

                    <img src="data:images/5.jpg" />

                </section>

            </div>

        </div>

    </div>

    <script src="jquery-2.0.3.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function(){

            $("input").on("click", function(){

                var index = parseInt(this.id[1]);

                var viewHeight = $(".page-container").height();

                var top = -(index-1)*viewHeight;

                $(".show-container").animate({top:top+"px"},800);

            });

        });

    </script>

</body>

</html>

　　

CSS jQuery 图片全屏切换的更多相关文章

  1. jquery简单的大背景banner图片全屏切换

    详细内容请点击 这个是我初毕业刚进公司那会帮同事(同时也是同学)写的一个PC端的全屏图片切换效果,对于刚毕业的我来说写出来那会的喜悦之情是无法言表的,那时的我还是什么不懂的小白白,俗称菜鸟.个人网站上 ...

  2. jQuery插件开发——全屏切换插件

    这个插件包含三个部分:HTML结构.CSS代码和JS代码. HTML结构是固定的,结构如下: <!--全屏滚动--> <div class="fullpage-contai ...

  3. jQuery 扩展 全屏切换

    (function ($) { //全屏切换方法 $.fn.toggleFullScreen = function (qp1, qp2) { var fullFlag = false; var _qp ...

  4. HTML+css实现图片全屏

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

  5. jQuery鼠标滚动垂直全屏切换代码

    体验效果:http://hovertree.com/texiao/jquery/68/ 源码下载:http://hovertree.com/h/bjaf/f643upc4.htm 代码如下: < ...

  6. jquery横向纵向鼠标滚轮全屏切换

    html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF- ...

  7. CSS之生成全屏背景图片

    在CSS中背景图片的填充方法: background-position:x,y(背景图片x,y轴的定位) background-repeat:no-repeat(不平铺) background-rep ...

  8. 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前

    思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...

  9. 基于Ascensor.js全屏切换页面插件

    今天给大家分享一款基于Ascensor.js全屏切换页面插件,这款实例 适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...

随机推荐

  1. C++ STL之vector常用指令

    只记载本人在ACM中常用的函数. vector,相当于动态数组,数组大小可变.声明vector以后,自动在内存中分配一块连续的内存空间进行数据存储. vector在内部进行插入.删除操作时间复杂度O( ...

  2. 你不知道的关于计算机大师 Dijkstra 的事情

    Dijkstra 的全名叫 Edsger Wybe Dijkstra(艾兹赫尔·韦伯·戴克斯特拉).大部分中国程序员如果能记住这个名字是因为学过计算最短路径的「Dijkstra 算法」,然而大部分人都 ...

  3. SqlServer中计算列详解

    计算列区别于需要我们手动或者程序给予赋值的列,它的值来源于该表中其它列的计算值.比如,一个表中包含有数量列Number与单价列Price,我们就可以创建计算列金额Amount来表示数量*单价的结果值, ...

  4. python爬虫__第一个爬虫程序

    前言 机缘巧合,最近在学习机器学习实战, 本来要用python来做实验和开发环境 得到一个需求,要爬取大众点评中的一些商户信息, 于是开启了我的第一个爬虫的编写,里面有好多心酸,主要是第一次. 我的文 ...

  5. 【AngularJS入门】用ng-repeat指令实现循环输出

    循环输出列表很多项目在web服务端做,前端做好模版后后端写jsp代码,双方需要紧密合作,分清责任.有些项目由后端提供restful方法,前端用ajax调用自己循环,这种一般是大把的jquery拼字符串 ...

  6. ios将一个项目完全导为另一个项目(tool)

    --前言:有时开始一个新项目,但新项目跟已做完的一个项目很类似,基本可以在原有项目上更改.这个时候,可以new一个新project,在将相应的代码文件copy到新的project,配置工程各参数,库等 ...

  7. Understand Rails Authenticity Token

    翻译整理自: http://stackoverflow.com/questions/941594/understand-rails-authenticity-token 主要翻译的是第一个回答,另外结 ...

  8. Linux/UNIX套接字连接

    套接字连接 套接字是一种通信机子.凭借这样的机制.客户/server系统的开发工作既能够在本地单机上进行.也能够夸网络进行. 套接字的创建和使用与管道是有差别的.由于套接字明白地将客户和server区 ...

  9. Windows下用C语言获取进程cpu使用率,内存使用,IO情况

      #ifndef PROCESS_STAT_H #define PROCESS_STAT_H   #ifdef __cplusplus extern “C” { #endif   typedef l ...

  10. SHELL网络爬虫实例剖析--转载

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://nolinux.blog.51cto.com/4824967/1552472 前天 ...