恩，语言组织不是很好，直接上代码吧。。。。
<!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. Intellij热部署插件JRebel

    Intellij热部署插件JRebel 安装JRebel 激活JRebel 相关设置 Intellij热部署插件JRebel 项目需求,一直用eclipse的我,也要改用IDEA了,一开始,很不习惯. ...

  2. [论文]A Link-Based Cluster Ensemble Approach for Categorical Data Clustering

    http://www.cnblogs.com/Azhu/p/4137131.html 这篇论文建议先看了上面这一遍,两篇作者是一样的,方法也一样,这一片论文与上面的不同点在于,使用的数据集是目录数据, ...

  3. 调用已发布的WebService

    WebService服务演示 登录http://www.webxml.com.cn

  4. 把握linux内核设计思想系列【转】

    转自:http://blog.csdn.net/shallnet/article/details/47734053 版权声明:本文为博主原创文章,未经博主允许不得转载.如果您觉得文章对您有用,请点击文 ...

  5. StringBuilder 字符串拼接扩容

    String str = a + b + c(a,b,c都是变量,非常量) 实际执行时,"+"操作是通过创建一个StringBuilder来操作的,即: StringBuilder ...

  6. Day 1 MySQL数据库

    MySQL数据库_1 一.概述 1.数据(DATA) 描述事物的符号记录称为数据,描述事物的符号既可以是数字,也可以是文字.图片,图像.声音.语言等,数据由多种表现形式,它们都可以经过数字化后存入计算 ...

  7. hdu 1215(因子和)

    七夕节 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submiss ...

  8. 爬虫学习笔记（二）http请求详解

    上篇博客里面写了,爬虫就是发http请求(浏览器里面打开发送的都是http请求),然后获取到response,咱们再从response里面找到想要的数据,存储到本地. 咱们本章就来说一下什么是http ...

  9. Codeforces Gym100735 E.Restore (KTU Programming Camp (Day 1) Lithuania, Birˇstonas, August 19, 2015)

    E - Restore Given a matrix A of size N * N. The rows are numbered from 0 to N-1, the columns are num ...

  10. 初探ggplot2 geom__制作面积图

        大家大概都对如下信息图并不陌生,该图用100%堆积面积图的方式来表现不同时期不同国家人数所占的比例.这是一种很有意思的表达方式,而面积图也是很常用的数据图表,现在让我们一起来看看如何在R里用g ...