以下是 横向jQuery内容滚动插件Sly特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Sly - jQuery plugin</title>
<meta name="description" content="jQuery plugin for one-directional scrolling with item based navigation support.">
<meta name="viewport" content="width=device-width">
<!--<link href='http://fonts.googleapis.com/css?family=Exo:700' rel='stylesheet' type='text/css'>-->
<link rel="stylesheet" href="css/style.css">
</head>
<body id="top">
<div id="header">
<div class="container">
<h1>Sly</h1>
<p>jQuery plugin for one-directional scrolling with item based navigation support</p>
<div class="download">
<h4>Download latest</h4>
<a href="//github.com/Darsain/sly/raw/master/jquery.sly.js" class="left"><span>Development</span></a>
<a href="//github.com/Darsain/sly/raw/master/jquery.sly.min.js" class="right"><span>Production</span></a>
</div>
<a href="//github.com/Darsain/sly" class="repo ir">Repository & Documentation on Github</a>
<ul id="nav" class="clearfix">
<li><a href="#horizontal">Horizontal</a></li>
<li><a href="#vertical">Vertical</a></li>
<li><a href="#infinite">Infinite scroll</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="sections" class="container">
<div id="horizontal">
<div class="slyWrap example1">
<div class="scrollbar">
<div class="handle"></div>
</div>
<div class="sly" data-options='{ "horizontal": 1, "itemNav": "basic", "dragContent": 1, "startAt": 3, "scrollBy": 1 }'>
<ul class="big cfix" data-items="30"></ul>
</div>
<ul class="pages"></ul>
<div class="controls btn-toolbar">
<div class="btn-group">
<button class="btn prev">« prev</button>
<button class="btn next">next »</button>
</div>
<div class="btn-group">
<button class="btn prevPage">« prevPage</button>
<button class="btn nextPage">nextPage »</button>
</div>
<div class="btn-group">
<button class="btn" data-action="toStart">toStart</button>
<button class="btn" data-action="toCenter">toCenter</button>
<button class="btn" data-action="toEnd">toEnd</button>
</div>
<div class="btn-group">
<button class="btn" data-action="toStart" data-arg="10"><strong>10</strong> toStart</button>
<button class="btn" data-action="toCenter" data-arg="10"><strong>10</strong> toCenter</button>
<button class="btn" data-action="toEnd" data-arg="10"><strong>10</strong> toEnd</button>
</div>
<div class="btn-group">
<button class="btn" data-action="add">Add item</button>
<button class="btn" data-action="remove">Remove item</button>
</div>
</div>
<pre class="prettyprint lang-js">
$frame.sly({
horizontal: 1,
itemNav: "basic",
dragContent: 1,
startAt: 3,
scrollBy: 1
});
</pre>
</div>
<hr>
<div class="slyWrap example1">
<div class="scrollbar">
<div class="handle"></div>
</div>
<div class="sly" data-options='{ "horizontal": 1, "itemNav": "smart", "dragContent": 1, "startAt": 3, "scrollBy": 1 }'>
<ul class="big cfix" data-items="30"></ul>
</div>
<ul class="pages"></ul>
<div class="controls btn-toolbar">
<div class="btn-group">
<button class="btn prev">« prev</button>
<button class="btn next">next »</button>
</div>
<div class="btn-group">
<button class="btn prevPage">« prevPage</button>
<button class="btn nextPage">nextPage »</button>
</div>
<div class="btn-group">
<button class="btn" data-action="toStart">toStart</button>
<button class="btn" data-action="toCenter">toCenter</button>
<button class="btn" data-action="toEnd">toEnd</button>
</div>
<div class="btn-group">
<button class="btn" data-action="toStart" data-arg="10"><strong>10</strong> toStart</button>
<button class="btn" data-action="toCenter" data-arg="10"><strong>10</strong> toCenter</button>
<button class="btn" data-action="toEnd" data-arg="10"><strong>10</strong> toEnd</button>
</div>
<div class="btn-group">
<button class="btn" data-action="add">Add item</button>
<button class="btn" data-action="remove">Remove item</button>
</div>
</div>
<pre class="prettyprint lang-js">
$frame.sly({
horizontal: 1,
itemNav: "smart",
dragContent: 1,
startAt: 3,
scrollBy: 1
});
</pre>
</div>
<hr>
<div class="slyWrap example2">
<div class="scrollbar">
<div class="handle"></div>
</div>
<div class="sly" data-options='{ "horizontal": 1, "itemNav": "centered", "dragContent": 1, "scrollBy": 1 }'>
<ul class="big cfix" data-items="30"></ul>
</div>
<ul class="pages"></ul>
<div class="controls btn-toolbar">
<div class="btn-group">
<button class="btn prev">« prev</button>
<button class="btn next">next »</button>
</div>
<div class="btn-group">
<button class="btn prevPage">« prevPage</button>
<button class="btn nextPage">nextPage »</button>
</div>
<div class="btn-group">
<button class="btn" data-action="toStart">toStart</button>
<button class="btn" data-action="toCenter">toCenter</button>
<button class="btn" data-action="toEnd">toEnd</button>
</div>
<div class="btn-group">
<button class="btn" data-action="toCenter" data-arg="10"><strong>10</strong> toCenter</button>
</div>
<div class="btn-group">
<button class="btn" data-action="add">Add item</button>
<button class="btn" data-action="remove">Remove item</button>
</div>
</div>
<pre class="prettyprint lang-js">
$frame.sly({
horizontal: 1,
itemNav: "centered",
dragContent: 1,
scrollBy: 1
});
</pre>
</div>
<hr>
<div class="slyWrap example2">
<div class="scrollbar">
<div class="handle"></div>
</div>
<div class="sly" data-options='{ "horizontal": 1, "itemNav": "forceCentered", "dragContent": 1, "scrollBy": 1, "easing": "easeOutBack" }'>
<ul class="big cfix" data-items="10"></ul>
</div>
<ul class="pages"></ul>
<div class="controls btn-toolbar">
<div class="btn-group">
<button class="btn prev">« prev</button>
<button class="btn next">next »</button>
</div>
<div class="btn-group">
<button class="btn prevPage">« prevPage</button>
<button class="btn nextPage">nextPage »</button>
</div>
<div class="btn-group">
<button class="btn" data-action="toStart">toStart</button>
<button class="btn" data-action="toCenter">toCenter</button>
<button class="btn" data-action="toEnd">toEnd</button>
</div>
<div class="btn-group">
<button class="btn" data-action="toCenter" data-arg="5"><strong>5</strong> toCenter</button>
</div>
<div class="btn-group">
<button class="btn" data-action="add">Add item</button>
<button class="btn" data-action="remove">Remove item</button>
</div>
</div>
<pre class="prettyprint lang-js">
$frame.sly({
horizontal: 1,
itemNav: "forceCentered",
dragContent: 1,
scrollBy: 1,
easing: "easeOutBack" // with jQuery easing v1.3
});
</pre>
</div>
<hr>
<div class="slyWrap example3">
<div class="scrollbar">
<div class="handle"></div>
</div>
<div class="sly" data-options='{ "horizontal": 1, "itemNav": "basic", "dragContent": 1, "scrollBy": 1, "cycleBy": "pages", "cycleInterval": 2000, "startPaused": 1 }'>
<ul class="big cfix" data-items="10"></ul>
</div>
<ul class="pages"></ul>
<div class="controls btn-toolbar">
<div class="btn-group">
<button class="btn btn-green" data-action="cycle">Start cycle</button>
<button class="btn btn-green " data-action="cycle" data-arg="1">Pause</button>
</div>
<div class="btn-group">
<button class="btn prevPage">« prevPage</button>
<button class="btn nextPage">nextPage »</button>
</div>
<div class="btn-group">
<button class="btn" data-action="toStart">toStart</button>
<button class="btn" data-action="toCenter">toCenter</button>
<button class="btn" data-action="toEnd">toEnd</button>
</div>
<div class="btn-group">
<button class="btn" data-action="toStart" data-arg="5"><strong>5</strong> toStart</button>
<button class="btn" data-action="toCenter" data-arg="5"><strong>5</strong> toCenter</button>
<button class="btn" data-action="toEnd" data-arg="5"><strong>5</strong> toEnd</button>
</div>
<div class="btn-group">
<button class="btn" data-action="add">Add item</button>
<button class="btn" data-action="remove">Remove item</button>
</div>
</div>
<pre class="prettyprint lang-js">
$frame.sly({
horizontal: 1,
itemNav: "basic",
dragContent: 1,
scrollBy: 1,
cycleBy: 'pages',
cycleInterval: 2000,
startPaused: 1
});
</pre>
</div>
<hr>
<div class="slyWrap example4">
<div class="sly" data-options='{ "horizontal": 1, "itemNav": "forceCentered", "cycleBy": "items", "cycleInterval": 2000 }'>
<ul class="big cfix">
<li>
<h3>Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
pellentesque eu, pretium quis, sem.</p>
</li>
<li>
<h3>Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
pellentesque eu, pretium quis, sem.</p>
</li>
<li>
<h3>Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
pellentesque eu, pretium quis, sem.</p>
</li>
<li>
<h3>Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
pellentesque eu, pretium quis, sem.</p>
</li>
<li>
<h3>Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
pellentesque eu, pretium quis, sem.</p>
</li>
<li>
<h3>Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
pellentesque eu, pretium quis, sem.</p>
</li>
<li>
<h3>Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
pellentesque eu, pretium quis, sem.</p>
</li>
</ul>
</div>
<ul class="pages"></ul>
<div class="controls btn-toolbar">
<div class="btn-group">
<button class="btn btn-green" data-action="cycle">Resume</button>
<button class="btn btn-green" data-action="cycle" data-arg="1">Pause</button>
</div>
<div class="btn-group">
<button class="btn prev">« prev</button>
<button class="btn next">next »</button>
</div>
<div class="btn-group">
<button class="btn prevPage">« prevPage</button>
<button class="btn nextPage">nextPage »</button>
</div>
<div class="btn-group">
<button class="btn" data-action="toStart">toStart</button>
<button class="btn" data-action="toCenter">toCenter</button>
<button class="btn" data-action="toEnd">toEnd</button>
</div>
</div>
<pre class="prettyprint lang-js">
$frame.sly({
horizontal: 1,
itemNav: 'forceCentered',
cycleBy: 'items',
cycleInterval: 2000
});
</pre>
</div>
</div><!--end:#horizontal-->
<div id="vertical" class="clearfix">
<div class="slyWrap example1">
<div class="scrollbar">
<div class="handle"></div>
</div>
<div class="sly" data-options='{ "itemNav": "smart", "dragContent": 1, "startAt": 10, "scrollBy": 1, "elasticBounds": 1 }'>
<ul class="big cfix" data-items="30"></ul>
</div>
<ul class="pages"></ul>
<div class="controls btn-toolbar">
<div class="btn-group">
<button class="btn prev">« prev</button>
<button class="btn next">next »</button>
</div>
<div class="btn-group">
<button class="btn prevPage">« prevPage</button>
<button class="btn nextPage">nextPage »</button>
</div>
<div class="btn-group">
<button class="btn" data-action="toStart">toStart</button>
<button class="btn" data-action="toCenter">toCenter</button>
<button class="btn" data-action="toEnd">toEnd</button>
</div>
<div class="btn-group">
<button class="btn" data-action="add">Add item</button>
<button class="btn" data-action="remove">Remove item</button>
</div>
</div>
<pre class="prettyprint lang-js">
$frame.sly({
itemNav: "smart",
dragContent: 1,
startAt: 10,
scrollBy: 1,
elasticBounds: 1
});
</pre>
</div>
<div class="slyWrap example2">
<div class="scrollbar">
<div class="handle"></div>
</div>
<div class="sly" data-options='{ "scrollBy": 100, "startAt": 200 }'>
<div>
<h1>Lorem ipsum dolor</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
<em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.
Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt
condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue.
Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus,
at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</pre>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h4>Header Level 4</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<ul class="pages"></ul>
<div class="controls btn-toolbar">
<div class="btn-group">
<button class="btn prevPage">« prevPage</button>
<button class="btn nextPage">nextPage »</button>
</div>
<div class="btn-group">
<button class="btn" data-action="toStart">toStart</button>
<button class="btn" data-action="toCenter">toCenter</button>
<button class="btn" data-action="toEnd">toEnd</button>
</div>
<div class="btn-group">
<button class="btn" data-action="toStart" data-arg="h3"><strong>H3</strong> toStart</button>
<button class="btn" data-action="toCenter" data-arg="h3"><strong>H3</strong> toCenter</button>
<button class="btn" data-action="toEnd" data-arg="h3"><strong>H3</strong> toEnd</button>
</div>
</div>
<pre class="prettyprint lang-js">
$frame.sly({
scrollBy: 100,
startAt: 100
});
</pre>
</div>
</div><!--end:#vertical-->
<div id="infinite">
<div class="controlbar clearfix">
<button class="btn btn-black fright" data-action="toStart">Back to top ↑</button>
<button class="btn btn-red" data-action="reset">Reset to original state</button>
</div>
<hr>
<div class="frameWrap">
<div class="frame">
<ul class="clearfix"></ul>
</div>
<div class="scrollbar">
<div class="handle"></div>
</div>
</div>
<pre class="prettyprint lang-js">
$frame.on('sly:move', function( e, pos ){
// If close to end, append new items
if( pos.cur > pos.max - 100 ){
populate( $ul, 10);
$frame.sly('reload');
}
}).sly({ itemNav: 'basic', scrollBy: 1 });
</pre>
</div><!--end:#infinite-->
</div><!--end:#sections-->
</div><!--end:#content-->
<div style="text-align:center">
<p>{download}</p>
<p>{content}</p>
<p>{google_729x90}</p>
</div>
<div id="footer">
<div class="container">
<span class="fright"><a href="#top">Back to top ↑</a></span>
<p>Licensed under the <a href="http://www.opensource.org/licenses/MIT">MIT license</a>.</p>
</div>
</div>
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.7.2.min.js"><\/script>')</script>
<!-- scripts -->
<script src="jquery.sly.js"></script>
<script src="js/vendor/plugins.js"></script>
<script src="js/main.js"></script>
<!-- end scripts -->
</body>
</html>
JS代码(jquery.sly.min.js):
(function(f,x){
function S(M,b){
function i(a,r,s){
s=G(s)?s:b.speed;
r&&w&&(r=T(a),F?(a=l[r.centerItem].offCenter,g[B?"activate":"toCenter"](r.centerItem,1)):a>c.min&&a<c.max&&(a=l[r.firstItem].offStart));
if(!D||!b.elasticBounds)a=a<c.min?c.min:a,a=a>c.max?c.max:a;
a!==c.cur&&(c.cur=a,f.extend(d,T(c.cur)),U(),V(),!D&&j.trigger(o+":move",[c,m,d]),a=b.horizontal?{
left:-c.cur+"px"}
:{
top:-c.cur+"px"}
,16<s?h.animate(a,s,D?"swing":b.easing,function(){
!D&&j.trigger(o+":moveEnd",[c,m,d])}
):(h.css(a),!D&&j.trigger(o+":moveEnd",[c,m,d])))}
function z(a){
p&&(e.cur=Math.round((c.cur-c.min)/(c.max-c.min)*e.max),e.cur=e.cur<e.min?e.min:e.cur>e.max?e.max:e.cur,p.stop().animate(b.horizontal?{
left:e.cur+"px"}
:{
top:e.cur+"px"}
,G(a)?a:b.speed,b.easing));
X()}
function X(){
N.length&&N.removeClass(b.activeClass).eq(d.activePage).addClass(b.activeClass)}
function V(){
h.add(p).stop()}
function E(a){
return G(a)?0>a?0:a>l.length-1?l.length-1:a:a===x?-1:m.index(a)}
function n(a,b){
return parseInt(a.css(b),10)}
function T(a){
for(var b={
}
,s=B?0:t/2,d=0;
d<u.length;
d++){
if(a>=c.max||d===u.length-1){
b.activePage=u.length-1;
break}
if(a<=u[d]+s){
b.activePage=d;
break}
}
if(w){
for(var f=d=s=!1,e=0;
e<l.length;
e++){
!1===s&&a<=l[e].offStart&&(s=e);
!1===f&&a-l[e].size/2<=l[e].offCenter&&(f=e);
if(e===l.length-1||!1===d&&a<l[e+1].offEnd)d=e;
if(!1!==d)break}
b.firstItem=G(s)?s:0;
b.centerItem=G(f)?f:b.firstItem;
b.lastItem=G(d)?d:b.centerItem}
return b}
function U(){
if(w){
var a=0===d.activeItem,r=d.activeItem>=l.length-1;
H.is("button,input")&&H.prop("disabled",a);
I.is("button,input")&&I.prop("disabled",r);
H[a?"removeClass":"addClass"](b.disabledClass);
I[r?"removeClass":"addClass"](b.disabledClass)}
N.length&&(a=c.cur<=c.min,r=c.cur>=c.max,O.is("button,input")&&O.prop("disabled",a),P.is("button,input")&&P.prop("disabled",r),O[a?"removeClass":"addClass"](b.disabledClass),P[r?"removeClass":"addClass"](b.disabledClass))}
function v(a,b){
var c=a||window.event;
c.preventDefault?c.preventDefault():c.returnValue=!1;
b&&c.stopPropagation?c.stopPropagation():c.cancelBubble=!0}
function G(a){
return!isNaN(parseFloat(a))&&isFinite(a)}
var g=this,j=f(M),h=j.children().eq(0),t=0,k=0,c={
cur:0,max:0,min:0}
,J=f(b.scrollBar).eq(0),p=J.length?J.children().eq(0):0,K=0,A=0,e={
cur:0,max:0,min:0}
,W=f(b.pagesBar),N=0,u=[],Y="smart"===b.itemNav,B="forceCentered"===b.itemNav,F="centered"===b.itemNav||B,w="basic"===b.itemNav||Y||F||B,m=0,l=[],d={
firstItem:0,lastItem:1,centerItem:1,activeItem:-1,activePage:0,items:0,pages:0}
,Z=b.scrollSource?f(b.scrollSource):j,S=b.dragSource?f(b.dragSource):j,H=f(b.prev),I=f(b.next),O=f(b.prevPage),P=f(b.nextPage),L=0,$=0,D=0,fa=this.reload=function(){
var a=0,r=f.extend({
}
,c);
clearTimeout(L);
t=b.horizontal?j.width():j.height();
K=b.horizontal?J.width():J.height();
k=b.horizontal?h.outerWidth():h.outerHeight();
m=h.children();
l=[];
u=[];
c.min=0;
c.max=k>t?k-t:0;
d.items=m.length;
if(w){
var s=n(m,b.horizontal?"marginLeft":"marginTop"),C=n(m.slice(-1),b.horizontal?"marginRight":"marginBottom"),v=0,M=n(h,b.horizontal?"paddingLeft":"paddingTop"),ba=n(h,b.horizontal?"paddingRight":"paddingBottom"),ca="none"!==m.css("float"),a=s?0:C;
k=0;
m.each(function(a,c){
var d=f(c),r=b.horizontal?d.outerWidth(!0):d.outerHeight(!0),e=n(d,"marginTop"),i=n(d,"marginBottom"),g=n(d,"marginLeft"),d=n(d,"marginRight"),g={
size:r,offStart:k-(!a||b.horizontal?0:e),offCenter:k-Math.round(t/2-r/2),offEnd:k-t+r-(s?0:d),margins:{
top:e,bottom:i,left:g,right:d}
}
;
a||(v=-(B?Math.round(t/2-r/2):0)+M,k+=M);
k+=r;
!b.horizontal&&!ca&&i&&(e&&0<a)&&(k-=e<i?e:i);
a===m.length-1&&(k+=ba);
l.push(g)}
);
h.css(b.horizontal?{
width:k+"px"}
:{
height:k+"px"}
);
k-=a;
c.min=v;
c.max=B?l[l.length-1].offCenter:k>t?k-t:0;
d.activeItem>=l.length&&g.activate(l.length-1)}
f.extend(d,T(c.cur));
p&&(A=b.dynamicHandle?Math.round(K*t/k):b.horizontal?p.width():p.height(),A=A>K?K:A,A=A<b.minHandleSize?b.minHandleSize:A,e.max=K-A,p.css(b.horizontal?{
width:A+"px"}
:{
height:A+"px"}
));
var y=0,C="",ea=0;
if(B)u=f.map(l,function(a){
return a.offCenter}
);
else for(;
y-t<c.max;
){
var aa=y>c.max?c.max:y;
u.push(aa);
y+=t;
if(y>c.max&&w&&c.max-aa<(l[l.length-1].size-a)/2){
u[u.length-1]=c.max;
break}
}
if(W.length){
for(a=0;
a<u.length;
a++)C+=b.pageBuilder(ea++);
N=f(C).bind("click."+q,function(){
g.activatePage(N.index(this))}
).appendTo(W.empty())}
m.unbind("."+q).bind("mouseup."+q,function(a){
a.which===1&&!D&&g.activate(this)}
);
c.cur<c.min&&i(c.min);
c.cur>c.max&&i(c.max);
d.pages=u.length;
d.slideeSize=k;
d.frameSize=t;
d.sbSize=K;
d.handleSize=A;
z(0);
U();
w&&b.cycleBy&&(C="mouseenter."+q+" mouseleave."+q,b.pauseOnHover&&j.unbind(C).bind(C,function(a){
!$&&g.cycle(a.type==="mouseenter",1)}
),g.cycle(b.startPaused));
j.trigger(o+":load",[f.extend({
}
,c,{
old:r}
),m,d])}
;
this.prev=function(){
g.activate(d.activeItem-1)}
;
this.next=function(){
g.activate(d.activeItem+1)}
;
this.prevPage=function(){
g.activatePage(d.activePage-1)}
;
this.nextPage=function(){
g.activatePage(d.activePage+1)}
;
this.toStart=function(a){
if(w){
var d=E(a);
if(a===x)i(c.min,1);
else if(-1!==d){
if(F)return;
-1!==d&&i(l[d].offStart)}
}
else a===x?i(c.min):(a=h.find(a).eq(0),a.length&&(a=b.horizontal?a.offset().left-h.offset().left:a.offset().top-h.offset().top,i(a)));
z()}
;
this.toEnd=function(a){
if(w){
var d=E(a);
if(a===x)i(c.max,1);
else if(-1!==d){
if(F)return;
i(l[d].offEnd)}
}
else a===x?i(c.max):(a=h.find(a).eq(0),a.length&&(d=b.horizontal?a.offset().left-h.offset().left:a.offset().top-h.offset().top,i(d-t+a[b.horizontal?"outerWidth":"outerHeight"]())));
z()}
;
this.toCenter=function(a){
if(w){
var d=E(a);
a===x?i(Math.round(c.max/2+c.min/2),1):-1!==d&&(i(l[d].offCenter),B&&g.activate(d,1))}
else a===x?i(Math.round(c.max/2)):(a=h.find(a).eq(0),a.length&&(d=b.horizontal?a.offset().left-h.offset().left:a.offset().top-h.offset().top,i(d-t/2+a[b.horizontal?"outerWidth":"outerHeight"]()/2)));
z()}
;
this.activate=function(a,c){
if(w&&a!==x){
var e=E(a),f=d.activeItem;
d.activeItem=e;
m.removeClass(b.activeClass).eq(e).addClass(b.activeClass);
e!==f&&m.eq(e).trigger(o+":active",[m,d]);
c||(F?g.toCenter(e):Y&&(e>=d.lastItem?g.toStart(e):e<=d.firstItem&&g.toEnd(e)));
U()}
}
;
this.activatePage=function(a){
a=0>a?0:a>=u.length?u.length-1:a;
i(u[a],w);
z()}
;
this.cycle=function(a,e){
w&&b.cycleBy&&(e||($=!!a),a?L&&(L=clearTimeout(L),j.trigger(o+":cyclePause",[c,m,d])):L||(j.trigger(o+":cycleStart",[c,m,d]),function C(){
0!==b.cycleInterval&&(L=setTimeout(function(){
if(!D)switch(b.cycleBy){
case "items":g.activate(d.activeItem>=l.length-1?0:d.activeItem+1);
break;
case "pages":g.activatePage(d.activePage>=u.length-1?0:d.activePage+1)}
j.trigger(o+":cycle",[c,m,d]);
C()}
,b.cycleInterval))}
()))}
;
this.set=function(a,c){
f.isPlainObject(a)?b=f.extend({
}
,b,a):"string"===typeof a&&(b[a]=c)}
;
this.destroy=function(){
j.add(document).add(h).add(m).add(Z).add(p).add(H).add(I).add(O).add(P).unbind("."+q);
h.add(p).css(b.horizontal?{
left:0}
:{
top:0}
);
H.add(I).removeClass(b.disabledClass);
W.empty();
f.removeData(M,q)}
;
var Q=f(document),R="mousemove."+q+" mouseup."+q,b=f.extend({
}
,f.fn[o].defaults,b);
"static"===j.css({
overflow:"hidden"}
).css("position")&&j.css({
position:"relative"}
);
"static"===J.css("position")&&J.css({
position:"relative"}
);
h.add(p).css(b.horizontal?{
position:"absolute",left:0}
:{
position:"absolute",top:0}
);
fa();
w?g.activate(b.startAt):i(b.startAt);
z();
b.scrollBy&&Z.bind("DOMMouseScroll."+q+" mousewheel."+q,function(a){
if(c.min!==c.max){
v(a,1);
var a=a.originalEvent,e=0;
a.wheelDelta&&(e=a.wheelDelta/120);
a.detail&&(e=-a.detail/3);
a=0>e;
w?(a=E((F?B?d.activeItem:d.centerItem:d.firstItem)+(a?b.scrollBy:-b.scrollBy)),g[F?B?"activate":"toCenter":"toStart"](a)):i(c.cur+(a?b.scrollBy:-b.scrollBy));
z()}
}
);
b.keyboardNav&&Q.bind("keydown."+q,function(a){
switch(a.keyCode||a.which){
case b.horizontal?37:38:v(a);
b.keyboardNavByPages?g.prevPage():g.prev();
break;
case b.horizontal?39:40:v(a),b.keyboardNavByPages?g.nextPage():g.next()}
}
);
b.prev&&H.bind("click."+q,function(a){
v(a);
g.prev()}
);
b.next&&I.bind("click."+q,function(a){
v(a);
g.next()}
);
b.prevPage&&O.bind("click."+q,function(a){
v(a);
g.prevPage()}
);
b.nextPage&&P.bind("click."+q,function(a){
v(a);
g.nextPage()}
);
b.dragContent&&S.bind("mousedown."+q,function(a){
if(1===a.which){
v(a);
var d=a.clientX,e=a.clientY,g=c.cur,l=+new Date,k=a.target,m=0;
h.addClass(b.draggedClass);
V();
Q.bind(R,function(a){
var y="mouseup"===a.type,p=b.horizontal?a.clientX-d:a.clientY-e,j=g-p;
!m&&10<Math.abs(p)&&(m=1,h.trigger(o+":dragStart",[c]));
j>c.max?j=b.elasticBounds?c.max+(j-c.max)/6:c.max:j<c.min&&(j=b.elasticBounds?c.min+(j-c.min)/6:c.min);
if(y){
Q.unbind(R);
h.removeClass(b.draggedClass);
var n=+new Date-l,n=300>n?Math.ceil(Math.pow(6/(n/300),2)*Math.abs(p)/120):0,j=j+(0<p?-n:n)}
m&&(v(a),k&&(f(k).bind("click."+q,function da(a){
v(a,true);
f(this).unbind("click."+q,da)}
),k=0),D=!y,i(j,y,y?b.speed:0),z(y?null:0),m&&h.trigger(o+":drag",[c]),y&&h.trigger(o+":dragEnd",[c]))}
)}
}
);
p&&b.dragHandle&&p.bind("mousedown."+q,function(a){
if(1===a.which){
v(a);
var d=a.clientX,f=a.clientY,g=e.cur,k=-e.cur,l=e.max-e.cur,j=0;
p.addClass(b.draggedClass);
V();
Q.bind(R,function(a){
v(a);
var h="mouseup"===a.type,a=b.horizontal?a.clientX-d:a.clientY-f,m=g+a,n=+new Date;
D=!h;
h&&(Q.unbind(R),p.removeClass(b.draggedClass));
if(a<l+5&&a>k-5||h){
e.cur=m>e.max?e.max:m<e.min?e.min:m;
p.stop().css(b.horizontal?{
left:e.cur+"px"}
:{
top:e.cur+"px"}
);
j||p.trigger(o+":dragStart",[e]);
p.trigger(o+":drag",[e]);
h&&p.trigger(o+":dragEnd",[e]);
if(j<=n||h||a>l||a<k)j=n+50,i(Math.round(e.cur/e.max*(c.max-c.min))+c.min,h,h?b.speed:50);
X()}
}
)}
}
)}
var o="sly",q="plugin_"+o;
f.fn[o]=function(o,b){
var i=!1,z,x=[];
"undefined"!==typeof o&&!f.isPlainObject(o)&&(i=!1===o?"destroy":o,z=arguments,Array.prototype.shift.call(z));
this.each(function(b,E){
var n=f.data(E,q);
n&&i?n[i]&&n[i].apply(n,z):!n&&!i&&(n=f.data(E,q,new S(E,o)));
x.push(n)}
);
return b&&!i?1<x.length?x:x[0]:this}
;
f.fn[o].defaults={
horizontal:0,itemNav:0,scrollBar:null,dynamicHandle:1,dragHandle:1,minHandleSize:50,pagesBar:null,pageBuilder:function(f){
return"<li>"+(f+1)+"</li>"}
,prev:null,next:null,prevPage:null,nextPage:null,cycleBy:0,cycleInterval:5E3,pauseOnHover:1,startPaused:0,scrollBy:0,dragContent:0,elasticBounds:0,speed:300,easing:"swing",scrollSource:null,dragSource:null,startAt:0,keyboardNav:0,keyboardNavByPages:0,draggedClass:"dragged",activeClass:"active",disabledClass:"disabled"}
}
)(jQuery);
JS代码(main.js):
jQuery(function($){
// -----------------------------------------------------------------------------------// Examples// -----------------------------------------------------------------------------------// Function for populating lists with placeholder itemsfunction populate( container,count,offset ){
var output = '';
offset = isNaN(offset) ? 0:offset;
for( var i = 0;
i<count;
i++ ){
output += '<li>'+(offset+i)+'</li>';
}
return $(output).appendTo(container);
}
// Populate list items$('ul[data-items]').each(function(i,e){
var items = parseInt( $(e).data('items'),10 );
populate( e,items );
}
);
// Activate section (it misbehaves when sly is called on hidden sections)$(document).on('activated',function( event,sectionId ){
var $section = $('#'+sectionId);
if( $section.data('examplesLoaded') ){
return;
}
switch( sectionId ){
case 'infinite':var $frame = $section.find('.frame'),$ul = $frame.find('ul').eq(0),$scrollbar = $section.find('.scrollbar'),$buttons = $section.find('.controlbar [data-action]');
populate( $ul,10 );
$frame.on('sly:move',function( e,pos ){
if( pos.cur > pos.max - 100 ){
populate( $ul,10,$ul.children().length-1 );
$frame.sly('reload');
}
}
).sly({
itemNav:'basic',scrollBy:1,scrollBar:$scrollbar}
);
// Controls$buttons.on('click',function(e){
var action = $(this).data('action');
switch(action){
case 'reset':$frame.sly('toStart');
setTimeout(function(){
$ul.find('li').slice(10).remove();
$frame.sly('reload');
}
,200);
break;
default:$frame.sly(action);
}
}
);
break;
default:// Call sly instances$section.find(".slyWrap").each(function(i,e){
//if( i != 3 ) return;
var cont = $(this),frame = cont.find(".sly"),slidee = frame.find("ul"),scrollbar = cont.find(".scrollbar"),pagesbar = cont.find(".pages"),options = frame.data("options"),controls = cont.find(".controls"),prevButton = controls.find(".prev"),nextButton = controls.find(".next"),prevPageButton = controls.find(".prevPage"),nextPageButton = controls.find(".nextPage");
options = $.extend({
}
,options,{
scrollBar:scrollbar,pagesBar:pagesbar,prev:prevButton,next:nextButton,prevPage:prevPageButton,nextPage:nextPageButton,disabledClass:'btn-disabled'}
);
// Call slyframe.sly( options );
// Bind controlscont.find("button").click(function(){
var action = $(this).data('action'),arg = $(this).data('arg');
switch(action){
case 'add':slidee.append( slidee.children().slice(-1).clone().removeClass().text(function(i,text){
return text/1 + 1;
}
) );
frame.sly('reload');
break;
case 'remove':slidee.find("li").slice(-1).remove();
frame.sly('reload');
break;
default:frame.sly(action,arg);
}
}
);
}
);
}
$section.data('examplesLoaded',true);
}
);
// -----------------------------------------------------------------------------------// Page navigation// -----------------------------------------------------------------------------------// Navigationvar $nav = $('#nav'),$sections = $('#sections').children(),activeClass = 'active';
// Tabs$nav.on('click','a',function(e){
e.preventDefault();
activate( $(this).attr('href').substr(1) );
}
);
// Back to top button$('a[href="#top"]').on('click',function(e){
e.preventDefault();
$(document).scrollTop(0);
}
);
// Activate a sectionfunction activate( sectionID,initial ){
sectionID = sectionID && $sections.filter('#'+sectionID).length ? sectionID:$sections.eq(0).attr('id');
$nav.find('a').removeClass(activeClass).filter('[href=#'+sectionID+']').addClass(activeClass);
$sections.hide().filter('#'+sectionID).show();
if( !initial ){
window.location.hash = '!' + sectionID;
}
$(document).trigger('activated',[ sectionID ] );
}
// Activate initial sectionactivate( window.location.hash.match(/^#!/) ? window.location.hash.substr(2):0,1 );
// -----------------------------------------------------------------------------------// Additional plugins// -----------------------------------------------------------------------------------// Trigger prettyPrintprettyPrint();
}
);
CSS代码(style.css):
/* ============================================================================= HTML5 display definitions ========================================================================== */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block;}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1;}
audio:not([controls]){display:none;}
[hidden]{display:none;}
/* ============================================================================= Base ========================================================================== */
html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
html,button,input,select,textarea{font-family:sans-serif;color:#222;-webkit-tab-size:4;-moz-tab-size:4;-o-tab-size:4;tab-size:4;}
body{margin:0;font-size:14px;line-height:1.4;overflow-y:scroll;background:url('../img/texture.png') #404040;text-shadow:1px 1px 0 rgba(0,0,0,.5);}
::-moz-selection{background:#333;color:#fff;text-shadow:-1px -1px 0 #000 !important;}
::selection{background:#333;color:#fff;text-shadow:-1px -1px 0 #000 !important;}
/* ============================================================================= Links ========================================================================== */
a{color:#a6a6a6;text-decoration:none;}
a:hover{color:#fff;}
a:focus{outline:thin dotted;}
a:hover,a:active{outline:0;}
/* ============================================================================= Typography ========================================================================== */
abbr[title]{border-bottom:1px dotted;}
b,strong{font-weight:bold;}
blockquote{margin:1em 40px;}
dfn{font-style:italic;}
hr{display:block;height:1px;border:0;border-top:1px solid;border-color:#ccc;border-color:rgba(0,0,0,0.2);background:rgba(255,255,255,0.3);margin:1em 0;padding:0;}
ins{background:#ff9;color:#000;text-decoration:none;}
mark{background:#ff0;color:#000;font-style:italic;font-weight:bold;}
pre,code,kbd,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em;}
pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word;padding:0.8em;background:#f8f8f8;border:1px solid #ccc;}
code{padding:3px 4px;background-color:#f7f7f9;border:1px solid #e1e1e8;border-radius:4px;}
q{quotes:none;}
q:before,q:after{content:"";content:none;}
small{font-size:85%;opacity:0.6;}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
/* ============================================================================= Lists ========================================================================== */
ul,ol{margin:1em 0;padding:0 0 0 40px;}
dd{margin:0 0 0 40px;}
nav ul,nav ol{list-style:none;list-style-image:none;margin:0;padding:0;}
/* ============================================================================= Embedded content ========================================================================== */
img{border:0;-ms-interpolation-mode:bicubic;vertical-align:middle;}
svg:not(:root){overflow:hidden;}
/* ============================================================================= Figures ========================================================================== */
figure{margin:0;}
/* ============================================================================= Forms ========================================================================== */
form{margin:0;}
fieldset{border:0;margin:0;padding:0;}
label{cursor:pointer;}
legend{border:0;*margin-left:-7px;padding:0;white-space:normal;}
button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle;}
button,input{line-height:normal;}
button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button;*overflow:visible;}
button[disabled],input[disabled]{cursor:default;}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*width:13px;*height:13px;}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none;}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
textarea{overflow:auto;vertical-align:top;resize:vertical;}
input:valid,textarea:valid{}
input:invalid,textarea:invalid{background-color:#f0dddd;}
/* ============================================================================= Headlines ========================================================================== */
h6{margin:0;font-size:0.85em;text-transform:uppercase;color:#888;}
/* ============================================================================= Tables ========================================================================== */
table{border-collapse:collapse;border-spacing:0;}
td{vertical-align:top;}
/* ============================================================================= Elements ========================================================================== */
/* Message bubbles */
.info-bubble{margin:1em 0;padding:1px 1em;color:#3a87ad;background:#d9edf7;border:1px solid #bce8f1;}
.info-bubble p{margin:1em 0;}
/* Buttons */
.btn{display:inline-block;padding:5px 10px 5px;margin-bottom:0;font-size:13px;line-height:18px;color:#333333;text-align:center;text-decoration:none;vertical-align:middle;background-color:#f5f5f5;text-shadow:-1px -1px 0 rgba(255,255,255,0.75);background-image:-moz-linear-gradient(top,#fff,#e6e6e6);background-image:-ms-linear-gradient(top,#fff,#e6e6e6);background-image:-webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));background-image:-webkit-linear-gradient(top,#fff,#e6e6e6);background-image:-o-linear-gradient(top,#fff,#e6e6e6);background-image:linear-gradient(top,#fff,#e6e6e6);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#444',endColorstr='#333',GradientType=0);border:1px solid;border-color:#333 #333 #bfbfbf;border-color:rgba(0,0,0,0.15) rgba(0,0,0,0.15) rgba(0,0,0,0.3);filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-box-shadow:inset 0 1px 0 #fff,0 1px 1px rgba(0,0,0,0.15);-moz-box-shadow:inset 0 1px 0 #fff,0 1px 1px rgba(0,0,0,0.15);box-shadow:inset 0 1px 0 #fff,0 1px 1px rgba(0,0,0,0.15);cursor:pointer;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);*margin-left:.3em;}
.btn:hover,.btn:active,.btn.active,.btn.disabled,.btn[disabled]{background-color:#e6e6e6;}
.btn:active,.btn.active{background-color:#cccccc \9;}
.btn:first-child{*margin-left:0;}
.btn:hover{color:#333333;text-decoration:none;background-color:#e6e6e6;background-position:0 -15px;-webkit-transition:background-position 0.1s linear;-moz-transition:background-position 0.1s linear;-ms-transition:background-position 0.1s linear;-o-transition:background-position 0.1s linear;transition:background-position 0.1s linear;}
.btn:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}
.btn.active,.btn:active{background-image:none;-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);-moz-box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);background-color:#e6e6e6;background-color:#d9d9d9 \9;outline:0;}
.btn.disabled,.btn[disabled]{cursor:default;background-image:none;background-color:#e6e6e6;opacity:0.65;filter:alpha(opacity=65);-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
.btn-large{padding:9px 14px;font-size:15px;line-height:normal;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.btn-large [class^="icon-"]{margin-top:1px;}
.btn-small{padding:5px 9px;font-size:11px;line-height:16px;}
.btn-small [class^="icon-"]{margin-top:-1px;}
.btn-mini{padding:2px 6px;font-size:11px;line-height:14px;}
.btn-blue,.btn-blue:hover,.btn-orange,.btn-orange:hover,.btn-red,.btn-red:hover,.btn-green,.btn-green:hover,.btn-black,.btn-black:hover{text-shadow:0 -1px 0 rgba(0,0,0,0.3);color:#ffffff;}
.btn-blue,.btn-orange,.btn-red,.btn-green,.btn-black{-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.3),0 1px 1px rgba(0,0,0,0.3);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.3),0 1px 1px rgba(0,0,0,0.3);box-shadow:inset 0 1px 0 rgba(255,255,255,0.3),0 1px 1px rgba(0,0,0,0.3);}
.btn-blue.active,.btn-orange.active,.btn-red.active,.btn-green.active{color:rgba(255,255,255,0.75);}
.btn-blue{background-color:#006dcc;background-image:-moz-linear-gradient(top,#0088cc,#0044cc);background-image:-ms-linear-gradient(top,#0088cc,#0044cc);background-image:-webkit-gradient(linear,0 0,0 100%,from(#0088cc),to(#0044cc));background-image:-webkit-linear-gradient(top,#0088cc,#0044cc);background-image:-o-linear-gradient(top,#0088cc,#0044cc);background-image:linear-gradient(top,#0088cc,#0044cc);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc',endColorstr='#0044cc',GradientType=0);border-color:#0044cc #0044cc #002a80;border-color:rgba(0,0,0,0.3) rgba(0,0,0,0.3) rgba(0,0,0,0.5);filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);}
.btn-blue:hover,.btn-blue:active,.btn-blue.active,.btn-blue.disabled,.btn-blue[disabled]{background-color:#0044cc;}
.btn-blue:active,.btn-blue.active{background-color:#003399 \9;}
.btn-orange{background-color:#faa732;background-image:-moz-linear-gradient(top,#fbb450,#f89406);background-image:-ms-linear-gradient(top,#fbb450,#f89406);background-image:-webkit-gradient(linear,0 0,0 100%,from(#fbb450),to(#f89406));background-image:-webkit-linear-gradient(top,#fbb450,#f89406);background-image:-o-linear-gradient(top,#fbb450,#f89406);background-image:linear-gradient(top,#fbb450,#f89406);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbb450',endColorstr='#f89406',GradientType=0);border-color:#f89406 #f89406 #ad6704;border-color:rgba(0,0,0,0.2) rgba(0,0,0,0.2) rgba(0,0,0,0.3);filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);}
.btn-orange:hover,.btn-orange:active,.btn-orange.active,.btn-orange.disabled,.btn-orange[disabled]{background-color:#f89406;}
.btn-orange:active,.btn-orange.active{background-color:#c67605 \9;}
.btn-red{background-color:#da4f49;background-image:-moz-linear-gradient(top,#ee5f5b,#bd362f);background-image:-ms-linear-gradient(top,#ee5f5b,#bd362f);background-image:-webkit-gradient(linear,0 0,0 100%,from(#ee5f5b),to(#bd362f));background-image:-webkit-linear-gradient(top,#ee5f5b,#bd362f);background-image:-o-linear-gradient(top,#ee5f5b,#bd362f);background-image:linear-gradient(top,#ee5f5b,#bd362f);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b',endColorstr='#bd362f',GradientType=0);border-color:#bd362f #bd362f #802420;border-color:rgba(0,0,0,0.2) rgba(0,0,0,0.2) rgba(0,0,0,0.4);filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);}
.btn-red:hover,.btn-red:active,.btn-red.active,.btn-red.disabled,.btn-red[disabled]{background-color:#bd362f;}
.btn-red:active,.btn-red.active{background-color:#942a25 \9;}
.btn-green{background-color:#5bb75b;background-image:-moz-linear-gradient(top,#62c462,#51a351);background-image:-ms-linear-gradient(top,#62c462,#51a351);background-image:-webkit-gradient(linear,0 0,0 100%,from(#62c462),to(#51a351));background-image:-webkit-linear-gradient(top,#62c462,#51a351);background-image:-o-linear-gradient(top,#62c462,#51a351);background-image:linear-gradient(top,#62c462,#51a351);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462',endColorstr='#51a351',GradientType=0);border-color:#51a351 #51a351 #387038;border-color:rgba(0,0,0,0.2) rgba(0,0,0,0.2) rgba(0,0,0,0.3);filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);}
.btn-green:hover,.btn-green:active,.btn-green.active,.btn-green.disabled,.btn-green[disabled]{background-color:#51a351;}
.btn-green:active,.btn-green.active{background-color:#408140 \9;}
.btn-black{background-color:#393939;background-image:-moz-linear-gradient(top,#454545,#262626);background-image:-ms-linear-gradient(top,#454545,#262626);background-image:-webkit-gradient(linear,0 0,0 100%,from(#454545),to(#262626));background-image:-webkit-linear-gradient(top,#454545,#262626);background-image:-o-linear-gradient(top,#454545,#262626);background-image:linear-gradient(top,#454545,#262626);background-repeat:repeat-x;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 1px rgba(0,0,0,0.3);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 1px rgba(0,0,0,0.3);box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 1px rgba(0,0,0,0.3);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#454545',endColorstr='#262626',GradientType=0);border-color:#222 #222 #000;border-color:rgba(0,0,0,0.5) rgba(0,0,0,0.3) rgba(0,0,0,0.7);filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);}
.btn-black:hover,.btn-black:active,.btn-black.active,.btn-black.disabled,.btn-black[disabled]{background-color:#222;}
.btn-black:active,.btn-black.active{background-color:#0c0c0c \9;}
button.btn,input[type="submit"].btn{*padding-top:2px;*padding-bottom:2px;}
button.btn::-moz-focus-inner,input[type="submit"].btn::-moz-focus-inner{padding:0;border:0;}
button.btn.large,input[type="submit"].btn.large{*padding-top:7px;*padding-bottom:7px;}
button.btn.small,input[type="submit"].btn.small{*padding-top:3px;*padding-bottom:3px;}
.btn-group{position:relative;*zoom:1;*margin-left:.3em;}
.btn-group:before,.btn-group:after{display:table;content:"";}
.btn-group:after{clear:both;}
.btn-group:first-child{*margin-left:0;}
.btn-group + .btn-group{margin-left:5px;}
.btn-toolbar{}
.btn-toolbar .btn-group{display:inline-block;*display:inline;*zoom:1;}
.btn-group .btn{position:relative;float:left;margin-left:-1px;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}
.btn-group .btn:first-child{margin-left:0;-webkit-border-top-left-radius:2px;-moz-border-radius-topleft:2px;border-top-left-radius:2px;-webkit-border-bottom-left-radius:2px;-moz-border-radius-bottomleft:2px;border-bottom-left-radius:2px;}
.btn-group .btn:last-child,.btn-group .dropdown-toggle{-webkit-border-top-right-radius:2px;-moz-border-radius-topright:2px;border-top-right-radius:2px;-webkit-border-bottom-right-radius:2px;-moz-border-radius-bottomright:2px;border-bottom-right-radius:2px;}
.btn-group .btn.large:first-child{margin-left:0;-webkit-border-top-left-radius:2px;-moz-border-radius-topleft:2px;border-top-left-radius:2px;-webkit-border-bottom-left-radius:2px;-moz-border-radius-bottomleft:2px;border-bottom-left-radius:2px;}
.btn-group .btn.large:last-child,.btn-group .large.dropdown-toggle{-webkit-border-top-right-radius:2px;-moz-border-radius-topright:2px;border-top-right-radius:2px;-webkit-border-bottom-right-radius:2px;-moz-border-radius-bottomright:2px;border-bottom-right-radius:2px;}
/* Labels */
.label{padding:2px 4px 2px;font-size:12px;color:#ffffff;text-shadow:0 -1px 0 rgba(0,0,0,0.50);background-color:#666;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;border-bottom:1px solid #333;}
.label-important{background-color:#b94a48;}
.label-warning{background-color:#f89406;}
.label-success{background-color:#468847;}
.label-info{background-color:#3a87ad;}
/* Progress */
.progress{overflow:hidden;height:18px;background-color:#f7f7f7;background-image:-moz-linear-gradient(top,#f5f5f5,#f9f9f9);background-image:-ms-linear-gradient(top,#f5f5f5,#f9f9f9);background-image:-webkit-gradient(linear,0 0,0 100%,from(#f5f5f5),to(#f9f9f9));background-image:-webkit-linear-gradient(top,#f5f5f5,#f9f9f9);background-image:-o-linear-gradient(top,#f5f5f5,#f9f9f9);background-image:linear-gradient(top,#f5f5f5,#f9f9f9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5',endColorstr='#f9f9f9',GradientType=0);-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
.progress .bar{width:0%;height:18px;float:left;color:#ffffff;font-size:12px;text-align:center;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#5eb95e;background-image:-moz-linear-gradient(top,#62c462,#57a957);background-image:-ms-linear-gradient(top,#62c462,#57a957);background-image:-webkit-gradient(linear,0 0,0 100%,from(#62c462),to(#57a957));background-image:-webkit-linear-gradient(top,#62c462,#57a957);background-image:-o-linear-gradient(top,#62c462,#57a957);background-image:linear-gradient(top,#62c462,#57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462',endColorstr='#57a957',GradientType=0);-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,0.15);-moz-box-shadow:inset 0 -1px 0 rgba(0,0,0,0.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,0.15);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:width 0.3s ease;-moz-transition:width 0.3s ease;-ms-transition:width 0.3s ease;-o-transition:width 0.3s ease;transition:width 0.3s ease;}
/* ========================================================================== Example page boilerplate styles ========================================================================== */
body{border:2px solid #555;border-color:rgba(255,255,255,.1);border-left:0;border-right:0;margin:5px 0;outline:5px solid #222;}
.container{width:940px;margin:0 auto;}
/* Header */
#header{color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,.5);}
#header .container{position:relative;height:190px;}
#header h1{margin:0;padding:40px 0 0 0;font-family:Exo,sans-serif;text-shadow:2px 2px 0 rgba(0,0,0,.5);}
#header p{margin:0;color:#999;font-style:italic;}
#header .download{position:absolute;top:20px;right:160px;width:210px;height:75px;background:url('../img/download.png') no-repeat right 0;}
#header .download h4{margin:9px 28px 0 0;font:bold 16px/1 Exo,sans-serif;text-align:right;color:#bbb;}
#header .download a{position:absolute;bottom:0;height:100%;text-align:center;}
#header .download a.left{left:0;width:110px;}
#header .download a.right{right:0;width:100px;}
#header .download a span{display:block;margin-top:39px;height:32px;line-height:32px;}
#header .download a.left span{border-right:1px solid #333;}
#header .download a.right span{border-left:1px solid #555;}
#header .download:hover{background-position:right -75px;}
#header .download:hover h4{color:#fff;}
#header .download:hover a.right span{border-color:#888;}
#header .download a:hover span{background:#5a5a5a;background:rgba(255,255,255,.1);}
#header a.repo{position:absolute;top:-3px;right:0;width:120px;height:130px;background:url('../img/repo.png') no-repeat center top;}
/* Navigation */
#nav{position:absolute;bottom:-3px;margin:0;padding:0;list-style:none;}
#nav li{display:block;float:left;width:200px;margin-right:1px;text-align:center;font-weight:bold;}
#nav li a{display:block;padding:15px 0;text-transform:uppercase;border-radius:0;text-decoration:none;color:#ccc;background:#4a4a4a;background:rgba(255,255,255,.04);-webkit-border-radius:2px 2px 0 0;border-radius:2px 2px 0 0;}
#nav li a:hover{color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,.5);background:#4a4a4a;background:rgba(255,255,255,.1);}
#nav li a.active{color:#424242;text-shadow:none;background:#f5f5f5;background:-moz-linear-gradient(top,#ffffff 32%,#f5f5f5 100%);/* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,color-stop(32%,#ffffff),color-stop(100%,#f5f5f5));/* Chrome,Safari4+ */
background:-webkit-linear-gradient(top,#ffffff 32%,#f5f5f5 100%);/* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,#ffffff 32%,#f5f5f5 100%);/* Opera 11.10+ */
background:-ms-linear-gradient(top,#ffffff 32%,#f5f5f5 100%);/* IE10+ */
background:linear-gradient(top,#ffffff 32%,#f5f5f5 100%);/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff',endColorstr='#f5f5f5',GradientType=0 );/* IE6-9 */
box-shadow:0 -3px 0 rgba(0,0,0,.5);}
/* Content */
#content{background:#f5f5f5;padding:10px;text-shadow:1px 1px 0 rgba(255,255,255,.1);background-clip:padding-box;border-top:3px solid;border-bottom:3px solid;border-color:rgba(0,0,0,.5);}
#content a{color:#0088cc;}
#content a:hover{color:#005580;}
/* Footer */
#footer{font-size:0.85em;padding:2.5em 0;color:#fff;text-transform:uppercase;}
#footer p{margin:3px 0;}
/* ========================================================================== Page styles ========================================================================== */
/* universal sly */
.slyWrap .controls{margin:20px 0;}
.controls{text-align:center;}
.sly{overflow:hidden;}
.sly > ul{list-style:none;margin:0;padding:0;}
.sly > ul li{position:relative;margin:0;padding:0;background:#4DBCE9;color:#fff;text-align:center;cursor:pointer;}
.sly > ul li.active{background:#fff;color:#4DBCE9;-webkit-box-shadow:inset 0 0 0 1px #4DBCE9,inset 0 0 40px 20px #97e6f7;-moz-box-shadow:inset 0 0 0 1px #4DBCE9,inset 0 0 40px 20px #97e6f7;-o-box-shadow:inset 0 0 0 1px #4DBCE9,inset 0 0 40px 20px #97e6f7;box-shadow:inset 0 0 0 1px #4DBCE9,inset 0 0 40px 20px #97e6f7;}
.pages{list-style:none;margin:20px 0;padding:0;text-align:center;}
.pages li{display:inline-block;width:11px;height:11px;margin:0 2px;text-indent:-999px;background:#fff;border-radius:10px;cursor:pointer;overflow:hidden;border:1px solid #aaa;}
.pages li:hover{background:#eee;}
.pages li.active{background:#999;border-color:#888;box-shadow:inset 0 0 0 2px #eee;}
.scrollbar{background:#808080;border-radius:4px;border:2px solid #808080;border-top-color:#666;line-height:0;}
.scrollbar .handle{border-radius:4px;background:#fff;cursor:pointer;line-height:0;-webkit-box-shadow:0 1px 0 #555;-moz-box-shadow:0 1px 0 #555;-o-box-shadow:0 1px 0 #555;box-shadow:0 1px 0 #555;}
/* Horizontal examples */
#horizontal .slyWrap{margin:3em 0;}
#horizontal .scrollbar{margin:1em 0;height:5px;}
#horizontal .scrollbar .handle{width:100px;height:100%;}
#horizontal .example1 .sly{height:170px;}
#horizontal .example1 .sly ul{height:100%;}
#horizontal .example1 .sly ul li{float:left;width:187px;height:100%;margin:0 1px 0 0;font-size:50px;line-height:170px;}
#horizontal .example2 .sly{height:200px;}
#horizontal .example2 .sly ul{height:100%;}
#horizontal .example2 .sly ul li{float:left;width:266px;height:100%;margin:0 1px 0 0;font-size:50px;line-height:200px;}
#horizontal .example3 .sly{height:200px;}
#horizontal .example3 .sly ul{height:100%;}
#horizontal .example3 .sly ul li{float:left;width:465px;height:100%;margin:0 10px 0 0;font-size:50px;line-height:200px;cursor:default;}
#horizontal .example3 .sly ul li.active{background:#4DBCE9;color:#fff;-webkit-box-shadow:none;-moz-box-shadow:none;-o-box-shadow:none;box-shadow:none;}
#horizontal .example4 .sly{height:160px;}
#horizontal .example4 .sly ul{height:100%;}
#horizontal .example4 .sly ul li{float:left;padding:0 20px;width:360px;height:100%;font-size:50px;opacity:0.2;cursor:default;overflow:hidden;background:none;box-shadow:none;font-size:14px;text-align:justify;color:#444;-webkit-transition:opacity 0.3s linear;-moz-transition:opacity 0.3s linear;-o-transition:opacity 0.3s linear;transition:opacity 0.3s linear;}
#horizontal .example4 .sly ul li.active{opacity:1;}
/* Vertical examples */
#vertical .slyWrap{margin:1em 0;width:470px;float:left;}
#vertical .scrollbar{width:5px;}
#vertical .scrollbar .handle{height:100px;width:100%;}
#vertical .example1{position:relative;}
#vertical .example1 .sly{width:445px;height:500px;border:1px solid #aaa;}
#vertical .example1 .sly ul{width:100%;height:100%;overflow:hidden;}
#vertical .example1 .sly ul li{height:80px;margin:0 0 1px 0;font-size:40px;line-height:80px;}
#vertical .example1 .scrollbar{position:absolute;top:0;right:10px;height:500px;}
#vertical .example2{position:relative;}
#vertical .example2 .sly{width:445px;margin-left:25px;height:500px;border:1px solid #aaa;background:#fff;}
#vertical .example2 .sly > div{padding:1em 1.5em;}
#vertical .example2 .scrollbar{position:absolute;top:0;left:10px;height:500px;}
/* Vertical example */
#infinite .controlbar{margin:2em 0 1.5em;}
#infinite .frameWrap{position:relative;height:500px;}
#infinite .frame{height:500px;margin-right:20px;overflow:hidden;border:1px solid #888;}
#infinite .frame ul{width:100%;margin:0;padding:0;list-style:none;}
#infinite .frame ul li{margin:0 0 5px 0;padding:0;height:200px;line-height:200px;font-size:30px;border-bottom:1px solid #aaa;background:#eee;color:#888;text-align:center;}
#infinite .scrollbar{position:absolute;top:0;right:0;width:5px;height:498px;}
#infinite .scrollbar .handle{height:100px;width:100%;}
/* ========================================================================== Non-semantic helper classes ========================================================================== */
/* For image replacement */
.ir{display:block;border:0;text-indent:-999em;overflow:hidden;background-color:transparent;background-repeat:no-repeat;text-align:left;direction:ltr;*line-height:0;}
.ir br{display:none;}
/* Floats */
.fleft{float:left;}
.fright{float:right;}
/* Hide from both screenreaders and browsers:h5bp.com/u */
.hidden{display:none !important;visibility:hidden;}
/* Hide only visually,but have it available for screenreaders:h5bp.com/v */
.visuallyhidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;}
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard:h5bp.com/p */
.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto;}
/* Hide visually and from screenreaders,but maintain layout */
.invisible{visibility:hidden;}
/* Contain floats:h5bp.com/q */
.clearfix:before,.clearfix:after{content:"";display:table;}
.clearfix:after{clear:both;}
.clearfix{*zoom:1;}
/* PrettyPrint styles */
.pln{color:#000}
@media screen{.str{color:#080}
.kwd{color:#008}
.com{color:#800}
.typ{color:#606}
.lit{color:#066}
.pun,.opn,.clo{color:#660}
.tag{color:#008}
.atn{color:#606}
.atv{color:#080}
.dec,.var{color:#606}
.fun{color:red}
}
@media print,projection{.str{color:#060}
.kwd{color:#006;font-weight:bold}
.com{color:#600;font-style:italic}
.typ{color:#404;font-weight:bold}
.lit{color:#044}
.pun,.opn,.clo{color:#440}
.tag{color:#006;font-weight:bold}
.atn{color:#404}
.atv{color:#060}
}
ol.linenums{margin-top:0;margin-bottom:0}
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}
li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}
分享到QQ
分享到微博
微信扫一扫
