jQuery页面滚动监听事件及高级效果插件
1. One Page scroll （只适用于上下焦点图）
http://www.thepetedesign.com/demos/onepage_scroll_demo.html
2. Scrolld（更不好用）
https://github.com/charliegeiger89/Scrolld.js#readme
3. Animate Scroll（参数太少，不好用）
https://github.com/ramswaroop/animatescroll.js#readme
归纳地址：
http://udn.yyuap.com/thread-68533-1-1.html
onepage-scroll
demo.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>onpage-scroll</title>
<link rel="stylesheet" href="onepage-scroll.css">
<link rel="stylesheet" href="demo.css">
<script src="jquery-3.1.1.min.js"></script>
<script src="jquery.onepage-scroll.min.js"></script>
</head>
<body> <div class="wrapper">
<div class="main onepage-wrapper">
<section class="section page1">
<img src="phones.png" alt="phones">
</section>
<section class="section page2">
<img src="back-phone.png" alt="back-phone">
</section>
<section class="section page3">
<img src="tilted-phone.png" alt="tiled-phone">
</section>
</div>
</div> <script>
$(function () {
$('.main section.page1 > img ').delay(300).animate({
'right': '0'
}, 300);
}); $('.main').onepage_scroll({
sectionContainer: "section",
easing: "ease",
animationTime: 300,
pagination:true,
updateURL: false,
beforeMove: function (index) {
switch (index) {
case 1:
$('.main section.page1 > img ').css({
'right': '-300px'
});
break;
case 2:
$('.main section.page2 > img ').css({
'left': '-150px'
});
break;
case 3:
$('.main section.page3 > img ').css({
'left': '-150px'
});
default:
break;
}
},
afterMove: function (index) {
switch (index) {
case 1:
$('.main section.page1 > img ').animate({
'right': '0'
}, 300);
break;
case 2:
$('.main section.page2 > img ').animate({
'left': '0'
}, 300);
break;
case 3:
$('.main section.page3 > img ').animate({
'left': '0'
}, 300);
break;
default:
break;
}
},
loop: false,
keyboard: true,
responsiveFallback: false,
direction: "vertical"
});
</script> </body>
</html>
demo.css
html {
height: 100%;
}
body {
background: #e2e4e7;
padding:;
text-align: center;
font-family: 'open sans';
position: relative;
margin:;
height: 100%;
-webkit-font-smoothing: antialiased;
}
.wrapper {
height: 100% !important;
margin: 0 auto;
overflow: hidden;
}
.main {
width: 100%;
float: left;
margin: 0 auto;
}
.onepage-wrapper {
width: 100%;
height: 100%;
display: block;
}
.onepage-wrapper .section {
width: 100%;
height: 100%;
}
.main section.page1 {
background: rgb(230, 217, 200);
}
.main section.page2 {
background: #555557 no-repeat center;
}
.main section.page3 {
background: no-repeat;
}
.main section.page1 > img {
position: absolute;
right: -300px;
}
.main section.page2 > img {
position: absolute;
left: -150px;
}
.main section.page3 > img {
position: absolute;
left: 156px;
}
项目地址：