用到了两个js库，请自行下载，用到的背景图片可任意图片都可以，主要是看效果

<!DOCTYPE html>

<html>

<head>

    <script src="js/jquery-1.11.3.min.js"></script><script src="js/jquery.easing.1.3.js"></script>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        body {

            margin: 0 auto;

        }

        #header {

            height: 100px;

            background: #ccc;

        }

        #footer {

            background: #ccc;

            height: 100px;

        }

        #container {

            background: url(body_bg.gif);

            min-height: 400px;

            /*max-height:600px;*/

            position: relative;

        }

        .page {

            position: absolute;

            width: 100%;

            height: 100%;

        }

        .page1 {

            background: url(h.jpg);

        }

        .page2 {

            background: url(a.jpg);

        }

        .page3 {

            background: url(b.jpg);

        }

        .page4 {

            background: url(c.jpg);

        }

    </style>

    <script>

        $(function () {

            var width = $(window).width();

            $('.page').css('left',width+"px");

            $("#container").height($(window).height() - 200);

            $(window).resize(function () {

                $('.page').css('left', width + "px");

                width = $(window).width();

                $("#container").height($(window).height() - 200);

            });

            $("button").each(function (i) {

                i = i + 1

                $("#btn" + i).click(function () {

                    $(".page").stop(false, true).not('.page' + i).animate({ left: -2*width }, 1000, function () {

                        $(".page").not('.page'+i).css("left", width);

                    });

                    $(".page" + i).animate({

                        'left': [0, 'easeOutBack']

                    }, 1000)

                });

            });

        });

    </script>

</head>

<body>

    <div id="header">

        我是头部

        <p>

            <button id="btn1">页面1</button>

            <button id="btn2">页面2</button>

            <button id="btn3">页面3</button>

            <button id="btn4">页面4</button>

        </p>

    </div>

    <div id="container">

        <div class="page page1">

            1111111111111111111111111111111111

        </div>

        <div class="page page2">

            2222222222222222222222222222222222222

        </div>

        <div class="page page3">

            33333333333333333333333333333333333333

        </div>

        <div class="page page4">

            4444444444444444444444444444

        </div>

    </div>

    <div id="footer">

        <p>

            版本信息：：：：：

        </p>

    </div>

</body>

</html>

窗口中各模块的切换效果，使用jquery实现的更多相关文章

  1. delphi主i窗口中实现多页面管理效果

    MainForm上加Panel,把Panel的DockSite设为True, 把窗口FB_orderManage的DragKind设为dkDock,  DragMode设为dmAuromatic 在M ...

  2. Android实现程序前后台切换效果

    本文演示如何在Android中实现程序前后台切换效果. 在介绍程序实现之前,我们先看下Android中Activities和Task的基础知识. 我们都知道,一个Activity 可以启动另一个Act ...

  3. Windows系统下如何在cmd命令窗口中切换Python2.7和Python3.6

    针对在同一系统下我们可能安装多个版本的Python,毕竟Python2.7与Python3.6还是有不同的需求,但是在用Cmd命令窗口是我们可能默认的系统变量环境是其中一个版本,当我们需要在cmd命令 ...

  4. Android中使用ViewPager实现屏幕页面切换和页面切换效果

    之前关于如何实现屏幕页面切换,写过一篇博文<Android中使用ViewFlipper实现屏幕切换>,相比ViewFlipper,ViewPager更适用复杂的视图切换,而且Viewpag ...

  5. 看懂理解 keyboard中 , navigation的设置: 切换工作区和移动窗口到不同的工作区.

    navigation中, 主要有两个方面的内容: 移动窗口到工作区 的shortcuts 切换工作区的shortcuts 首先清楚: 工作区workspace, fedora 23中 好像只有上下方向 ...

  6. tab切换效果 网站中的图片自动切换

    网站中的图片自动切换 今天上一套tab切换效果的代码 动图就自己实现吧! 下面贴HTML代码,大体分两部分,图片div和按钮div,代码很容易看懂~ <!DOCTYPE html> < ...

  7. Python之uiautomation模块-获取CMD窗口中所打印的文字信息

    当我们想以自动化的方式操作软件,以提高办公或测试效率时,有许多成熟的工具,比如针对Web端应用的Selenium.针对移动端应用的Appium.那么,PC端(Windows)桌面应用,又改如何处理呢? ...

  8. Axure RP Pro 7.0苏宁易购式标签切换效果教程

    转:http://jingyan.baidu.com/article/7082dc1c4f0a11e40a89bdac.html 页面标签切换效果,几乎是所有大网站(尤其是电商类网站)标配的交互方式: ...

  9. javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件（一）

    类似于幻灯片的切换效果,有时需要在网页中完成一些图片的自动切换效果,比如广告,宣传,产品介绍之类的,那么单纯的切就没意思了,需要在切换的时候通过一些效果使得切换生动些. 比较常用之一的就是窗帘切换了. ...

随机推荐

  1. ajax的相关知识总结

    一.ajax的工作原理 a.创建XMLHttpRequeat对象 var xmlhttp; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, ...

  2. C# WebBrowser的DrawToBitmap方法 截取网页保存为图片

    bool mark = true;         private void btnOpen_Click(object sender, EventArgs e)         {           ...

  3. GitLab 自动触发 Jenkins 构建

    GitLab 是当前应用非常广泛的 Git Hosting 工具,Jenkins 是非常牛逼的持续集成工具.尽管 GitLab 有内建的 GitLab CI,但它远没有 Jenkins 那么强大好用. ...

  4. apache Subversion 直接支持LDAP域群组

    如果你的Subversion已经用apache的ldap支持用户认证功能,你是否常常在想,既然都用ldap支持认证,为什么不直接支持域群组, 反而在authz文件里面一个一个的手工定义,或者有人用脚本 ...

  5. 01-JVM内存模型：程序计数器

    一.JVM模型概述 java虚拟机(JVM)在java程序运行的过程中,会将它所管理的内存划分为若干个不同的数据区域,这些区域有的随着JVM的启动而创建,有的随着用户线程的启动和结束而建立和销毁.一个 ...

  6. 2019年猪年海报PSD模板-第三部分

    14套精美猪年海报,免费猪年海报,下载地址:百度网盘,https://pan.baidu.com/s/15m6sWTdDzuBfdmHYxJVvbA              

  7. MVC数据的注册及验证简单总结

    一.注解 注解是一种通用机制,可以用来向框架注入元数据,同时,框架不只驱动元数据的验证,还可以在生成显示和编辑模型的HTML标记时使用元数据. 二.验证注册的使用 1.Require:属性为Null或 ...

  8. LeetCode 141——环形链表

    1. 题目 2. 解答 2.1 方法 1 定义快慢两个指针,慢指针每次前进一步,快指针每次前进两步,若链表有环,则快慢指针一定会相遇. /** * Definition for singly-link ...

  9. redis 编译安装错误问题

    编译redis安装的时候报错如下: make[1]: [persist-settings] Error 2 (ignored) CC adlist.o/bin/sh: cc: command not ...

  10. 【转】C++后台开发之我见

    工作也快两年了,偶然看到自己以前写过的一些技术博客,发现自己自毕业后一直没有更新过自己的技术博客,趁现在是刚过完春节快要回公司工作之际,谈谈我个人对后台开发的一些个人见解,希望能够对在校的学生或者刚刚 ...