Html简单的整页切换
恩，语言组织不是很好，直接上代码吧。。。。
<!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
