恩，语言组织不是很好，直接上代码吧。。。。
<!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. matplotlib pyplot 中文显示问题

    import pylab pylab.mpl.rcParams['font.sans-serif'] = ['SimHei'] pylab.mpl.rcParams['axes.unicode_min ...

  2. 1.docker学习

    Docker —— 从入门到实践 http://udn.yyuap.com/doc/docker_practice/introduction/index.html 非常详细的Docker学习教程 ht ...

  3. 【源码】List<T>泛型绑定repeater，以及repeater的交替绑定

    原文发布时间为:2009-10-28 -- 来源于本人的百度文章 [由搬家工具导入] 后台： using System;using System.Collections.Generic; public ...

  4. C#后台无刷新页面弹出alert方法

    原文发布时间为:2009-05-17 -- 来源于本人的百度文章 [由搬家工具导入] 无刷新弹出警告：        ScriptManager.RegisterStartupScript(this. ...

  5. 从无序序列中求这个序列排序后邻点间最大差值的O(n)算法

    标题可能比较绕口,简单点说就是给你一个无序数列A={a1,a2,a3……an},如果你把这个序列排序后变成序列B,求序列B中相邻两个元素之间相差数值的最大值. 注意:序列A的元素的大小在[1,2^31 ...

  6. java通过反射获取私有的构造方法,及反射擦除泛型数据类型约束

    /* * 反射获取私有的构造方法运行 * 不推荐,破坏了程序的安全性,封装性 * 暴力私有 */ public class ReflectDemo4 { public static void main ...

  7. hdu 1595(最短路变形好题)

    find the longest of the shortest Time Limit: 1000/5000 MS (Java/Others)    Memory Limit: 32768/32768 ...

  8. JavaScript变量提升和函数声明预解析

    1.首先理解函数作用域 在JavaScript中,变量的定义并不是以代码块作为作用域的,而是以函数作用作用域的.也就是说,如果变量是在某个函数中定义的,那么它在函数以外的地方是不可见的.而如果该变量是 ...

  9. HDU 6227.Rabbits-规律 (2017ACM/ICPC亚洲区沈阳站-重现赛（感谢东北大学）)

    Rabbits Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others)Total S ...

  10. 你值得关注的几种常见的js设计模式

    前言 潜水了一段时间,今天空闲时间复盘下之前的知识点,聊聊 js 几种常见的设计模式. 掌握 JavaScript 中常见的一些设计模式,对我们书写规范性代码,可维护性代码有很大的帮助. ps:最近在 ...