用到了两个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. Vue.js核心概念

    # 1. Vue.js是什么? 1). 一位华裔前Google工程师(尤雨溪)开发的前端js库 2). 作用: 动态构建用户界面 3). 特点: * 遵循MVVM模式 * 编码简洁, 体积小, 运行效 ...

  2. 数据库 MySQL part3

    外键约束 如果表A的主关键字是表B中的字段,则该字段称为表B的外键,表A称为主表,表B称为从表. 外键是用来实现参照完整性的,不同的外键约束方式将可以使两张表紧密的结合起来,特别是修改或者删除的级联操 ...

  3. Java设计模式（13）——结构型模式之桥梁模式（Bridge）

    一.概述 概念 将抽象与实现脱耦,使得抽象和实现可以独立运行 UML图 角色: 角色关系 二.实践 按照上面的角色建立相应的类 抽象化角色 /** * 抽象化角色 * * @author Admini ...

  4. 【公司动态添加行】前台穿一个json的字符串到后台，并解析

    <!doctype html><html lang="en"> <head> <meta charset="UTF-8" ...

  5. hdu1181变形课(floyd)

    变形课 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/Others)Total Submis ...

  6. leetcode-帕斯卡三角形

    帕斯卡三角形 给定一个非负整数 numRows,生成杨辉三角的前 numRows 行. 示例: 输入: 5 输出: [ [1], [1,1], [1,2,1], [1,3,3,1], [1,4,6,4 ...

  7. 204. Singleton

    Description Singleton is a most widely used design pattern. If a class has and only has one instance ...

  8. 浅谈java中接口与抽象类之间的异同

    刚学习java的时候,总觉得接口和抽象类很像,但又说不上具体有什么区别.今天静下来,翻翻书,查查资料,做个小结.首先举两个例子,看看interface和abstract class 在“外形”上有啥异 ...

  9. Java学习 · 初识 多线程

    多线程 1. 基础概念 a)     程序 Program i.           静态代码,指令集,应用程序执行的蓝本 b)    进程 Process i.           动态概念,正在运 ...

  10. 【转】Haml 这货是啥？ 附参考

    Haml是一种用来描述任何XHTML web document的标记语言,它是干净,简单的.而且也不用内嵌代码.Haml的职能就是替代那些内嵌代码的page page templating syste ...