恩，语言组织不是很好，直接上代码吧。。。。
<!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. H5 基本标签使用 浅析 （含video标签、input表单等）

    1. 音频标签<audio> <audio src = “./music/Alone.mp3” controls autoplay loop = “3” ></audio ...

  2. 免费tk域名+freewebhostingarea空间

    1.申请免费域名 进入http://www.dot.tk(推荐注册tk域名),申请一个新的域名,每次申请12个月以下是免费的,到期前14天可以免费续期 在此页面执行下一步之前,需要进行设置DNS服务器 ...

  3. Javascript的SEO优化技巧

    原文发布时间为:2010-10-22 -- 来源于本人的百度文章 [由搬家工具导入] 1.外部崁入javascript在撰写一些比较复杂的网页特效，如下拉式选单等，会产生大量的javascript码， ...

  4. jquery.slider jquery滑块插件

    原文发布时间为:2011-03-08 -- 来源于本人的百度文章 [由搬家工具导入] http://jqueryui.com/demos/slider jquery滑块插件

  5. 【转】Resharper上手指南

    原文发布时间为:2011-02-16 -- 来源于本人的百度文章 [由搬家工具导入] 我是visual studio的忠实用户，从visual studio 6一直用到了visual studio 2 ...

  6. XPath gramma

    XPath 使用路径表达式来选取 XML 文档中的节点或节点集.节点是通过沿着路径 (path) 或者步 (steps) 来选取的. XML 实例文档 我们将在下面的例子中使用这个 XML 文档. & ...

  7. Linux signal那些事儿【转】

    转自:http://blog.chinaunix.net/uid-24774106-id-4061386.html Linux编程,信号是一个让人爱恨交加又不得不提的一个领域.最近我集中学习了Linu ...

  8. Windows开发

    1. 介绍 这里简单介绍了Windows应用程序开发的基础知识 2. 基础 Windows下的应用程序有控制台程序和Win32窗口程序,这里讲的是Win32窗口程序 Windows提供了相关静态库(L ...

  9. 最简单方法远程调试Python多进程子程序

    Python 2.6新增的multiprocessing,即多进程,给子进程代码调试有点困难,比如python自带的pdb如果直接在子进程代码里面启动会抛出一堆异常,原因是子进程的stdin/out/ ...

  10. C#数组排序以及比较对象的大小

    先来看个小例子吧 ,,,,,}; Array.Sort(intArray); Array.ForEach<int>(intArray,(i)=>Console.WriteLine(i ...