恩，语言组织不是很好，直接上代码吧。。。。
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        html,body{

            padding: 0;

            margin:0;

            width: 100%;

            height: 100%;

            overflow:hidden;

        }

        .main{

            position:absolute;

            width:400%;

            height: 100%;

        }

        .cont{

            width: 100%;

            height:100%;

        }

        .cont.cont-1{

            width: 25%;

            background-color: aquamarine;

        }

        .cont.cont-2{

            width: 25%;

            background-color:blueviolet;

        }

        .cont.cont-3{

            width: 25%;

            background-color:salmon;

        }

        .cont.cont-4{

            width: 25%;

            background-color: darkorange;

        }

    </style>

</head>

<body>

<div class="main sweel">

    <div class="cont cont-1">1</div>

    <div class="cont cont-2">2</div>

    <div class="cont cont-3">3</div>

    <div class="cont cont-4">4</div>

    <div class="cont cont-1">5</div>

</div>

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

<script src="sweel.js"></script>

<script>

    $(function () {

        var def={

            color:"green",

            opacity:0.8

        }

//        var c =new Sweel($(".sweel"),def);

        Sweel.int($(".sweel"),def);

    });

</script>

</body>

</html>

　　sweel.js  JS部分：

/**

 * Created by Administrator on 2015/7/9.

 */

;(function($){

    var gol=0;//存放当前滚动页，用于resize（）事件调用

    var Sweel= function (res,def) {

        this.def={//默认配置 自行扩展

            color:"red",    //颜色

            opacity:0.8    //透明度

        }

        //这里并没有判断def为空或者未定义（实际上需要）

        this.def= $.extend(this.def,def)

        this.colo=  this.def.color;

        this.opac=  this.def.opacity;

        this.setVal($(res).find(".cont-1"));

        this.addEvent(res,$(res).children().size());

        this.reSize( res);

    };

    Sweel.prototype={

        //监听屏幕大小改变

        reSize: function (page) {

            $(window).bind('resize', function() {

                $(page).css({"top":-(document.body.clientHeight)*(gol)});

            })

        },

        //根据参数设置相关

        setVal:function(res){

            $(res).css({"background-color":this.colo,"opacity":this.opac})

        },

        //监听滚轮

        addEvent: function (res,size) {

            var type;//

            type= navigator.userAgent.indexOf("Firefox")<0?"mousewheel":"DOMMouseScroll";//区分火狐

            var count=0;  //滚动次数

            var page=res; //当前dom

            var a2=0;     //当前动位置在第几页

            res.addEventListener(type, function (e) {//绑定事件===滚轮事件监听

                count++;

                var delta = (e.wheelDelta) ? e.wheelDelta / 120 : -(e.detail || 0) / 3;//delta>0上翻滚相反下翻滚

                if(delta>0&&count%4==0){

                    a2--;

                    if(a2<0){

                        a2=0;

                    }

                    gol=a2;

                    $(page).animate({"top":-(document.body.clientHeight)*(a2)}, 1000);//动画过度效果

                }

                if(delta<0&&count%4==0){

                    a2++;

                    if(a2>=size){a2=size-1}

                    gol=a2;

                    $(page).animate({"top":-(document.body.clientHeight)*(a2)}, 1000);

                }

            },false);

        }

    };

    Sweel.int= function (obj,deft) {//初始化函数

        obj.each(function(i){

            new Sweel(this,deft);//实例化对象

        });

    }

    window["Sweel"]=Sweel;//全局注册

})(jQuery)

DEMO地址：  http://runjs.cn/detail/zinwycyz

