css部分：
<style>
.demo{width:300px; margin:60px auto 10px auto;text-align:center}
@media only screen and (min-width: 420px) {
.demo{width:500px; margin:60px auto 10px auto}
}
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:580px;
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;
}
}
</style>
html部分：
<!--[if lt IE 9]>
<script src="../../../../js/html5shiv.min.js"></script>
<![endif]-->
<section class="panel home" data-section-name="home">
<div class="inner">
<header>
<h1 class="company_bottom">SCROLLIFY</h1>
</header>
<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+ 以及缓冲动画插件<a href="#" >jquery.easing.js</a>.</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"></div><br/>
</div>
</section>
js部分：（此处需要引入jquery.js、easing.js和scrollify.js ）
<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"),easingeaseInOutBounce());
});
});
</script>
时间： 2024-08-03 06:16:39