全屏页面往下往上滚动切换页面
2016-09-19 17:56
531 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>全屏滚动</title>
<script src='js/jquery-1.11.3.min.js'></script>
<link rel="stylesheet" type="text/css" href="css/public.css" />
<style>
body{overflow:hidden;}
.main{width:100%;height:100%;position:relative;}
.main .page{width:100%;position:absolute;left:0;right:0;}
.page1 { background-color: #1bbc9b;top:0;}
.page2 { background-color: #FF7F50;top:100%;}
.page3 { background-color: #4BBFC3;top:200%;}
.page4 { background-color: #f90;top:300%;}
p.title { position: relative; top: 35%; font: 700 40px "Microsoft Yahei"; color: #fff; text-align: center;}
.pagination{position:fixed;top:50%;right:10px;z-index:2; transform:translateY(-50%);}
.pagination li{margin-top:4px;width:4px;height:4px;padding:10px;cursor:pointer;}
.pagination li:before{content: ''/*重要*/;display:block;position:absolute;width:4px;height:4px;background-color:#333;border-radius:50%;}
.pagination li.active:before{width:10px;height:10px;border-radius:50%;border:1px solid #333;background:none;left:6px;}
</style>
</head>
<body>
<div class="main">
<div class="page page1">
<p class="title">第一屏</p>
</div>
<div class="page page2">
<p class="title">第二屏</p>
</div>
<div class="page page3">
<p class="title">第三屏</p>
</div>
<div class="page page4">
<p class="title">第四屏</p>
</div>
</div>
<ul class="pagination"></ul>
<script>
$(function(){
var pagewin = $(window).width();
var pagehei = $(window).height();
$('body,.main,.page').css({"width":pagewin}).css({"height":pagehei});
var len = $('.page').length;
var num = 0;//在哪页
var numjia=0;//重要必须有的。。防止多次滚动事件发生/*每次滚动鼠标时都是很“凶残”的一下子滚动很大一个幅度，而不是一小格一小格的慢慢滚动，这就导致了滚动的时候会多次触发onmousewheel事件，*/
var done = true;/*重要必须有的。。做个变量 var done=true ,scrollFunc事件里第一步就判断done为true时继续运行,否则跳出.animate之前或之后done=false(从此,事件无效)
animate增加一个callback,使done=true(也就是动画结束,事件会继续有效)。也就是不写done那么scrollFunc事件只会执行一次。*/
for(var i=0;i<len;i++){
$('.pagination').append("<li></li>")
}
$('.pagination').find('li').eq(0).addClass('active');
$('.pagination li').click(function(){
num=$(this).index();
$('.main').stop().animate({marginTop:-num*pagehei},1000);
$('.pagination').find('li').eq(num).addClass('active').siblings().removeClass('active');
});
function xia(){
if(num < len-1 && done){//不在最后一页的时候
num++;
numjia++;
done=false;
if(numjia==1){//只有在滚轮滚动一次时才执行下面的。
$('.main').stop().animate({marginTop:-num*pagehei},1000,function(){done=true;numjia=0;});
}
}else if(done){//在最后一页的时候
num=0;
numjia++;
done=false;
if(numjia==1){//只有在滚轮滚动一次时才执行下面的。
$('.main').stop().animate({marginTop:-num*pagehei},1000,function(){done=true;numjia=0;});
}
}
}
function shang(){
if(num > 0 && done){//不在第一页的时候
num--;
numjia++;
done=false;
if(numjia==1){//只有在滚轮滚动一次时才执行下面的。
$('.main').stop().animate({marginTop:-num*pagehei},1000,function(){done=true;numjia=0;});
}
}else if(done){//在第一页的时候
num=len-1;
numjia++;
done=false;
if(numjia==1){//只有在滚轮滚动一次时才执行下面的。
$('.main').stop().animate({marginTop:-num*pagehei},1000,function(){done=true;numjia=0;});
}
}
}
function scrollFunc(e){
e = e || window.event; //给e赋值event对象
if(e.wheelDelta){//IE/Opera/Chrome 情况时执行
if(e.wheelDelta <= -120){//判断滚轮是否下滚
xia();
}else if(e.wheelDelta >= 120){//判断滚轮是否往上滚动
shang();
}
}else if(e.detail){//火狐 情况时执行
if(e.detail >=3){//滚轮往下滚动时
xia();
}else if(e.detail <=-3){//判断滚轮是否往上滚动
shang();
}
}
$('.pagination').find('li').eq(num).addClass('active').siblings().removeClass('active');
}
//注册事件
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}//火狐浏览的事件绑定方式
window.onmousewheel=document.onmousewheel=scrollFunc;//其他浏览器绑定事件方式 如IE/Opera/Chrome
})
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>全屏滚动</title>
<script src='js/jquery-1.11.3.min.js'></script>
<link rel="stylesheet" type="text/css" href="css/public.css" />
<style>
body{overflow:hidden;}
.main{width:100%;height:100%;position:relative;}
.main .page{width:100%;position:absolute;left:0;right:0;}
.page1 { background-color: #1bbc9b;top:0;}
.page2 { background-color: #FF7F50;top:100%;}
.page3 { background-color: #4BBFC3;top:200%;}
.page4 { background-color: #f90;top:300%;}
p.title { position: relative; top: 35%; font: 700 40px "Microsoft Yahei"; color: #fff; text-align: center;}
.pagination{position:fixed;top:50%;right:10px;z-index:2; transform:translateY(-50%);}
.pagination li{margin-top:4px;width:4px;height:4px;padding:10px;cursor:pointer;}
.pagination li:before{content: ''/*重要*/;display:block;position:absolute;width:4px;height:4px;background-color:#333;border-radius:50%;}
.pagination li.active:before{width:10px;height:10px;border-radius:50%;border:1px solid #333;background:none;left:6px;}
</style>
</head>
<body>
<div class="main">
<div class="page page1">
<p class="title">第一屏</p>
</div>
<div class="page page2">
<p class="title">第二屏</p>
</div>
<div class="page page3">
<p class="title">第三屏</p>
</div>
<div class="page page4">
<p class="title">第四屏</p>
</div>
</div>
<ul class="pagination"></ul>
<script>
$(function(){
var pagewin = $(window).width();
var pagehei = $(window).height();
$('body,.main,.page').css({"width":pagewin}).css({"height":pagehei});
var len = $('.page').length;
var num = 0;//在哪页
var numjia=0;//重要必须有的。。防止多次滚动事件发生/*每次滚动鼠标时都是很“凶残”的一下子滚动很大一个幅度，而不是一小格一小格的慢慢滚动，这就导致了滚动的时候会多次触发onmousewheel事件，*/
var done = true;/*重要必须有的。。做个变量 var done=true ,scrollFunc事件里第一步就判断done为true时继续运行,否则跳出.animate之前或之后done=false(从此,事件无效)
animate增加一个callback,使done=true(也就是动画结束,事件会继续有效)。也就是不写done那么scrollFunc事件只会执行一次。*/
for(var i=0;i<len;i++){
$('.pagination').append("<li></li>")
}
$('.pagination').find('li').eq(0).addClass('active');
$('.pagination li').click(function(){
num=$(this).index();
$('.main').stop().animate({marginTop:-num*pagehei},1000);
$('.pagination').find('li').eq(num).addClass('active').siblings().removeClass('active');
});
function xia(){
if(num < len-1 && done){//不在最后一页的时候
num++;
numjia++;
done=false;
if(numjia==1){//只有在滚轮滚动一次时才执行下面的。
$('.main').stop().animate({marginTop:-num*pagehei},1000,function(){done=true;numjia=0;});
}
}else if(done){//在最后一页的时候
num=0;
numjia++;
done=false;
if(numjia==1){//只有在滚轮滚动一次时才执行下面的。
$('.main').stop().animate({marginTop:-num*pagehei},1000,function(){done=true;numjia=0;});
}
}
}
function shang(){
if(num > 0 && done){//不在第一页的时候
num--;
numjia++;
done=false;
if(numjia==1){//只有在滚轮滚动一次时才执行下面的。
$('.main').stop().animate({marginTop:-num*pagehei},1000,function(){done=true;numjia=0;});
}
}else if(done){//在第一页的时候
num=len-1;
numjia++;
done=false;
if(numjia==1){//只有在滚轮滚动一次时才执行下面的。
$('.main').stop().animate({marginTop:-num*pagehei},1000,function(){done=true;numjia=0;});
}
}
}
function scrollFunc(e){
e = e || window.event; //给e赋值event对象
if(e.wheelDelta){//IE/Opera/Chrome 情况时执行
if(e.wheelDelta <= -120){//判断滚轮是否下滚
xia();
}else if(e.wheelDelta >= 120){//判断滚轮是否往上滚动
shang();
}
}else if(e.detail){//火狐 情况时执行
if(e.detail >=3){//滚轮往下滚动时
xia();
}else if(e.detail <=-3){//判断滚轮是否往上滚动
shang();
}
}
$('.pagination').find('li').eq(num).addClass('active').siblings().removeClass('active');
}
//注册事件
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}//火狐浏览的事件绑定方式
window.onmousewheel=document.onmousewheel=scrollFunc;//其他浏览器绑定事件方式 如IE/Opera/Chrome
})
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery1——基础（$对象，选择器，对象转换）
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站，一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- $.ajax()方法详解
- jQuery ajax - ajax() 方法
- JavaScript 各种遍历方式详解
- 数组方法汇总
- jQuery Html控件基本操作(日常收集整理)
- jQuery插件实现文字无缝向上滚动效果代码
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码