jQuery UI分页滑块js特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery UI分页滑块js特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
		<title>jQuery UI分页滑块</title>
		<link rel="stylesheet" type="text/css" href="css/demo.css" />
		<link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<script src="js/modernizr.custom.63321.js"></script>
	</head>
	<body>
		<div class="container">	

			<header class="clearfix">
				<h1>jQuery UI分页滑块</h1>
			</header>
			<div class="main">
				<div id="preview" class="preview">
					<span>1</span>
				</div>
				<div id="slider" class="sp-slider-wrapper">
					<nav>
						<a href="#" class="sp-prev">Previous</a>
						<a href="#" class="sp-next">Next</a>
					</nav>
				</div>
			</div>
		</div><!-- /container -->
		<script src="js/jquery-1.9.1.js"></script>
		<script src="js/jquery-ui.min.js"></script>
		<script src="js/jquery.ui.touch-punch.min.js"></script>
		<script src="js/jquery.pagination.js"></script>
		<script>
			$(function() {

				var $update = $( '#preview > span' );

				$( "#slider" ).pagination( {
					total : 100,
					onChange : function( value ) {
						$update.text( value );
					}
				} );

			});
		</script>
</body>
</html>

JS代码(jquery.pagination.js):

/** * Slider Pagination Concept * jquery.pagination.js v1.0.0 * http://www.codrops.com * * Licensed under the MIT license. * http://www.opensource.org/licenses/mit-license.php * * Copyright 2012,Codrops * http://www.codrops.com */
;
	( function( $,window,undefined ){
	'use strict';
	$.Slider = function( settings,element ){
	this.$el = element;
	this.value = settings.value;
	this.total = settings.total;
	this.width = settings.width;
	this._create();
}
;
	$.Slider.prototype ={
	_create:function(){
	var self = this;
	this.slider = this.$el.slider({
	value:this.value,min:1,max:this.total,step:1}
);
	this.$value = $( '<span>' + this.value + '</span>' );
	this.getHandle().append( this.$value );
}
,setValue:function( value ){
	this.value = value;
	this.$value.text( value );
	this.slider.slider( 'value',value );
}
,getValue:function(){
	return this.value;
}
,getHandle:function(){
	return this.$el.find( 'a.ui-slider-handle' );
}
,getSlider:function(){
	return this.slider;
}
,getSliderEl:function(){
	return this.$el;
}
,next:function( callback ){
	if( this.value < this.total ){
	this.setValue( ++this.value );
	if( callback ){
	callback.call( this,this.value );
}
}
}
,previous:function( callback ){
	if( this.value > 1 ){
	this.setValue( --this.value );
	if( callback ){
	callback.call( this,this.value );
}
}
}
}
;
	$.Pagination = function( options,element ){
	this.$el = $( element );
	this._init( options );
}
;
	// the options$.Pagination.defaults ={
	value:1,total:5,width:200,onChange:function( value ){
	return false;
}
,onSlide:function( value ){
	return false;
}
}
;
	$.Pagination.prototype ={
	_init:function( options ){
	// optionsthis.options = $.extend( true,{
}
,$.Pagination.defaults,options );
	var transEndEventNames ={
	'WebkitTransition':'webkitTransitionEnd','MozTransition':'transitionend','OTransition':'oTransitionEnd','msTransition':'MSTransitionEnd','transition':'transitionend'}
;
	this.transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ];
	$.fn.applyStyle = Modernizr.csstransitions ? $.fn.css:$.fn.animate;
	this._layout();
	this._initEvents();
}
,_layout:function(){
	// next and previousthis.$navNext = this.$el.find( 'nav > a.sp-next' );
	this.$navPrev = this.$el.find( 'nav > a.sp-prev' );
	// slidervar $slider = $( '<div class="sp-slider"></div>' ).appendTo( this.$el );
	this.slider = new $.Slider({
	value:this.options.value,total:this.options.total,width:this.options.width}
,$slider );
	// control if the slider is opened/closedthis.isSliderOpened = false;
}
,_initEvents:function(){
	var self = this;
	this.slider.getHandle().on( 'click',function(){
	if( self.isSliderOpened ){
	return false;
}
self.isSliderOpened = true;
	self.slider.getSliderEl().addClass( 'sp-slider-open' );
	// expand slider wrapperself.$el.stop().applyStyle({
	width:self.options.width}
,$.extend( true,[],{
	duration:'150ms'}
) );
	// hide navigationself.toggleNavigation( false );
	return false;
}
);
	this.slider.getSlider().on({
	'slidestop':function( event,ui ){
	if( !self.isSliderOpened ){
	return false;
}
var animcomplete = function(){
	self.isSliderOpened = false;
	self.slider.getSliderEl().removeClass( 'sp-slider-open' );
	// show navigationself.toggleNavigation( true );
}
;
	self.$el.stop().applyStyle({
	width:0}
,$.extend( true,[],{
	duration:'150ms',complete:animcomplete}
) ).on( self.transEndEventName,function(){
	$( this ).off( self.transEndEventName );
	animcomplete.call();
}
);
	self.options.onChange( ui.value );
}
,'slide':function( event,ui ){
	if( !self.isSliderOpened ){
	return false;
}
self.slider.setValue( ui.value );
	self.options.onSlide( ui.value );
}
}
);
	this.$navNext.on( 'click',function(){
	self.slider.next( function( value ){
	self.options.onChange( value );
}
);
	return false;
}
);
	this.$navPrev.on( 'click',function(){
	self.slider.previous( function( value ){
	self.options.onChange( value );
}
);
	return false;
}
);
}
,toggleNavigation:function( toggle ){
	$.fn.render = toggle ? $.fn.show:$.fn.hide;
	this.$navNext.render();
	this.$navPrev.render();
}
}
$.fn.pagination = function( options ){
	var instance = $.data( this,'pagination' );
	if ( typeof options === 'string' ){
	var args = Array.prototype.slice.call( arguments,1 );
	this.each(function(){
	instance[ options ].apply( instance,args );
}
);
}
else{
	this.each(function(){
	instance ? instance._init():instance = $.data( this,'pagination',new $.Pagination( options,this ) );
}
);
}
return instance;
}
;
}
)( jQuery,window );

