用到了两个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. 使用MATLAB设计FIR滤波器

    1.      采用fir1函数设计,fir1函数可以设计低通.带通.高通.带阻等多种类型的具有严格线性相位特性的FIR滤波器.语法形式: b = fir1(n, wn) b = fir1(n, wn ...

  2. 武汉Uber优步司机奖励政策（12月21日-12.27日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  3. 微服务架构（Microservice Architect Pattern）综述——什么是微服务架构（读书笔记）

    简单定义: 微服务架构是一种架构模式,它提倡将单一应用程序划分成一组小的服务,服务之间相互协调,相互配合,为用户提供最终价值.每个服务运行在其独立的进程中,服务与服务间采用轻量级的通信机制相互沟通(通 ...

  4. docker 在window 10 专业版的安装 && .net core 在docker的部署

    1.如果无法安装Hyper-V,八成是自己的杀毒软件给关了,我的是 电脑管家-启动项里面 给关掉了. 2.如果部署.net core 后 运行 报 An assembly specified in t ...

  5. cocos2dx - ActionManager内存泄露

    ActionManager memory leak cocos2d-x3.7 都3.7了还有这样的bug,真是好难过,不过还是好开源的,谁都可以贡献一下 问题描述: 当创建一个node,并让它run一 ...

  6. unity面试题二

    1.以下哪一个选项不属于Unity引擎所支持的视频格式文件(D) A.后缀为mov的文件 B.后缀为mpg的文件 C.后缀为avi的文件 D.后缀为swf的文件 2.Unity引擎使用的是左手坐标系还 ...

  7. python3 BeautifulSoup模块使用

    BeautifulSoup就是Python的一个HTML或XML的解析库,可以用它来方便地从网页中提取数据.官方解释如下: Beautiful Soup提供一些简单的.Python式的函数来处理导航. ...

  8. 前端开发工程师 - 03.DOM编程艺术 - 第1章.基础篇(下)

    第1章.基础篇(下) Abstract: 数据通信.数据存储.动画.音频与视频.canvas.BOM.表单操作.列表操作 数据通信(HTTP协议) HTTP事务: 客户端向服务器端发送HTTP请求报文 ...

  9. 【Coursera-ML-Notes】线性回归（下）

    模型表示 多变量的线性回归也叫做"多元线性回归".首先还是先明确几个符号的含义. \(x{^{(i)}_j}\):第i个训练样本的第j个特征,比如面积,楼层,客厅数 \(x^{(i ...

  10. [2017 - 2018 ACL] 对话系统论文研究点整理

    (论文编号及摘要见 [2017 ACL] 对话系统. [2018 ACL Long] 对话系统. 论文标题[]中最后的数字表示截止2019.1.21 google被引次数) 1. Domain Ada ...