经验分享程序开发文档资料数据资源其它资源

jQuery可拖动分页插件滑动滚动特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery可拖动分页插件滑动滚动特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jQuery可拖动分页插件滑动滚动特效代码

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery可拖动分页插件</title>
    <style>
@import url("http://fonts.googleapis.com/css?family=Oxygen:400,700");
.pageForm {
  display: block;
  margin-top: 14px;
}
.pageInput,
.pageButton {
  padding: 0px 10px;
  height: 30px;
  line-height: 30px;
  border-radius: 3px;
  border: 1px solid #bbb;
  display: inline-block;
  vertical-align: middle;
}
.pageInput {
  width: 28px;
  height: 28px;
  box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.1);
}
.pageLabel {
  position: absolute;
  left: -9999em;
}
.pageButton {
  background: linear-gradient(#f46652 0%, #dd5846 100%);
  border-color: #dd5846;
  color: white;
}
.pageSkip {
  display: inline-block;
  background: transparent url('css/monotone_arrow_left_small.png') no-repeat -10px -10px;
  text-indent: -999em;
  background-size: 40px;
  opacity: 0.7;
  vertical-align: middle;
  width: 20px;
  height: 20px;
}
.pageNext {
  background-image: url('css/monotone_arrow_right.png');
}
.pageNumber {
  position: relative;
  top: -38px;
  left: 50%;
  font-size: 12px;
  color: #333;
  width: 60px;
  display: block;
  text-align: center;
  margin-left: -17px;
  background: white;
  padding: 5px 10px;
  border-radius: 3px;
  box-shadow: 0 0 5px rgba(151, 38, 20, 0.15);
}
.pageNumber:after {
  content: " ";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  top: 24px;
  border: 6px solid transparent;
  border-top-color: white;
}
.pagePip {
  width: 1px;
  height: 3px;
  background: black;
  position: absolute;
  bottom: -10px;
  opacity: 0.4;
  box-shadow: -1px 0 0 #ffffff;
}
.pageMaxPip,
.pageMinPip {
  font-size: 12px;
  color: #777;
  position: absolute;
  bottom: -30px;
  width: 20px;
}
.pageMaxPip {
  right: -10px;
}
.pageMinPip {
  left: -10px;
}
.pagination {
  width: 80%;
  margin: 50px auto;
  text-align: center;
}
.pageSlider {
  display: inline-block;
}
.ui-slider-horizontal {
  width: 60%;
  height: 6px;
  top: 0px;
  margin: 0px 10px 2px;
  border-radius: 6px;
  position: relative;
  display: inline-block;
  background: #F46652;
  background-image: repeating-linear-gradient(28deg, transparent, transparent 10px, #dd5846 10px, #dd5846 20px);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.4);
}
.ui-slider-horizontal:before {
  content: " ";
  position: absolute;
  width: auto;
  height: 16px;
  top: -5px;
  left: -4px;
  right: -4px;
  border-radius: 10px;
  z-index: -1;
  background: linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(255, 255, 255, 0.8) 90%);
}
.ui-slider.long .ui-slider-handle {
  height: 12px;
  width: 30px;
  background: #f1f1f1;
  display: block;
  position: absolute;
  border-radius: 50px;
  margin-top: -3px;
  margin-left: -15px;
  text-decoration: none;
  background: #f5f5f5;
  background: linear-gradient(#f5f5f5 0%, #cccccc 100%);
  box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.35), 0 0 2px 1px rgba(0, 0, 0, 0.15), 0 3px 3px rgba(0, 0, 0, 0.2), 0 7px 5px rgba(0, 0, 0, 0.1), 0 11px 10px rgba(0, 0, 0, 0.1);
}
.ui-slider.long .ui-slider-handle::before,
.ui-slider.long .ui-slider-handle::after {
  content: " ";
  width: 2px;
  height: 40%;
  position: absolute;
  background: transparent;
  border-radius: 0px;
  box-shadow: -1px 0px 0px rgba(255, 255, 255, 0.8), 1px 0px 0px rgba(255, 255, 255, 0.8), 2px 0 0 rgba(0, 0, 0, 0.3), 1px 0 0 rgba(0, 0, 0, 0.3) inset;
}
.ui-slider.long .ui-slider-handle::before {
  left: 10px;
  top: 30%;
}
.ui-slider.long .ui-slider-handle::after {
  right: 12px;
  top: 30%;
}
@media (max-width: 550px) {
  .pagination {
    width: auto;
  }
  .pageForm {
    display: block;
    margin-top: 20px;
  }
  .pageInput {
    margin: 0;
  }
  .pageSlider {
    width: 260px;
    margin: 0 15px;
  }
}
body {
  min-height: 400px;
  padding-top: 20px;
  background: linear-gradient(#f5f5f5 0%, #dde4e9 100%);
  font-family: oxygen;
}
h1,
h3 {
  width: 80%;
  color: #555;
  margin: 0 auto;
  text-align: center;
}
h1 {
  font-size: 26px;
}
h3 {
  color: #777;
  font-size: 18px;
  font-weight: normal;
}
p {
  text-align: center;
  font-size: 14px;
  color: #111;
  margin-top: 50px;
}
#pageSliderDescription {
  position: absolute;
  left: -999em;
  display: inline-block;
  width: 0;
  height: 0;
}

</style>

</head>

<body>

<h1>Responsive, Accessible, Alternate Pagination experiment.</h1>
<h3>I'm attempting to make a more interesting and user-friendly pagination</h3>
<p>Drag or use Arrow Keys to set the desired page, then click 'Go' or press 'Enter' (CTRL + Arrow Keys skip by 10.)</p>

  <section class="pagination" role="navigation">

    <div id="pageSliderDescription">
      Pagination: "Arrow" keys to move between pages, 
      "Enter" to go to selected page. (ctrl+arrow skips 10).</div>
    <div class="pageSlider long"></div>

    <form class="pageForm" action="#">

      <label class="pageLabel" for="pageInput">
        Page number you'd like to go to. (Max of 30)
      </label>

       <a 
      class="pagePrev pageSkip" 
      href="#?page=6" 
      title="Previous Page (6)">Previous Page</a>

      <input id="pageInput" class="pageInput" 
      type="text" maxlength="3" placeholder="#">

      <a 
      class="pageNext pageSkip" 
      href="#?page=8" 
      title="Next Page (8)">Next Page</a>

      <button class="pageButton" 
      title="Go to chosen page of results">Go</button>

    </form>
  </section>
  <script src='js/jquery.js'></script>
  <script src='js/jquery-ui.js'></script>
  <script src="js/index.js"></script>
</body>
</html>

JS代码(index.js):

$(document).ready( function(){
	var pagesMax = 30;
	var pagesMin = 1;
	var startPage = 7;
	var url = "http://sc.chinaz.com/jiaoben/";
	$('.pagination .pageSlider').slider({
	value:startPage,max:pagesMax,min:pagesMin,animate:true,create:function( event,ui ){
	$('.pagination .pageSlider .ui-slider-handle').attr({
	"aria-valuenow":startPage,"aria-valuetext":"Page " + startPage,"role":"slider","aria-valuemin":pagesMin,"aria-valuemax":pagesMax,"aria-describedby":"pageSliderDescription"}
);
	$('.pagination .pageInput').val( startPage );
}
}
).on( 'slide',function(event,ui){
	// let user skip 10 pages with keyboard;
	) if( event.metaKey || event.ctrlKey ){
	if( ui.value > $(this).slider('value') ){
	if( ui.value+9 < pagesMax ){
	ui.value+=9;
}
else{
	ui.value=pagesMax}
$(this).slider('value',ui.value);
}
else{
	if( ui.value-9 > pagesMin ){
	ui.value-=9;
}
else{
	ui.value=pagesMin}
$(this).slider('value',ui.value);
}
event.preventDefault();
}
$('.pagination .pageNumber span').text( ui.value );
	$('.pagination .pageInput').val( ui.value );
}
).on('slidechange',function(event,ui){
	$('.pagination .pageNumber') .attr('role','alert') .find('span') .text( ui.value );
	$('.pagination .pageInput').val( ui.value );
	$('.pagination .pageSlider .ui-slider-handle').attr({
	"aria-valuenow":ui.value,"aria-valuetext":"Page " + ui.value}
);
}
);
	$('.pagination .pageSlider .ui-slider-handle').on( 'keyup',function(e){
	if( e.which == 13 ){
	var curPage = $('.pagination .pageSlider').slider('value');
	alert( 'we would now send you to:' + url.replace( /{
	{
	.}
}
/,curPage ));
}
}
);
	$('.pagination .pageInput').on( 'change',function(e){
	$('.pagination .pageSlider').slider( 'value',$(this).val() );
}
);
	var tmr;
	$('.pageSkip').on('click',function(e){
	e.preventDefault();
	var $this = $(this);
	if( $this.hasClass('pageNext') ){
	var curPage = $('.pagination .pageSlider').slider('value')+1;
}
else if( $this.hasClass('pagePrev') ){
	var curPage = $('.pagination .pageSlider').slider('value')-1;
}
$('.pagination .pageSlider').slider('value',curPage);
	clearTimeout(tmr);
	tmr = setTimeout( function(){
	alert( 'we would now send you to:' + url.replace( /{
	{
	.}
}
/,curPage ));
}
,1000);
}
);
	function sliderPips( min,max ){
	var pips = max-min;
	var $pagination = $('.pagination .pageSlider');
	for( i=0;
	i<=pips;
	i++ ){
	var s = $('<span class="pagePip"/>').css({
	left:'' + (100/pips)*i + '%'}
);
	$pagination.append( s );
}
var minPip = $('<span class="pageMinPip">'+min+'</span>');
	var maxPip = $('<span class="pageMaxPip">'+max+'</span>');
	$pagination.prepend( minPip,maxPip );
}
;
	sliderPips( pagesMin,pagesMax );
	function sliderLabel(){
	$('.pagination .ui-slider-handle').append( '<span class="pageNumber">Page <span>' + $('.pagination .pageSlider').slider('value') + '</span></span>');
}
;
	sliderLabel();
	$('.pagination .pageButton').on('click',function(e){
	e.preventDefault();
	var curPage = $('.pagination .pageSlider').slider('value');
	alert( 'we would now send you to:' + url.replace( /{
	{
	.}
}
/,curPage ));
}
);
}
);