CSS代码(demo.css):

/* General Demo Style */
@import url(http://fonts.googleapis.com/css?family=Lato:400,700,900);html{height:100%;}
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0;}
/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
.clearfix{*zoom:1;}
body{font-family:'Lato',Calibri,Arial,sans-serif;background:#d2eaff url(../images/noise2.png);font-weight:300;font-size:100%;color:#333;overflow:scroll;overflow-x:hidden;}
a{color:#555;text-decoration:none;}
.container{width:100%;position:relative;}
.main,.container > header{margin:0 auto;position:relative;}
.main{width:40%;min-width:320px;}
.container > header{padding:30px;width:90%;max-width:960px;}
.container > header h1{font-size:2em;margin:0;font-weight:700;color:#fff;text-align:center;text-shadow:0 1px 1px rgba(0,0,0,0.2);}
.container > header h1 span{display:block;font-size:60%;font-weight:300;}
/* Header Style */
.codrops-top{line-height:2.2em;font-size:0.7em;background:#fff;background:rgba(255,255,255,0.5);text-transform:uppercase;z-index:9999;position:relative;box-shadow:1px 0px 2px rgba(0,0,0,0.2);}
.codrops-top a{padding:0px 10px;letter-spacing:1px;color:#333;display:inline-block;}
.codrops-top a:hover{background:rgba(255,255,255,0.8);color:#000;}
.codrops-top span.right{float:right;}
.codrops-top span.right a{float:left;display:block;}
.preview{background:rgba(161,207,246,0.2);border-radius:10px;margin:30px;height:300px;text-align:center;box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);}
.preview span{color:#9cc5e8;font-size:200px;line-height:300px;text-shadow:0 1px 1px rgba(255,255,255,0.3),0 -1px 0 rgba(0,0,0,0.5);font-weight:700;}

CSS代码(style.css):

@font-face{font-family:'arrowicons';src:url("../font/arrowicons.eot");src:url("../font/arrowicons.eot?#iefix") format('embedded-opentype'),url("../font/arrowicons.woff") format('woff'),url("../font/arrowicons.ttf") format('truetype'),url("../font/arrowicons.svg#arrowicons") format('svg');font-weight:normal;font-style:normal;}
.sp-slider-wrapper{box-sizing:content-box;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;padding:15px 65px;position:relative;margin:0 auto;width:0px;-webkit-transition:width 150ms ease-out;transition:width 150ms ease-out;}
.sp-slider-wrapper nav a{position:absolute;width:50px;height:50px;line-height:50px;top:0;cursor:pointer;text-indent:-9000px;}
.sp-slider-wrapper nav a.sp-prev{left:0px;}
.sp-slider-wrapper nav a.sp-next{right:0px;}
.sp-slider-wrapper nav a:after{font-family:'arrowicons';font-style:normal;font-weight:normal;speak:none;position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;line-height:inherit;text-indent:0px;font-size:30px;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,0.2);}
.sp-slider-wrapper nav a.sp-prev:after{content:'\e75d';}
.sp-slider-wrapper nav a.sp-next:after{content:'\e75e';}
.sp-slider{background:rgba(151,151,151,0.1);border:1px solid rgba(108,108,108,0.2);border-bottom:1px solid rgba(108,108,108,0.05);box-shadow:0 1px 0 rgba(255,255,255,0.7);height:20px;border-radius:20px;position:relative;}
.sp-slider .ui-slider-handle{outline:none;width:40px;height:40px;border-radius:50%;border:none;top:-12px;margin-left:-20px;left:0;cursor:pointer;position:absolute;background-color:#fff;background-image:-webkit-linear-gradient(-90deg,transparent,rgba(0,0,0,0.07) 80%);background-image:-moz-linear-gradient(-90deg,transparent,rgba(0,0,0,0.07) 80%);background-image:-o-linear-gradient(-90deg,transparent,rgba(0,0,0,0.07) 80%);background-image:linear-gradient(-90deg,transparent,rgba(0,0,0,0.07) 80%);box-shadow:0 -1px 0 rgba(0,0,0,0.1),0 1px 0 rgba(255,255,255,0.7),inset 1px -1px 1px rgba(0,0,0,0.1);}
.sp-slider .ui-slider-handle.ui-state-active{box-shadow:0 -1px 0 rgba(0,0,0,0.1),0 1px 0 rgba(255,255,255,0.7),inset 1px -1px 2px rgba(0,0,0,0.15);}
.sp-slider-open .ui-slider-handle{box-shadow:0 1px 2px rgba(0,0,0,0.1),0 6px 3px -3px rgba(0,0,0,0.1);}
.sp-slider-open .ui-slider-handle.ui-state-active{box-shadow:0 1px 2px rgba(0,0,0,0.1),0 4px 3px -3px rgba(0,0,0,0.1);}
.sp-slider .ui-slider-handle:after,.sp-slider .ui-slider-handle:before{content:'';position:absolute;left:10%;top:10%;width:80%;height:80%;border-radius:50%;opacity:0.8;background-color:#fff;background-image:-webkit-linear-gradient(-90deg,rgba(0,0,0,0.06),transparent 80%);background-image:-moz-linear-gradient(-90deg,rgba(0,0,0,0.06),transparent 80%);background-image:-o-linear-gradient(-90deg,rgba(0,0,0,0.06),transparent 80%);background-image:linear-gradient(-90deg,rgba(0,0,0,0.06),transparent 80%);}
.sp-slider .ui-slider-handle span{position:absolute;width:100%;height:100%;z-index:10;text-align:center;background:transparent;color:#ccc;font-family:'Lato',Arial,sans-serif;font-weight:900;line-height:40px;font-size:14px;text-shadow:0 1px 1px rgba(255,255,255,0.9);}
.sp-slider-open .ui-slider-handle span{color:#aaa;}

附件:下载该文件资源,减少时间成本(增值服务)