jquery——整屏滚动
从这里下载了滚轮事件插件：https://github.com/jquery/jquery-mousewheel
函数节流：js中有些事件的触发频率非常高，在短时间内多次触发执行绑定函数，比如mousemove（）然而这并不是我们想要的效果，解决方法就是通过使用定时器来减少触发的次数，实现函数节流。
我做了一个这样的页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>整页滚动</title>
<link rel="stylesheet" type="text/css" href="1.css">
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript">
$(function(){
var nowscreen = 0;
var $h = $(window).height();
var $points = $('.points li');
var $pages = $('.pages');
var len =$('.pages').length;
var timer = null; $pages.eq(0).addClass('moving');
$pages.css({height:$h});
//-1 是向下滑动，1是 像上滑动
$(window).mousewheel(function (event,dat) { clearTimeout(timer); timer=setTimeout(function () {
if(dat==-1)
{
nowscreen++;
if(nowscreen>len-1){
nowscreen = len-1;
}
}
else{
nowscreen--;
if(nowscreen<0)
{
nowscreen = 0;
}
}
$('.pages_con').animate({top:-$h*nowscreen},300); $points.eq(nowscreen).addClass('active').
siblings().removeClass('active'); $pages.eq(nowscreen).addClass('moving').
siblings().removeClass('moving');
},200);
}); $points.click(function () {
$(this).addClass('active').siblings().removeClass('active');
$('.pages_con').animate({top:-$h*$(this).index()},300);
$pages.eq($(this).index()).addClass('moving').
siblings().removeClass('moving');
}) })
</script>
</head>
<body>
<div class="pages_con"> <div class="pages page1">
<div class="main_con">
<div class="left_img"><img src="data:images/chicken.png" alt="chicken"></div>
<div class="right_info">
在青青草原上，住着一只外表美丽大方，端庄优雅，
内心天真可爱，善良纯真的小chicken，她的名字叫圈圈，
虽然不是计算机专业，但是却自学了
python、h5、css、js、linux、算法与数据结构，她是
真的！真的！真的！真的很不错！
</div>
</div>
</div> <div class="pages page2">
<div class="main_con">
<div class="left_img1"><img src="data:images/eat1.png" alt="food"></div>
<div class="left_img2"><img src="data:images/eat2.png" alt="food"></div>
<div class="left_img3"><img src="data:images/travel1.png" alt="travel"></div>
<div class="left_img4"><img src="data:images/travel2.png" alt="travel"></div>
<div class="info2">
她一个人<br>吃饭<br>旅行<br>到处走走停停
</div>
</div>
</div> <div class="pages page3">
<div class="main_con">
<div class="duck"><img src="data:images/duck.png" alt="duck"></div>
<div class="info3">
<p>突然有一天，她遇到了他！<br></p>
<p>帅气的扁嘴巴，个性的三根头发，小小的眼睛<br></p>
<p>他是那么的与众不同</p>
<p>仿佛天上掉下来的小天使<br></p>
<p>透露着不寻常的智慧与成熟<br></p>
<p> 这一刻,圈圈想把头上的小心心摘下来给他！</p>
</div>
<div class="heart"><img src="data:images/heart.png" alt="heart"></div>
<div class="me"><img src="data:images/me.png" alt="me"></div>
</div>
</div> <div class="pages page4">
<div class="main_con">
<div class="end_img1"><img src="data:images/duck_02.png" alt="duck"></div>
<div class="end_img2"><img src="data:images/chicken.png" alt="chicken"></div>
<div class="end">
最后，两只可爱的小东西幸福的生活在了一起
</div>
<div class="ending">ending...</div>
<div class="paint paint1"><img src="data:images/flower.png" alt="love"></div>
<div class="paint paint2"><img src="data:images/flower.png" alt="love"></div>
<div class="paint paint3"><img src="data:images/flower.png" alt="love"></div>
<div class="paint paint4"><img src="data:images/flower.png" alt="love"></div>
<div class="paint paint5"><img src="data:images/flower.png" alt="love"></div>
<div class="paint paint6"><img src="data:images/flower.png" alt="love"></div>
</div>
</div>
</div> <ul class="points">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
css:
body, ul{
margin: 0;
padding:0;
}
ul{
list-style: none;
}
.pages_con{
position: fixed;
left:0;
top:0;
width:100%;
overflow:hidden;
}
.pages{
position:relative;
}
.page1{background:url("images/background.jpg")top center no-repeat; background-size:cover;}
.page2{background-color: cornflowerblue}
.page3{background-color: hotpink}
.page4{background-color: salmon}
.main_con{
width:1262px;
height:615px;
/*position:relative;*/
/*left:50%;*/
/*top:50%;*/
/*margin-left:631px;*/
/*margin-top:-307px;*/
}
.main_con .left_img{
width:320px;
height:360px;
float:left;
position:relative;
left: 80px;
top:90px;
opacity: 0;
filter:alpha(opacity=0);
transition:all 1000ms ease 300ms;
}
.moving .main_con .left_img{
left:236px;
opacity: 1;
filter:alpha(opacity=100);
}
.main_con .right_info{
width:500px;
height:300px;
margin-top:50px;
float:right;
font-family: "Microsoft YaHei UI";
font-size:20px;
line-height: 50px;
color:#fff;
text-indent:2em;
text-align:justify;
position: relative;
left:-50px;
top:38px;
opacity: 0;
filter:alpha(opacity=0);
transition:all 1000ms ease 300ms;
}
.moving .main_con .right_info{
left:-200px;
opacity: 1;
filter:alpha(opacity=1);
}
.main_con .left_img1{
width:200px;
height:200px;
position: relative;
left:0;
top:0;
transition:all 5000ms ease 300ms;
}
.moving .main_con .left_img1{
left:121px;
top:464px;
}
.main_con .left_img2{
width:200px;
height:200px;
position: relative;
left:200px;
top:-200px;
transition:all 5000ms ease 300ms;
}
.moving .main_con .left_img2{
left:308px;
top:80px;
}
.main_con .left_img3{
width:200px;
height:200px;
position: relative;
left:400px;
top:-400px;
transition:all 5000ms ease 300ms;
}
.moving .main_con .left_img3{
left:627px;
top:-15px;
}
.main_con .left_img4{
width:200px;
height:200px;
position: relative;
left:945px;
top:-293px;
transition:all 5000ms ease 300ms;
}
.moving .main_con .left_img4{
left:600px;
top:-600px;
}
.main_con .info2{
width:500px;
height:200px;
position: relative;
left:344px;
top:-539px;
font: bold 30px/40px 'Microsoft YaHei UI';
color:#fff;
text-align: center;
opacity: 0;
filter:alpha(opacity=0);
transition:all 1000ms ease 300ms;
}
.moving .main_con .info2{
opacity: 1;
filter: alpha(opacity=1);
}
.main_con .me{
width:300px;
height: 300px;
position: relative;
left:-93px;
top:-433px;
transition:all 1000ms ease 300ms;
}
.moving .main_con .me{
left:79px;
}
.main_con .heart{
width:200px;
height:150px;
position: relative;
left:400px;
top:-9px;
transition:all 5000ms ease 300ms;
}
.moving .main_con .heart{
top:-426px;
left:591px;
}
.main_con .duck{
width:233px;
height:300px;
position: relative;
left:918px;
top:141px;
transition:all 1000ms ease 300ms;
}
.moving .main_con .duck{
left:695px;
transition:all 1000ms ease 300ms;
}
.main_con .info3{
width:400px;
height:300px;
position: relative;
left:250px;
top:-164px;
transition:all 1000ms ease 300ms;
}
.info3 p{
font-size: 20px;
font-family: "Microsoft YaHei UI";
text-align: center;
color:#fff;
}
.main_con .end_img1{
width:200px;
height:200px;
position: relative;
left:719px;
top:70px;
transition:all 1000ms ease 300ms;
}
.moving .main_con .end_img1{
left:548px;
}
.main_con .end_img2{
width:200px;
height:200px;
position: relative;
left:190px;
top:-110px;
transition:all 1000ms ease 300ms;
}
.moving .main_con .end_img2{
left:325px;
}
.main_con .end{
width:600px;
height:50px;
position: relative;
left:386px;
top:-18px;
font-family: "Microsoft YaHei UI";
font-size:20px;
line-height: 50px;
color:#fff;
transition:all 1000ms ease 300ms;
}
.main_con .ending{
width:600px;
height:50px;
position: relative;
left:386px;
top:0px;
font-family: "Microsoft YaHei UI";
font-size:20px;
line-height: 50px;
color:#fff;
}
.main_con .paint{
width:200px;
height:200px;
position: relative;
transition:all 4000ms ease 300ms;
}
.main_con .paint1{
left:841px;
top:-126px;
}
.moving .main_con .paint1{
transform: rotate(500deg);
}
.main_con .paint2{
left:12px;
top:-683px;
}
.moving .main_con .paint2{
transform: rotate(500deg);
}
.main_con .paint3{
left:147px;
top:-643px;
}
.moving .main_con .paint3{
transform: rotate(500deg);
}
.main_con .paint4{
left:98px;
top:-716px;
}
.moving .main_con .paint4{
transform: rotate(600deg);
}
.main_con .paint5{
left:799px;
top:-1226px;
}
.moving .main_con .paint5{
transform: rotate(600deg);
}
.main_con .paint6{
left:500px;
top:-1080px;
}
.moving .main_con .paint6{
transform: rotate(500deg);
}
.points{
width:16px;
height:176px;
position: fixed;
right:20px;
top:50%;
margin-top: -88px;
}
.points li{
width:13px;
height:13px;
margin:16px 0;
border-radius: 50%;
border:1px solid #666;
/*鼠标放上去会出现手形*/
cursor:pointer;
}
.points li.active{
background-color: #666;
}
效果展示：（这几个页面放在一个gif里太大了，所以只能分成四个gif展示）
总结:
过程中遇到一个问题，在用position定位的时候我算好了left和top，但是每次出来的效果都和我想的不一样，每个特效的left和top值我都是用谷歌浏览器的开发者模式调试出来的，这花费了很长时间。今天研究了一下发现是我用错了position！
在给元素定位的时候，父级使用position：relative；子级使用position：absolute；这样就不会出现上面的问题了。如果子级使用的是position：relative就意味着同级的div在定位之后该位置的占用会影响接下来的left和top，总之之后的position就不只是根据父级元素而定的了。
上面的代码没有改，还是用的position：relative；不过下一次可不能再犯这个错误了！
jquery——整屏滚动的更多相关文章
- 整屏滚动效果 jquery.fullPage.js插件+CSS3实现
最近很流行整屏滚动的效果,无论是在PC端还是移动端,本人也借机学习了一下,主要通过jquery.funnPage.js插件+CSS3实现效果. 本人做的效果: PC端:http://demo.qpdi ...
- fullPage教程 -- 整屏滚动效果插件 fullpage详解
1.引用文件 [html] view plain copy print?在CODE上查看代码片派生到我的代码片 <link rel="stylesheet" href=&qu ...
- jQuery鼠标滚动垂直全屏切换代码
体验效果:http://hovertree.com/texiao/jquery/68/ 源码下载:http://hovertree.com/h/bjaf/f643upc4.htm 代码如下: < ...
- 【精心推荐】12款很好用的 jQuery 图片滚动插件
这里收集了12款很好用的 jQuery 图片滚动插件分享给大家.jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各 ...
- Flexslider - 响应式的 jQuery 内容滚动插件
FlexSlider 是一款轻量的响应式 jQuery 内容滚动插件,能够帮助你在项目轻松的创建漂亮的内容滚动效果.这款插件曾经连续多年入选 WDL 的年度最佳 jQuery 插件,值得大家在网站开发 ...
- Jquery控制滚动显示欢迎字幕v2
Jquery控制滚动显示欢迎字幕v2: 之前做的那个比较适合测试环境,但要套入到网站中,有两个按钮在那摆着,还是不太好看.后面对代码进行了修改,如下: 参考代码: <html> <h ...
- Jquery实现滚动显示欢迎字幕效果
Jquery控制滚动显示欢迎字幕: 参考代码: <!DOCTYPE html> <html> <head> <title>Colin Marquee W ...
- jQuery页面滚动监听事件及高级效果插件
jQuery页面滚动监听事件及高级效果插件 1. One Page scroll (只适用于上下焦点图)http://www.thepetedesign.com/demos/onepage_scrol ...
- 基于JQuery实现滚动到页面底端时自动加载更多信息
基于JQuery实现滚动到页面底端时自动加载更多信息 关键代码: 代码如下: var stop=true; $(window).scroll(function(){ totalheight = par ...
随机推荐
- VS2008中宽字节和普通字节的使用
由于麻烦,所以并没有使用宽字节,留待以后.
- Java中读取输入方式的性能比较
程序开发过程中,需要从键盘获取输入值是常有的事,但Java它偏偏就没有像c语言给我们提供的scanf(),C++给我们提供的cin()获取键盘输入值的现成函数!Java没有提供这样的函数也不代表遇到这 ...
- ZOJ1610(经典线段树涂色问题)
Description Painting some colored segments on a line, some previously painted segments may be covere ...
- 一. kafka 入门
一.基本概念 Kafka是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据.这种动作(网页浏览,搜索和其他用户的行动)是在现代网络上的许多社会功能的一个关键因素. K ...
- char与wchar_t数据类型
转自:http://blog.itpub.net/27634692/viewspace-752200/ 有的人爱用strcpy等标准ANSI函数,有的人爱用_tXXXX函数,有必要把来龙去脉搞清楚. ...
- angularJS中自定义指令
学习了angularJS一周,但是大部分时间被自定义指令占用了.博主表示自学互联网好心塞的,发现问题的视觉很狭窄,这比解决问题要更难.这篇文章首先介绍了自定义,然后介绍了在使用自定义指令遇到的问题. ...
- Random简介
Random类 (java.util) Random类中实现的随机算法是伪随机,也就是有规则的随机.在进行随机时,随机算法的起源数字称为种子数(seed),在种子数的基础上进行一定的变换,从而产生需要 ...
- rsyn文件传输
Rsync的命令格式可以为以下六种: rsync [OPTION]... SRC DEST rsync [OPTION]... SRC [USER@]HOST:DEST rsync [OPTION]. ...
- 关于UI性能优化
1.使用已经有的VIEW,而不是每次都去新生成一个 2.创建自定义类来进行组件和数据的缓存,在下一次调用的时候直接从FLAG中取出 3.分页,预加载 使用VIEWSTUB进行调用时加载 VIEWSTU ...
- Leetcode：1. Two Sum
public class TwoSum1 { public static void main(String[] args) { int[] nums = new int[]{2, 7, 11, 15} ...