以下是 jQuery左右分页滑动特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery左右分页滑动</title>
<link rel="stylesheet" type="text/css" href="css/zzsc.css" />
</head>
<body>
<div id="main">
<ul id="holder">
<li><b>Hello, dear visitor!</b><br />
This is a demonstration for Tutoralzine's Sweet Pages Pagination Solution. This jQuery plug-in can neatly split into pages any long unordered list of items. Perfect for comment threads and even slideshows. It is entirely front-end based, so is SEO friendly and easy to configure.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur bibendum quam et auctor. Mauris et quam orci. Suspendisse fringilla nulla ullamcorper risus ornare at sollicitudin lorem euismod. Integer augue elit, porta eu accumsan at, aliquet in velit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur bibendum quam et auctor. Mauris et quam orci. Suspendisse fringilla nulla ullamcorper risus ornare at sollicitudin lorem euismod. Integer augue elit, porta eu accumsan at, aliquet in velit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur bibendum quam et auctor. Mauris et quam orci. Suspendisse fringilla nulla ullamcorper risus ornare at sollicitudin lorem euismod. Integer augue elit, porta eu accumsan at, aliquet in velit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur bibendum quam et auctor. Mauris et quam orci. Suspendisse fringilla nulla ullamcorper risus ornare at sollicitudin lorem euismod. Integer augue elit, porta eu accumsan at, aliquet in velit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur bibendum quam et auctor. Mauris et quam orci. Suspendisse fringilla nulla ullamcorper risus ornare at sollicitudin lorem euismod. Integer augue elit, porta eu accumsan at, aliquet in velit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur bibendum quam et auctor. Mauris et quam orci. Suspendisse fringilla nulla ullamcorper risus ornare at sollicitudin lorem euismod. Integer augue elit, porta eu accumsan at, aliquet in velit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur bibendum quam et auctor. Mauris et quam orci. Suspendisse fringilla nulla ullamcorper risus ornare at sollicitudin lorem euismod. Integer augue elit, porta eu accumsan at, aliquet in velit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur bibendum quam et auctor. Mauris et quam orci. Suspendisse fringilla nulla ullamcorper risus ornare at sollicitudin lorem euismod. Integer augue elit, porta eu accumsan at, aliquet in velit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur bibendum quam et auctor. Mauris et quam orci. Suspendisse fringilla nulla ullamcorper risus ornare at sollicitudin lorem euismod. Integer augue elit, porta eu accumsan at, aliquet in velit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur bibendum quam et auctor. Mauris et quam orci. Suspendisse fringilla nulla ullamcorper risus ornare at sollicitudin lorem euismod. Integer augue elit, porta eu accumsan at, aliquet in velit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur bibendum quam et auctor. Mauris et quam orci. Suspendisse fringilla nulla ullamcorper risus ornare at sollicitudin lorem euismod. Integer augue elit, porta eu accumsan at, aliquet in velit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur bibendum quam et auctor. Mauris et quam orci. Suspendisse fringilla nulla ullamcorper risus ornare at sollicitudin lorem euismod. Integer augue elit, porta eu accumsan at, aliquet in velit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur bibendum quam et auctor. Mauris et quam orci. Suspendisse fringilla nulla ullamcorper risus ornare at sollicitudin lorem euismod. Integer augue elit, porta eu accumsan at, aliquet in velit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur bibendum quam et auctor. Mauris et quam orci. Suspendisse fringilla nulla ullamcorper risus ornare at sollicitudin lorem euismod. Integer augue elit, porta eu accumsan at, aliquet in velit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur bibendum quam et auctor. Mauris et quam orci. Suspendisse fringilla nulla ullamcorper risus ornare at sollicitudin lorem euismod. Integer augue elit, porta eu accumsan at, aliquet in velit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur bibendum quam et auctor. Mauris et quam orci. Suspendisse fringilla nulla ullamcorper risus ornare at sollicitudin lorem euismod. Integer augue elit, porta eu accumsan at, aliquet in velit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur bibendum quam et auctor. Mauris et quam orci. Suspendisse fringilla nulla ullamcorper risus ornare at sollicitudin lorem euismod. Integer augue elit, porta eu accumsan at, aliquet in velit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur bibendum quam et auctor. Mauris et quam orci. Suspendisse fringilla nulla ullamcorper risus ornare at sollicitudin lorem euismod. Integer augue elit, porta eu accumsan at, aliquet in velit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur bibendum quam et auctor. Mauris et quam orci. Suspendisse fringilla nulla ullamcorper risus ornare at sollicitudin lorem euismod. Integer augue elit, porta eu accumsan at, aliquet in velit.</li>
</ul>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/zzsc.js"></script>
</body>
</html>
JS代码(zzsc.js):
(function($){
// Creating the sweetPages jQuery plugin:$.fn.sweetPages = function(opts){
// If no options were passed,create an empty opts objectif(!opts) opts ={
}
;
var resultsPerPage = opts.perPage || 3;
// The plugin works best for unordered lists,althugh ols would do just as well:var ul = this;
var li = ul.find('li');
li.each(function(){
// Calculating the height of each li element,and storing it with the data method:var el = $(this);
el.data('height',el.outerHeight(true));
}
);
// Calculating the total number of pages:var pagesNumber = Math.ceil(li.length/resultsPerPage);
// If the pages are less than two,do nothing:if(pagesNumber<2) return this;
// Creating the controls div:var swControls = $('<div class="swControls">');
for(var i=0;
i<pagesNumber;
i++){
// Slice a portion of the lis,and wrap it in a swPage div:li.slice(i*resultsPerPage,(i+1)*resultsPerPage).wrapAll('<div class="swPage" />');
// Adding a link to the swControls div:swControls.append('<a href="" class="swShowPage">'+(i+1)+'</a>');
}
ul.append(swControls);
var maxHeight = 0;
var totalWidth = 0;
var swPage = ul.find('.swPage');
swPage.each(function(){
// Looping through all the newly created pages:var elem = $(this);
var tmpHeight = 0;
elem.find('li').each(function(){
tmpHeight+=$(this).data('height');
}
);
if(tmpHeight>maxHeight)maxHeight = tmpHeight;
totalWidth+=elem.outerWidth();
elem.css('float','left').width(ul.width());
}
);
swPage.wrapAll('<div class="swSlider" />');
// Setting the height of the ul to the height of the tallest page:ul.height(maxHeight);
var swSlider = ul.find('.swSlider');
swSlider.append('<div class="clear" />').width(totalWidth);
var hyperLinks = ul.find('a.swShowPage');
hyperLinks.click(function(e){
// If one of the control links is clicked,slide the swSlider div// (which contains all the pages) and mark it as active:$(this).addClass('active').siblings().removeClass('active');
swSlider.stop().animate({
'margin-left':-(parseInt($(this).text())-1)*ul.width()}
,'slow');
e.preventDefault();
}
);
// Mark the first link as active the first time this code runs:hyperLinks.eq(0).addClass('active');
// Center the control div:swControls.css({
'left':'50%','margin-left':-swControls.width()/2}
);
return this;
}
}
)(jQuery);
$(document).ready(function(){
/* The following code is executed once the DOM is loaded */
// Calling the jQuery plugin and splitting the// #holder UL into pages of 3 LIs each:$('#holder').sweetPages({
perPage:3}
);
// The default behaviour of the plugin is to insert the// page links in the ul,but we need them in the main container:var controls = $('.swControls').detach();
controls.appendTo('#main');
}
);
/* �������������֮�� lanrenzhijia.com */
CSS代码(zzsc.css):
*{/* Universal page reset */
margin:0;padding:0;}
body{/* Setting default text color,background and a font stack */
font-size:0.825em;color:#666;background:url('images/page_bg.jpg') repeat-x #383b3f;font-family:Arial,Helvetica,sans-serif;}
#main{/* The main container div */
position:relative;margin:50px auto;width:410px;background:url('images/main_bg.jpg') repeat-x #aeadad;border:1px solid #CCCCCC;padding:70px 25px 60px;/* CSS3 rounded cornenrs */
-moz-border-radius:12px;-webkit-border-radius:12px;border-radius:12px;}
#holder{/* The unordered list that is to be split into pages */
width:400px;overflow:hidden;position:relative;background:url('images/dark_bg.jpg') repeat #4e5355;padding-bottom:10px;/*CSS3 inner shadow (the webkit one is commeted,because Google Chromedoes not like rounded corners combined with inset shadows):*/
-moz-box-shadow:0 0 10px #222 inset;/*-webkit-box-shadow:0 0 10px #222 inset;*/
box-shadow:0 0 10px #222 inset;}
.swControls{position:absolute;margin-top:10px;}
a.swShowPage{/* The links that initiate the page slide */
background-color:#444444;float:left;height:15px;margin:4px 3px;text-indent:-9999px;width:15px;/*border:1px solid #ccc;*/
/* CSS3 rounded corners */
-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px;}
a.swShowPage:hover,a.swShowPage.active{background-color:#2993dd;/*CSS3 inner shadow */
-moz-box-shadow:0 0 7px #1e435d inset;/*-webkit-box-shadow:0 0 7px #1e435d inset;*/
box-shadow:0 0 7px #1e435d inset;}
#holder li{background-color:#F4F4F4;list-style:none outside none;margin:10px 10px 0;padding:20px;float:left;/* Regular CSS3 box shadows (not inset):*/
-moz-box-shadow:0 0 6px #111111;-webkit-box-shadow:0 0 6px #111111;box-shadow:0 0 6px #111111;}
#holder,#holder li{/* Applying rouded corners to both the holder and the holder lis */
-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;}
.clear{/* This class clears the floated elements */
clear:both;}
/* The styles below are only necessary for the styling of the demo page */
h1{background-color:#272B2C;border-bottom:1px solid #000000;color:#EEEEEE;font-size:32px;font-weight:normal;margin-bottom:30px;padding:30px 0;text-align:center;-moz-box-shadow:0 1px 0 #444444;-webkit-box-shadow:0 1px 0 #444444;box-shadow:0 1px 0 #444444;}
h1,h2{font-family:"Myriad Pro",Arial,Helvetica,sans-serif;}
h2{font-size:14px;font-weight:normal;text-align:center;position:absolute;right:40px;top:43px;}
a,a:visited{color:#0196e3;text-decoration:none;outline:none;}
a:hover{text-decoration:underline;}
a img{border:none;}
分享到QQ
分享到微博
微信扫一扫