Html简单的整页切换的更多相关文章

  1. ionic 最简单的路由形式，头部固定，下面tab切换-------一个简单的单页切换起飞了

    <ion-header-bar class="bar-dark" align-title="left"> <h1 class="ti ...

  2. Android之ActionBar、Tabs、Fragment、ViewPager实现标签页切换并缓存页面

    感觉 Android 到处都是坑,每个地方都要把人折腾半天. 今天来简单说说 Android之ActionBar.Tabs.Fragment.ViewPager 实现标签页切换并缓存页面 关于他们的介 ...

  3. simple-spa 一个简单的单页应用实例

    上两篇文章说过要写一个简单的单页应用例子的, 迟迟没有兑诺, 实在有愧 哈哈.这篇写给小白用户哈. 正好趁今天风和日丽,事情不多, 把从项目里的代码扣取了一下, 整理了一个简单的例子.因为我们生产项目 ...

  4. 用Loading 加载中的整页加载来做蒙层

    总结:遇见的bug 如何写一个蒙层 最初我打算的是自己写一个蒙层,但是写出来后, 不能够将整个屏幕全部覆盖.只能够覆盖 除[顶部导航] 和[左侧菜单栏] 于是我就使用了element-ui中的 [Lo ...

  5. （java）selenium webdriver学习---实现简单的翻页，将页面内容的标题和标题链接取出

    selenium webdriver学习---实现简单的翻页,将页面内容的标题和标题链接取出: 该情况适合能能循环page=1~n,并且每个网页随着循环可以打开的情况, 注意一定是自己拼接的url可以 ...

  6. C#使用phantomjs 进行网页整页截屏

    C#使用phantomjs 进行网页整页截屏 hantomjs 是一个基于js的webkit内核无头浏览器 也就是没有显示界面的浏览器,这样访问网页就省去了浏览器的界面绘制所消耗的系统资源,比较适合用 ...

  7. jquery实现tab页切换显示div

    1.jQuery实现tab切换显示代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &q ...

  8. chrome比较好用的网站整页（超长网页）截图插件

    chrome比较好用的网站整页(超长网页)截图插件:fireshot capture 试用过比较好用

  9. 一款基于css3的3D图片翻页切换特效

    今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id= ...

随机推荐

  1. [暑假集训--数论]poj3518 Prime Gap

    The sequence of n − 1 consecutive composite numbers (positive integers that are not prime and not eq ...

  2. wsl折腾记

    参考1 wsl在哪 C:\Users\用户名\AppData\Local\Packages\CanonicalGroupLimited.Ubuntu18.04onWindows_79rhkp1fndg ...

  3. POJ3170 Bzoj1671 [Usaco2005 Dec]Knights of Ni 骑士

    1671: [Usaco2005 Dec]Knights of Ni 骑士 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 281  Solved: 180 ...

  4. WPF 自动选择dll,以SQLite为例

    在学习sqlite的过程中,发现它的dll是区分32位和64位的,起初觉得很恼火,但是仔细看了下, 发现让程序自行选择dll其实也不是一件很麻烦的事情,如下: 1>创建一个sqlite数据 2& ...

  5. 《Linux命令行与shell脚本编程大全 第3版》Linux命令行---51

    以下为阅读<Linux命令行与shell脚本编程大全 第3版>的读书笔记,为了方便记录,特地与书的内容保持同步,特意做成一节一次随笔,特记录如下:

  6. systemd 开机无法启动privoxy

    此博客不在更新,我的博客新地址:www.liuquanhao.com ----------------------------------------------------------------- ...

  7. centos6.7下安装配置vnc

    vnc是一款使用广泛的服务器管理软件,可以实现图形化管理,下面简单介绍一下如何在centos6.7下安装vnc. 1.安装vncserver yum install tigervnc tigervnc ...

  8. dedecms跳转标签

    我们在使用织梦dedecms制作网站的时候,有时会遇到利用arclist和list标签调用redirecturl属性.但是,dedecms的arclist和list标签不支持redirecturl.很 ...

  9. mysql之select，insert，delete，update

    写在前面 上篇文章学习了创建数据库和数据表,这篇文章将学习对数据表的增删改查操作. 系列文章 mysql之创建数据库,创建数据表 一个例子 上篇文章中,创建了数据库和数据表,数据表中还没有数据,这里我 ...

  10. css样式大全(整理版）

    字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 {font-style: obl ...