CSS代码(style.css):

@import url("http://fonts.googleapis.com/css?family=Oxygen:400,700");.pageForm{display:block;margin-top:14px;}
.pageInput,.pageButton{padding:0px 10px;height:30px;line-height:30px;border-radius:3px;border:1px solid #bbb;display:inline-block;vertical-align:middle;}
.pageInput{width:28px;height:28px;box-shadow:inset 1px 2px 1px rgba(0,0,0,0.1);}
.pageLabel{position:absolute;left:-9999em;}
.pageButton{background:linear-gradient(#f46652 0%,#dd5846 100%);border-color:#dd5846;color:white;}
.pageSkip{display:inline-block;background:transparent url('http://cdn1.iconfinder.com/data/icons/brightmix/128/monotone_arrow_left_small.png') no-repeat -10px -10px;text-indent:-999em;background-size:40px;opacity:0.7;vertical-align:middle;width:20px;height:20px;}
.pageNext{background-image:url('http://cdn1.iconfinder.com/data/icons/brightmix/128/monotone_arrow_right.png');}
.pageNumber{position:relative;top:-38px;left:50%;font-size:12px;color:#333;width:60px;display:block;text-align:center;margin-left:-17px;background:white;padding:5px 10px;border-radius:3px;box-shadow:0 0 5px rgba(151,38,20,0.15);}
.pageNumber:after{content:" ";display:block;position:absolute;width:0;height:0;top:24px;border:6px solid transparent;border-top-color:white;}
.pagePip{width:1px;height:3px;background:black;position:absolute;bottom:-10px;opacity:0.4;box-shadow:-1px 0 0 #ffffff;}
.pageMaxPip,.pageMinPip{font-size:12px;color:#777;position:absolute;bottom:-30px;width:20px;}
.pageMaxPip{right:-10px;}
.pageMinPip{left:-10px;}
.pagination{width:80%;margin:50px auto;text-align:center;}
.pageSlider{display:inline-block;}
.ui-slider-horizontal{width:60%;height:6px;top:0px;margin:0px 10px 2px;border-radius:6px;position:relative;display:inline-block;background:#F46652;background-image:repeating-linear-gradient(28deg,transparent,transparent 10px,#dd5846 10px,#dd5846 20px);box-shadow:inset 0 2px 5px rgba(0,0,0,0.4);}
.ui-slider-horizontal:before{content:" ";position:absolute;width:auto;height:16px;top:-5px;left:-4px;right:-4px;border-radius:10px;z-index:-1;background:linear-gradient(rgba(0,0,0,0.1) 0%,rgba(255,255,255,0.8) 90%);}
.ui-slider.long .ui-slider-handle{height:12px;width:30px;background:#f1f1f1;display:block;position:absolute;border-radius:50px;margin-top:-3px;margin-left:-15px;text-decoration:none;background:#f5f5f5;background:linear-gradient(#f5f5f5 0%,#cccccc 100%);box-shadow:0 0 10px 0px rgba(0,0,0,0.35),0 0 2px 1px rgba(0,0,0,0.15),0 3px 3px rgba(0,0,0,0.2),0 7px 5px rgba(0,0,0,0.1),0 11px 10px rgba(0,0,0,0.1);}
.ui-slider.long .ui-slider-handle::before,.ui-slider.long .ui-slider-handle::after{content:" ";width:2px;height:40%;position:absolute;background:transparent;border-radius:0px;box-shadow:-1px 0px 0px rgba(255,255,255,0.8),1px 0px 0px rgba(255,255,255,0.8),2px 0 0 rgba(0,0,0,0.3),1px 0 0 rgba(0,0,0,0.3) inset;}
.ui-slider.long .ui-slider-handle::before{left:10px;top:30%;}
.ui-slider.long .ui-slider-handle::after{right:12px;top:30%;}
@media (max-width:550px){.pagination{width:auto;}
.pageForm{display:block;margin-top:20px;}
.pageInput{margin:0;}
.pageSlider{width:260px;margin:0 15px;}
}
body{min-height:400px;padding-top:20px;background:linear-gradient(#f5f5f5 0%,#dde4e9 100%);font-family:oxygen;}
h1,h3{width:80%;color:#555;margin:0 auto;text-align:center;}
h1{font-size:26px;}
h3{color:#777;font-size:18px;font-weight:normal;}
p{text-align:center;font-size:14px;color:#111;margin-top:50px;}
#pageSliderDescription{position:absolute;left:-999em;display:inline-block;width:0;height:0;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
99.22 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
99.22 KB
立即下载
卞娴叶苑
了解
打赏作者 鼓励作者
Html 滑动滚动特效
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章