185 lines
3.3 KiB
HTML
185 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="en">
|
|
|
|
<head>
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
<title>Document</title>
|
|
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<div id="wrap">
|
|
|
|
<div id="main">
|
|
|
|
<div id="page1" class="page"></div>
|
|
|
|
<div id="page2" class="page"></div>
|
|
|
|
<div id="page3" class="page"></div>
|
|
|
|
<div id="page4" class="page"></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
|
|
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
|
|
<style>
|
|
html,
|
|
body {
|
|
width: 100%;
|
|
}
|
|
|
|
body,
|
|
ul,
|
|
li,
|
|
a,
|
|
p,
|
|
div {
|
|
padding: 0px;
|
|
margin: 0px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
#wrap {
|
|
overflow: hidden;
|
|
height: 100%;
|
|
}
|
|
|
|
#main {
|
|
left: 0;
|
|
position: relative;
|
|
}
|
|
|
|
.page {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
#page1 {
|
|
background: #E4E6CE;
|
|
}
|
|
|
|
#page2 {
|
|
background: #6CE26C;
|
|
}
|
|
|
|
#page3 {
|
|
background: #BF4938;
|
|
}
|
|
|
|
#page4 {
|
|
background: #2932E1;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
var wrap = document.getElementById("wrap");
|
|
|
|
var main = document.getElementById("main");
|
|
|
|
var wid = document.body.clientWidth;
|
|
|
|
wrap.style.width = wid + "px";
|
|
|
|
var obj = document.getElementsByTagName("div");
|
|
|
|
for (var i = 0; i < obj.length; i++) {
|
|
|
|
if (obj[i].className == 'page') {
|
|
|
|
obj[i].style.width = wid + "px";
|
|
|
|
}
|
|
|
|
}
|
|
|
|
//如果不加时间控制，滚动会过度灵敏，一次翻好几屏
|
|
|
|
var startTime = 0, //翻屏起始时间
|
|
endTime = 0,
|
|
now = 0;
|
|
|
|
//浏览器兼容
|
|
|
|
if ((navigator.userAgent.toLowerCase()
|
|
.indexOf("firefox")!= -1)) {
|
|
|
|
document.addEventListener("DOMMouseScroll", scrollFun, false);
|
|
|
|
} else if (document.addEventListener) {
|
|
|
|
document.addEventListener("mousewheel", scrollFun, false);
|
|
|
|
} else if (document.attachEvent) {
|
|
|
|
document.attachEvent("onmousewheel", scrollFun);
|
|
|
|
} else {
|
|
|
|
document.onmousewheel = scrollFun;
|
|
|
|
}
|
|
|
|
//滚动事件处理函数
|
|
|
|
function scrollFun(event) {
|
|
|
|
startTime = new Date()
|
|
.getTime();
|
|
|
|
var delta = event.detail || (-event.wheelDelta);
|
|
|
|
//mousewheel事件中的 “event.wheelDelta” 属性值：返回的如果是正值说明滚轮是向上滚动
|
|
|
|
//DOMMouseScroll事件中的 “event.detail” 属性值：返回的如果是负值说明滚轮是向上滚动
|
|
|
|
if ((endTime - startTime) < -1000) {
|
|
|
|
if (delta > 0 && parseInt(main.offsetLeft) > -(wid * 3)) {
|
|
|
|
//向右滚动
|
|
|
|
now = now - wid;
|
|
|
|
toPage(now);
|
|
|
|
}
|
|
|
|
if (delta < 0 && parseInt(main.offsetLeft) < 0) {
|
|
|
|
//向左滚动
|
|
|
|
now = now + wid;
|
|
|
|
toPage(now);
|
|
|
|
}
|
|
|
|
endTime = new Date().getTime();
|
|
|
|
} else {
|
|
|
|
event.preventDefault();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
function toPage(now) {
|
|
|
|
$("#main")
|
|
.animate({
|
|
left: (now + 'px')
|
|
}, 1000);
|
|
}
|
|
</script>
|
|
</html> |