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 ...
随机推荐
- 判断iOS系统的Model
获取iOS系统的Model (参考网址:https://www.theiphonewiki.com/wiki/Models) + (NSString *)getModel{ struct utsn ...
- 手动导入XMPPFramework框架
环境: Xcode 8.2.1 XMPPFramework 3.6.5 (下载地址) Objective-C (项目使用的语言,最新版的3.7.0要求convert to swift) 1.下载XMP ...
- Oracle 12C 新特性之在线重命名、迁移活跃的数据文件
Oracle 数据库 12c 版本中对数据文件的迁移或重命名不再需要太多繁琐的步骤,可以使用 ALTER DATABASE MOVE DATAFILE 这样的 SQL 语句对数据文件进行在线重命名和移 ...
- BZOJ1033：[ZJOI2008]杀蚂蚁
我对模拟的理解:https://www.cnblogs.com/AKMer/p/9064018.html 题目传送门:https://www.lydsy.com/JudgeOnline/problem ...
- Poj 1552 Doubles(水题)
一.Description As part of an arithmetic competency program, your students will be given randomly gene ...
- ng2 样式控制之style绑定和class绑定
- 报错apachectl -t
httpd: apr_sockaddr_info_get() failed for wwwhttpd: Could not reliably determine the server's fully ...
- 如何在niosII中添加i2c外设_winday_新浪博客
如何在niosII中添加i2c外设_winday_新浪博客 如何在niosII中添加i2c外设 winday 摘要:本文说明了如何在niosII添加第三方i2c外设,以供参考. 由于本人使用的Alte ...
- hive 集群初探，查询比较
在slave3安装MySQL作为hive 的matastore [root@slave3 hadoop]# yum search mysql [root@slave3 hadoop]# yum ins ...
- Xuzhou Winter Camp 1C（模拟）
#include<iostream>#include<cstdio>#include<algorithm>#include<cmath>#include ...