以下是 类似播放器jQuery分页插件特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery</title>
<meta name="description" content="">
<meta name="author" content="">
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery-ui-1.8.13.slider.min.js"></script>
<script src="jPaginator-min.js"></script>
<style type="text/css" media="all">
@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400italic&v2);
@import url(jPaginator.css);
@import url(custom.css);
</style>
<script type="text/javascript">
// Initial call
$(document).ready(function(){
$("#pagination").jPaginator({
nbPages:64,
marginPx:5,
length:8,
overBtnLeft:'#over_backward',
overBtnRight:'#over_forward',
maxBtnLeft:'#max_backward',
maxBtnRight:'#max_forward',
onPageClicked: function(a,num) {
$("#page").html("Page "+num);
}
});
});
</script>
</head>
<body>
<div id="container">
<!--include a div which we'll use to illustrate jPaginator doing its job-->
<div id="page"></div>
<div id="pagination">
<!-- optional left control buttons-->
<a class="control" id="max_backward"></a>
<a class="control" id="over_backward"></a>
<div class='paginator_p_wrap'>
<div class='paginator_p_bloc'>
<!--<div class='paginator_p'></div> // page number : dynamically added -->
</div>
</div>
<!-- optional right control buttons-->
<a class="control" id="over_forward"></a>
<a class="control" id="max_forward"></a>
<!-- slider -->
<div class='paginator_slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all'>
<a class='ui-slider-handle ui-state-default ui-corner-all' href='#'></a>
</div>
</div>
</div>
</body>
</html>
JS代码(jPaginator-min.js):
(function(c){
c.fn.jPaginator=function(p){
this.length!=1&&c.error("You must use this plugin with a unique element");
var a={
selectedPage:1,nbPages:100,length:10,widthPx:30,marginPx:1,overBtnLeft:null,overBtnRight:null,maxBtnLeft:null,maxBtnRight:null,withSlider:!0,withAcceleration:!0,speed:2,coeffAcceleration:2,minSlidesForSlider:3,onPageClicked:null}
,b={
realWid:0,curNum:1,infRel:0,cInfMax:0,cInf:0,nbMove:0,isMoving:!1,isLimitL:!1,isLimitR:!1,listenSlider:!0}
;
return this.each(function(){
function q(){
j(a.selectedPage-Math.floor((a.length-1)/2));
b.listenSlider=!1;
l(b.cInf);
b.listenSlider=!0;
a.onPageClicked&&a.onPageClicked.call(this,d,a.selectedPage)}
function j(e){
d.find(".paginator_p.selected").removeClass("selected");
var e=Math.min(a.nbPages-a.length+1,e),e=Math.max(1,e),k=e-2;
d.find(".paginator_p_bloc .paginator_p").each(function(){
k+=1;
c(this).html(k);
a.selectedPage==k&&c(this).addClass("selected")}
);
d.find(".paginator_p_bloc").css("left","-"+b.realWid+"px");
b.curNum=e;
b.cInf=(e-1)*b.realWid;
b.infRel=0}
function l(a){
var a=Math.round(a/b.cInfMax*100),k=d.find(".paginator_slider").slider("option","value");
a!=k&&d.find(".paginator_slider").slider("option","value",a)}
function r(e,d){
if(b.listenSlider&&!b.isMoving){
var c=d.value,c=Math.min(100,c),c=Math.max(0,c),g=Math.round(b.cInfMax*c/100)-b.cInf;
c==100?j(a.nbPages-a.length+1):c==0?j(1):h(g)}
}
function h(e){
var c=b.infRel+e,f=Math.abs(e)/e*Math.floor(Math.abs(c)/b.realWid);
c%=b.realWid;
b.infRel=c;
var g=(b.curNum-1)*b.realWid+b.infRel,h=b.curNum+f;
h<1&&(g=-1);
h>a.nbPages&&(g=b.cInfMax+1);
g<0?(j(1),b.cInf=0,b.infRel=0,l(0),b.isLimitL=!0,m()):g>b.cInfMax?(j(a.nbPages),b.cInf=b.cInfMax,b.infRel=0,l(b.cInfMax),b.isLimitR=!0,m()):(b.isLimitL=!1,b.isLimitR=!1,b.cInf=g,e!=0&&(f!=0&&j(h),l(b.cInf),d.find(".paginator_p_bloc").css("left",-1*c-b.realWid+"px")))}
function m(){
b.nbMove=0;
b.isMoving=!1}
function n(a){
if(!(b.isLimitR&&a=="right")&&!(b.isLimitL&&a=="left")){
var c=Math.round(b.cInfMax/10);
a=="left"&&(c*=-1);
h(c);
setTimeout(function(){
b.nbMove+=1;
n(a)}
,20)}
}
function o(c){
if(b.isMoving){
var d=Math.min(Math.abs(a.speed),5),f=Math.min(Math.abs(a.coeffAcceleration),5);
a.withAcceleration&&(d=Math.round(d+Math.round(f*b.nbMove*b.nbMove/8E4)));
c=="left"&&(d*=-1);
h(d);
setTimeout(function(){
b.nbMove+=1;
o(c)}
,10)}
}
var d=c(this);
p&&c.extend(a,p);
for(i=1;
i<=a.length+2;
i++)d.find(".paginator_p_bloc").append(c("<div class='paginator_p'></div>"));
a.length=Math.min(a.length,a.nbPages);
a.nbPages<=a.length&&(d.find(".paginator_slider").hide(),d.find(".paginator_slider").children().hide());
if(Math.ceil(a.nbPages/a.length)<a.minSlidesForSlider)a.withSlider=!1;
a.withSlider||(d.find(".paginator_slider").hide(),d.find(".paginator_slider").children().hide());
var f=0,s=d.find(".paginator_p").first().css("border-left-width");
s.indexOf("px")>0&&(f=s.replace("px","")*1);
b.realWid=a.widthPx+a.marginPx*2+f*2;
f=1*b.realWid*a.length;
d.find(".paginator_p").css("width",a.widthPx+"px");
d.find(".paginator_p").css("margin","0 "+a.marginPx+"px 0 "+a.marginPx+"px");
d.find(".paginator_p_wrap").css("width",f+"px");
d.find(".paginator_slider").css("width",f+"px");
b.cInfMax=a.nbPages*b.realWid-a.length*b.realWid;
a.selectedPage=Math.min(a.selectedPage,a.nbPages);
q(d);
d.find(".paginator_p").bind("click.jPaginator",function(){
var b=1*c(this).html();
d.find(".paginator_p.selected").removeClass("selected");
a.selectedPage=b;
q()}
);
a.withSlider&&(d.find(".paginator_slider").slider({
animate:!1}
),d.find(".paginator_slider").bind("slidechange.jPaginator",function(a,b){
return r(a,b)}
),d.find(".paginator_slider").bind("slide.jPaginator",function(a,b){
return r(a,b)}
));
a.overBtnLeft&&c(a.overBtnLeft).bind("mouseenter.jPaginator",function(){
c(this);
b.isMoving=!0;
o("left")}
);
a.overBtnRight&&c(a.overBtnRight).bind("mouseenter.jPaginator",function(){
c(this);
b.isMoving=!0;
o("right")}
);
a.overBtnLeft&&c(a.overBtnLeft).bind("mouseleave.jPaginator",function(){
c(this);
m()}
);
a.overBtnRight&&c(a.overBtnRight).bind("mouseleave.jPaginator",function(){
c(this);
m()}
);
a.maxBtnLeft&&c(a.maxBtnLeft).bind("click.jPaginator",function(){
return n("left")}
);
a.maxBtnRight&&c(a.maxBtnRight).bind("click.jPaginator",function(){
return n("right")}
);
d.find(".paginator_p").bind("mouseenter.jPaginator",function(){
var a=c(this);
d.find(".paginator_p.over").removeClass("over");
a.addClass("over")}
);
d.find(".paginator_p").bind("mouseleave.jPaginator",function(){
c(this);
d.find(".paginator_p.over").removeClass("over")}
)}
)}
}
)(jQuery);
CSS代码(custom.css):
body{background:url(img/bg.png) #242424;}
#container{padding:20px;width:480px;margin:100px auto 0 auto;font-family:Arial,sans-serif;}
#page{text-align:center;color:#666666;padding:0 0 100px 0;font-family:'Droid Serif',serif;font-style:italic;font-size:30px;text-shadow:1px 1px 0px #222222;}
.paginator_p{height:30px;width:30px;line-height:30px;text-align:center;font-size:13px;font-weight:bold;color:#26430c;/*1px right and down offset,no blur and offwhite*/
text-shadow:1px 1px 0px #5a8332;/* FF3.5+,Opera 9+,Saf1+,Chrome */
background-color:#4A821B;background-image:url(img/sprite.png) no-repeat 0 0;/*image fallback for none supporting browsers*/
background-image:-webkit-gradient(linear,left top,left bottom,from(#4a821b),to(#243f0d));/* Saf4+,Chrome */
background-image:-webkit-linear-gradient(top,#4a821b,#243f0d);/* Chrome 10+,Saf5.1+ */
background-image:-moz-linear-gradient(top,#4a821b,#243f0d);/* FF3.6 */
background-image:-ms-linear-gradient(top,#4a821b,#243f0d);/* IE10 */
background-image:-o-linear-gradient(top,#4a821b,#243f0d);/* Opera 11.10+ */
background-image:linear-gradient(top,#4a821b,#243f0d);/*border radius half the width and height of our links to create a circle*/
-moz-border-radius:15px;/* FF1-3.6 */
-webkit-border-radius:15px;/* Saf3-4,iOS 1-3.2,Android <1.6 */
border-radius:15px;/* Opera 10.5,IE9,Saf5,Chrome,FF4,iOS 4,Android 2.1+ */
/*box shadow - no offset,but a blur of 4px and spread of 1px*/
/*plus an additional box-shadow to create the glow*/
-moz-box-shadow:0 0 4px 1px #191919,inset 0 1px 0 #7ead42;/* FF3.5+ */
-webkit-box-shadow:0 0 4px 1px #191919,inset 0 1px 0 #7ead42;/* Saf3.0+,Chrome */
box-shadow:0 0 4px 1px #191919,inset 0 1px 0 #7ead42;/* Opera 10.5,IE9,Chrome 10+ */
}
/*state for selected,plus hover whilst selected. This can come before or after the general hover state due to outranking specificity*/
.paginator_p.selected,.paginator_p.selected:hover{color:#0d1804;/*1px right and down offset,no blur and pale green*/
text-shadow:1px 1px 0px #8dc953;/* FF3.5+,Opera 9+,Saf1+,Chrome */
background-color:#589225;background-image:url(img/sprite.png) no-repeat -80px 0;/*image fallback for none supporting browsers*/
background-image:-webkit-gradient(linear,left top,left bottom,from(#589225),to(#87D445));/* Saf4+,Chrome */
background-image:-webkit-linear-gradient(top,#589225,#87D445);/* Chrome 10+,Saf5.1+ */
background-image:-moz-linear-gradient(top,#589225,#87D445);/* FF3.6 */
background-image:-ms-linear-gradient(top,#589225,#87D445);/* IE10 */
background-image:-o-linear-gradient(top,#589225,#87D445);/* Opera 11.10+ */
background-image:linear-gradient(top,#589225,#87D445);/*box shadow - no offset,but a blur of 2px and spread of 1px*/
/*plus an additional box-shadow to create the glow - slightly brighter than normal state*/
-moz-box-shadow:0 0 2px 1px #191919,inset 0 1px 0 #cff3a2;/* FF3.5+ */
-webkit-box-shadow:0 0 2px 1px #191919,inset 0 1px 0 #cff3a2;/* Saf3.0+,Chrome */
box-shadow:0 0 2px 1px #191919,inset 0 1px 0 #cff3a2;/* Opera 10.5,IE9,Chrome 10+ */
}
.paginator_p:hover{color:#0d1804;/*1px right and down offset,no blur and pale green*/
text-shadow:1px 1px 0px #8dc953;background-color:#87D445;background-image:url(img/sprite.png) no-repeat -120px 0;/*image fallback for none supporting browsers*/
background-image:-webkit-gradient(linear,left top,left bottom,from(#87d445),to(#589225));/* Saf4+,Chrome */
background-image:-webkit-linear-gradient(top,#87d445,#589225);/* Chrome 10+,Saf5.1+ */
background-image:-moz-linear-gradient(top,#87d445,#589225);/* FF3.6 */
background-image:-ms-linear-gradient(top,#87d445,#589225);/* IE10 */
background-image:-o-linear-gradient(top,#87d445,#589225);/* Opera 11.10+ */
background-image:linear-gradient(top,#87d445,#589225);/*box shadow - no offset,but a blur of 2px and spread of 1px*/
/*plus an additional box-shadow to create the glow - slightly brighter than normal state*/
-moz-box-shadow:0 0 4px 1px #191919,inset 0 1px 0 #cff3a2;/* FF3.5+ */
-webkit-box-shadow:0 0 4px 1px #191919,inset 0 1px 0 #cff3a2;/* Saf3.0+,Chrome */
box-shadow:0 0 4px 1px #191919,inset 0 1px 0 #cff3a2;/* Opera 10.5,IE9,Chrome 10+ */
}
/*the slider rail*/
.paginator_slider{/*margin on the left pushes it past the nav buttons,so make the distance the total width,including margins of the nav buttons*/
margin:20px 0 20px 80px;/*with height of 8px,plus border of 1px all round our hight totals 10px*/
height:8px;background:#181818;border:1px solid #393939;border-top-color:#0f0f0f;border-left-color:#0f0f0f;/*border radius for ff,safari + chrome,css3*/
/*half the total height of our element to create rounded ends*/
-moz-border-radius:5px;/* FF1-3.6 */
-webkit-border-radius:5px;/* Saf3-4,iOS 1-3.2,Android <1.6 */
border-radius:5px;/* Opera 10.5,IE9,Saf5,Chrome,FF4,iOS 4,Android 2.1+ */
}
/*the slider,er,knob?*/
.paginator_slider .ui-slider-handle{height:20px;width:20px;margin-left:-10px;/*nudges the knob left,half its width*/
/*remove outline in ff*/
outline:none;/*border radius for ff,safari + chrome,css3*/
/*half the width and height of knob to create a circle*/
-moz-border-radius:10px;/* FF1-3.6 */
-webkit-border-radius:10px;/* Saf3-4,iOS 1-3.2,Android <1.6 */
border-radius:10px;/* Opera 10.5,IE9,Saf5,Chrome,FF4,iOS 4,Android 2.1+ */
/*alter the positioning to bring it centred to rail*/
top:-7px;/*same styling as links*/
background-color:#4A821B;background-image:url(img/sprite.png) no-repeat 0 0;/*image fallback for none supporting browsers*/
background-image:-webkit-gradient(linear,left top,left bottom,from(#4a821b),to(#243f0d));/* Saf4+,Chrome */
background-image:-webkit-linear-gradient(top,#4a821b,#243f0d);/* Chrome 10+,Saf5.1+ */
background-image:-moz-linear-gradient(top,#4a821b,#243f0d);/* FF3.6 */
background-image:-ms-linear-gradient(top,#4a821b,#243f0d);/* IE10 */
background-image:-o-linear-gradient(top,#4a821b,#243f0d);/* Opera 11.10+ */
background-image:linear-gradient(top,#4a821b,#243f0d);/*box shadow - no offset,but a blur of 4px and spread of 1px*/
/*plus an additional box-shadow to create the glow*/
-moz-box-shadow:0 0 4px 1px #191919,inset 0 1px 0 #7ead42;/* FF3.5+ */
-webkit-box-shadow:0 0 4px 1px #191919,inset 0 1px 0 #7ead42;/* Saf3.0+,Chrome */
box-shadow:0 0 4px 1px #191919,inset 0 1px 0 #7ead42;/* Opera 10.5,IE9,Chrome 10+ */
}
/*container for buttons - add some padding so we can see the drop shadow*/
.paginator_p_bloc{padding:5px 0;}
/*let's deal with the control buttons*/
/*general styles for controls*/
.control{float:left;width:40px;height:40px;margin:35px 0 0 0;position:relative;cursor:pointer;}
#max_backward{background:url(img/sprite.png) no-repeat 0 -60px;}
#over_backward{background:url(img/sprite.png) no-repeat -40px -60px;}
#over_forward{background:url(img/sprite.png) no-repeat -80px -60px;}
#max_forward{background:url(img/sprite.png) no-repeat -120px -60px;}
/*hovers*/
#max_backward:hover{background:url(img/sprite.png) no-repeat 0 -100px;}
#over_backward:hover{background:url(img/sprite.png) no-repeat -40px -100px;}
#over_forward:hover{background:url(img/sprite.png) no-repeat -80px -100px;}
#max_forward:hover{background:url(img/sprite.png) no-repeat -120px -100px;}
CSS代码(jPaginator.css):
/* must set border width with px */
.paginator_p{text-align:center;float:left;height:20px;cursor:pointer;color:white;background-color:#B7B7B7;list-style-type:none;}
.paginator_p.over{background-color:#8B8B8B;}
.paginator_p.selected{background-color:#CAFF3A;color:white;background-color:black;}
.paginator_p_wrap{position:relative;overflow:hidden;float:left;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none;}
.paginator_p_bloc{position:relative;width:3000px;}
.paginator_slider{float:left;clear:left;height:4px;top:4px;background:white;border:solid 1px black;position:relative;}
.paginator_slider .ui-slider-handle{width:8px;height:12px;position:absolute;top:-4px;background-color:black;}
.jPaginatorOver{background-color:#BCF2D5;float:left;height:20px;margin:0 2px;text-align:center;width:30px;}
.jPaginatorMax{background-color:#5FAABC;cursor:pointer;float:left;height:20px;text-align:center;width:30px;}
分享到QQ
分享到微博
微信扫一扫
