用到了两个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. jquery table 发送两次请求 解惑

    版本1.10 以下链接为一个较低版本解决方案: http://blog.csdn.net/anmo/article/details/17083125 而我的情况有点作, 情况描述: 1,一个页面两个t ...

  2. 网络流Edmonds-Karp算法入门

    今天自习课没事干,看书自学了一下网络流中的EK算法.(求最大流) 设s为源点,t为汇点,C为容量矩阵,F为流量矩阵,f为最大流量. 1.初始化F,f 2.用BFS在残量网络中找到一条从s到t的最短增广 ...

  3. Mysql 8.0.* zip版本 windows安装

    一,MySQL8.0.*zip版本安装步骤. 1,下载 https://dev.mysql.com/get/Downloads/MySQL-8.0/mysql-8.0.15-winx64.zip 注现 ...

  4. C#调用大漠插件，发送QQ和微信消息

    大漠插件就不过多介绍了,不知道的请查下百度.主要是讲解C#怎么调用大漠插件. 大漠插件提供了COM版本,C#直接点击引用,添加即可.然后注册下大漠插件到系统文件夹,注册代码如下: static str ...

  5. Python 更换国内pip源

    pip国内的一些镜像: 阿里云 http://mirrors.aliyun.com/pypi/simple/   中国科技大学 https://pypi.mirrors.ustc.edu.cn/sim ...

  6. Python教程：Python中的for 语句

    Python 中的 for 语句与你在 C 或 Pascal 中可能用到的有所不同. Python教程 中的 for 语句并不总是对算术递增的数值进行迭代(如同 Pascal),或是给予用户定义迭代步 ...

  7. HDU-1496(哈希表)

    Hash入门第一题 题意: 问题描述 考虑具有以下形式的方程: a * x1 ^ 2 + b * x2 ^ 2 + c * x3 ^ 2 + d * x4 ^ 2 = 0 a,b,c,d是来自区间[- ...

  8. jmeter链接数据库问题汇总

    1.最新驱动下载: 驱动版本与mysql服务不兼容也是会报错的 下载地址:https://dev.mysql.com/downloads/connector/j/ 打开页面一直拉到页面底部,此处选择P ...

  9. [HNOI2017]大佬

    参考题解 \(\text{Solution}\) 我们发现5个行为中2操作与其它操作无关,所以我们采用贪心,尽量让多的时间去攻击大佬. 设 \(f[i][j]\) 表示前 \(i\) 天剩 \(j\) ...

  10. 01背包问题：DP

    题目描述: 有 N 件物品和一个容量是 V 的背包.每件物品只能使用一次. 第 i 件物品的体积是 vi,价值是 wi. 求解将哪些物品装入背包,可使这些物品的总体积不超过背包容量,且总价值最大.输出 ...