以下是 jQuery鼠标滚轮滑动到页面节点部分滚动特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>jQuery鼠标滚轮滑动到页面节点部分</title>
<!--[if lt IE 9]>
<script src="html5shiv.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section class="panel home" data-section-name="home">
<div class="inner">
<div style="text-algin:center;margin:10px auto"><script src="/js/ad_js/bd_76090.js" type="text/javascript"></script></div><br/>
<a href="#overview" class="scroll">滑动鼠标滚轮</a>
</div>
</section>
<section class="panel overview" data-section-name="overview">
<div class="inner">
<h2>基本使用</h2>
<p>需要引入 jQuery 1.6+ 以及缓冲动画插件jquery.easing.js.</p>
<pre>
<! doctype html>
<html>
<head>
<script>
$(function() {
$.scrollify({
section : "section",
});
});
</script>
</head>
<body>
<section></section>
<section></section>
</body>
</html>
</pre>
</div>
</section>
<section class="panel configuration" data-section-name="configuration">
<div class="inner">
<h2>配置</h2>
<pre>
$.scrollify({
section : "section",
sectionName : "section-name",
easing: "easeOutExpo",
scrollSpeed: 1100,
offset : 0,
scrollbars: true,
before:function() {},
after:function() {}
});
</pre>
</div>
</section>
<section class="panel options" data-section-name="options">
<div class="inner">
<h2>选项设置</h2>
<dl>
<dt>section</dt>
<dd>节点部分选择器.</dd>
<dt>sectionName</dt>
<dd>每一个section节点对应的data属性.</dd>
<dt>easing</dt>
<dd>定义缓冲动画.</dd>
<dt>offset</dt>
<dd>定义每个色彩tion节点的偏移量.</dd>
<dt>scrollbars</dt>
<dd>是否显示滚动条.</dd>
<dt>before</dt>
<dd>回调函数,滚动开始前触发.</dd>
<dt>after</dt>
<dd>回调函数,滚动完成后触发.</dd>
</dl>
</div>
</section>
<section class="panel methods" data-section-name="methods">
<div class="inner">
<h2>方法</h2>
<p>滑动到指定的节点。</p>
<pre>
$.scrollify("move","#name");
</pre>
<div style="text-algin:center;margin:10px auto"><script src="/js/ad_js/bd_76090.js" type="text/javascript"></script></div><br/>
</div>
</section>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/jquery.scrollify.min.js"></script>
<script>
$(function() {
$(".panel").css({"height":$(window).height()});
var timer;
$(window).resize(function() {
clearTimeout(timer);
timer = setTimeout(function() {
$(".panel").css({"height":$(window).height()});
},40);
});
$.scrollify({
section:".panel"
});
$(".scroll").click(function(e) {
e.preventDefault();
$.scrollify("move",$(this).attr("href"));
});
});
</script>
</body>
</html>
JS代码(jquery.scrollify.min.js):
(function(e,t,n,r){
"use strict";
var i=[],s=[],o=[],u=0,a=t.location.hash,f=false,l,c,h=e(t).scrollTop(),p=false,d={
section:"section",sectionName:"section-name",easing:"easeOutExpo",scrollSpeed:1100,offset:0,scrollbars:true,axis:"y",target:"html,body",before:function(){
}
,after:function(){
}
}
;
e.scrollify=function(r){
function a(n){
if(s[n]){
d.before(n,o);
if(d.sectionName){
t.location.hash=s[n]}
e(d.target).stop().animate({
scrollTop:i[n]}
,d.scrollSpeed,d.easing);
e(d.target).promise().done(function(){
d.after(n,o)}
)}
}
function y(n){
e(d.section).each(function(n){
if(n>0){
i[n]=e(this).offset().top+d.offset}
else{
i[n]=e(this).offset().top}
if(d.sectionName&&e(this).data(d.sectionName)){
s[n]="#"+e(this).data(d.sectionName).replace(/ /g,"-")}
else{
s[n]="#"+(n+1)}
o[n]=e(this);
if(t.location.hash===s[n]){
u=n;
f=true}
}
);
if(true===n){
a(u)}
}
var v={
handleMousedown:function(){
p=false}
,handleMouseup:function(){
p=true}
,handleScroll:function(){
if(l){
clearTimeout(l)}
l=setTimeout(function(){
h=e(t).scrollTop();
if(p===false){
return false}
p=false;
var n=1,r=i.length,s=0,o=Math.abs(i[0]-h),f;
for(;
n<r;
n++){
f=Math.abs(i[n]-h);
if(f<o){
o=f;
s=n}
}
u=s;
a(s)}
,200)}
,wheelHandler:function(e,t){
e.preventDefault();
t=t||-e.originalEvent.detail/3||e.originalEvent.wheelDelta/120;
clearTimeout(l);
l=setTimeout(function(){
if(t<0){
if(u<i.length-1){
u++}
}
else if(t>0){
if(u>0){
u--}
}
if(u>=0){
a(u)}
else{
u=0}
}
,50)}
,keyHandler:function(e){
e.preventDefault();
if(e.keyCode==38){
if(u>0){
u--}
a(u)}
else if(e.keyCode==40){
if(u<i.length-1){
u++}
a(u)}
}
,init:function(){
if(d.scrollbars){
e(t).bind("mousedown",v.handleMousedown);
e(t).bind("mouseup",v.handleMouseup);
e(t).bind("scroll",v.handleScroll)}
else{
e("body").css({
overflow:"hidden"}
)}
e(n).bind("DOMMouseScroll mousewheel",v.wheelHandler);
e(n).bind("keyup",v.keyHandler)}
}
;
var m={
touches:{
touchstart:{
y:-1}
,touchmove:{
y:-1}
,touchend:false,direction:"undetermined"}
,options:{
distance:30,timeGap:800,timeStamp:(new Date).getTime()}
,touchHandler:function(e){
var t;
if(typeof e!=="undefined"){
if(typeof e.touches!=="undefined"){
t=e.touches[0];
switch(e.type){
case"touchstart":m.touches.touchstart.y=t.pageY;
m.touches.touchmove.y=-1;
m.options.timeStamp=(new Date).getTime();
m.touches.touchend=false;
case"touchmove":m.touches.touchmove.y=t.pageY;
if(m.touches.touchstart.y!==m.touches.touchmove.y){
e.preventDefault();
if(m.options.timeStamp+m.options.timeGap<(new Date).getTime()&&m.touches.touchend==false){
m.touches.touchend=true;
if(m.touches.touchstart.y>-1){
if(Math.abs(m.touches.touchmove.y-m.touches.touchstart.y)>m.options.distance){
if(m.touches.touchstart.y<m.touches.touchmove.y){
if(u>0){
u--}
a(u)}
else{
if(u<i.length-1){
u++}
a(u)}
}
}
}
}
break;
case"touchend":if(m.touches[e.type]===false){
m.touches[e.type]=true;
if(m.touches.touchstart.y>-1&&m.touches.touchmove.y>-1){
if(Math.abs(m.touches.touchmove.y-m.touches.touchstart.y)>m.options.distance){
if(m.touches.touchstart.y<m.touches.touchmove.y){
if(u>0){
u--}
a(u)}
else{
if(u<i.length-1){
u++}
a(u)}
}
m.touches.touchstart.y=-1}
}
;
default:break}
}
}
}
,init:function(){
if(n.addEventListener){
n.addEventListener("touchstart",m.touchHandler,false);
n.addEventListener("touchmove",m.touchHandler,false);
n.addEventListener("touchend",m.touchHandler,false)}
}
}
;
if(typeof r==="string"){
var g=s.length;
for(;
g>=0;
g--){
if(typeof arguments[1]==="string"){
if(s[g]==arguments[1]){
u=g;
a(g)}
}
else{
if(g===arguments[1]){
u=g;
a(g)}
}
}
}
else{
d=e.extend(d,r);
y(false);
if(f===false&&d.sectionName){
t.location.hash=s[0]}
else{
a(u)}
v.init();
m.init()}
e(t).resize(function(){
clearTimeout(c);
c=setTimeout(function(){
y(true)}
,50)}
)}
}
)(jQuery,this,document)CSS代码(style.css):
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License:none (public domain)*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
/****** Main ********/
body{font-size:62.5%;font-family:"Microsoft Yahei",Tahoma,Helvetica,Arial,sans-serif;color:#FFF;}
h1{font-size:7em;padding:1.4em 0 0 0;}
h2{font-size:6em;padding:0.5em 0 0.5em 0;}
h3{font-size:2.3em;}
dt{font-size:2.3em;}
dd{font-size:1.9em;padding:0.6em 0 0.9em 0;}
p{font-size:1.9em;padding:0.4em 0 0.4em 0;}
a:link,a:visited{color:#FFF;text-decoration:none;}
a:hover,a:focus,a:active{text-decoration:underline;}
a.back:link,a.back:visited,a.twitter:link,a.twitter:visited{font-size:1.3em;line-height:4em;position:absolute;left:40px;bottom:25px;}
a.back:link,a.back:visited{bottom:auto;top:0px;}
a.twitter img{border-radius:50%;float:left;border:1px solid #bbb;padding:0.1em;background:#FFF;}
a.twitter span{padding:0 0 0 0.6em;}
header{padding-bottom:5em;}
.scroll{position:relative;font-size:1.3em;margin-top:20px;display:inline-block;}
.scroll:hover{text-decoration:none;}
.scroll:after{content:'';width:40px;height:40px;position:absolute;top:40px;margin:auto;top:50px;right:0;bottom:0;left:0;-webkit-animation:3s arrow infinite ease;animation:3s arrow infinite ease;}
.scroll:after{border-right:2px solid #FFF;border-bottom:2px solid #FFF;-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg);}
.tagline{font-size:2.3em;letter-spacing:0.02em;padding:0;}
.tagline a{text-decoration:underline}
.panel{height:100vh;border-bottom:1px solid #666;}
.home{background:#65c2cf;background:hsl(184,65%,49%);text-align:center;}
.overview{background:#e14456;background:hsl(350,92%,59%);}
.configuration{background:#6dcb94;background:hsl(158,58%,52%);}
.options{background:#ec8200;background:hsl(28,100%,52%);}
.methods{background:#64a0d4;background:hsl(200,60%,55%);}
.inner{width:960px;margin:0 auto;}
pre{background:rgba(0,0,0,0.2);padding:2em 0 2em 0;font-size:2.1em;margin-top:0.7em;}
@-webkit-keyframes arrow{0%,100%{top:50px;}
50%{top:80px;}
}
@keyframes arrow{0%,100%{top:50px;}
50%{top:80px;}
}
#carbonads{width:330px;margin:20px auto;font-size:1.3em;line-height:1.4;border:1px solid rgba(255,255,255,0.3);overflow:hidden;border-radius:8px;padding:10px 0 10px 10px;}
#carbonads a{float:left;text-align:left;}
#carbonads .carbon-text{width:180px;}
#carbonads .carbon-poweredby{margin-top:7px;}
#carbonads .carbon-text,#carbonads .carbon-poweredby{padding:0 9px;}
@media (max-width:960px){.inner{width:100%;}
h1,h2,h3,p,pre,dl{margin-left:30px;margin-right:30px;}
}
分享到QQ
分享到微博
微信扫一扫
