以下是 jquery animated滑动切换分页显示滚动特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery animated滑动切换分页显示代码</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script src="js/jquery.1.9.1.min.js"></script>
<script src="js/pages.js"></script>
<script type="text/javascript">
$(function () {
$("#myapp").pages({
prev: '.prevArrow',
next: '.nextArrow'
});
});
</script>
</head>
<body>
<center>
<div class="khtjcls08">
<div class="khtjcls09">
<!-- 每页显示 36个 -->
<div class="khtjcls10" id="myapp">
<div class="myappitem">
<div class="khtjcls11">1</div>
<div class="khtjcls11">2</div>
<div class="khtjcls11 error">3</div>
<div class="khtjcls11">4</div>
<div class="khtjcls11">5</div>
<div class="khtjcls11 error">6</div>
<div class="khtjcls11">7</div>
<div class="khtjcls11">8</div>
<div class="khtjcls11 error">9</div>
<div class="khtjcls11">10</div>
<div class="khtjcls11">11</div>
<div class="khtjcls11 error">12</div>
<div class="khtjcls11">13</div>
<div class="khtjcls11">14</div>
<div class="khtjcls11 error">15</div>
<div class="khtjcls11">16</div>
<div class="khtjcls11">17</div>
<div class="khtjcls11 error">18</div>
<div class="khtjcls11">19</div>
<div class="khtjcls11">20</div>
<div class="khtjcls11 error">303</div>
<div class="khtjcls11">303</div>
<div class="khtjcls11">303</div>
<div class="khtjcls11 error">303</div>
<div class="khtjcls11">303</div>
<div class="khtjcls11">303</div>
<div class="khtjcls11 error">303</div>
<div class="khtjcls11">303</div>
<div class="khtjcls11">303</div>
<div class="khtjcls11 error">303</div>
<div class="khtjcls11 error">303</div>
<div class="khtjcls11">303</div>
<div class="khtjcls11">303</div>
<div class="khtjcls11 error">303</div>
<div class="khtjcls11 error">303</div>
<div class="khtjcls11">303</div>
</div>
<div class="myappitem">
<div class="khtjcls11">1</div>
<div class="khtjcls11">2</div>
<div class="khtjcls11 error">3</div>
<div class="khtjcls11">4</div>
<div class="khtjcls11">5</div>
<div class="khtjcls11 error">6</div>
<div class="khtjcls11">7</div>
<div class="khtjcls11">8</div>
<div class="khtjcls11 error">9</div>
<div class="khtjcls11">10</div>
<div class="khtjcls11">11</div>
<div class="khtjcls11 error">12</div>
<div class="khtjcls11">13</div>
<div class="khtjcls11">14</div>
<div class="khtjcls11 error">15</div>
<div class="khtjcls11">16</div>
<div class="khtjcls11">17</div>
<div class="khtjcls11 error">18</div>
<div class="khtjcls11">19</div>
<div class="khtjcls11">20</div>
<div class="khtjcls11 error">303</div>
<div class="khtjcls11">303</div>
<div class="khtjcls11">303</div>
<div class="khtjcls11 error">303</div>
<div class="khtjcls11">303</div>
<div class="khtjcls11">303</div>
<div class="khtjcls11 error">303</div>
<div class="khtjcls11">303</div>
<div class="khtjcls11">303</div>
<div class="khtjcls11 error">303</div>
<div class="khtjcls11 error">303</div>
<div class="khtjcls11">303</div>
<div class="khtjcls11">303</div>
<div class="khtjcls11 error">303</div>
<div class="khtjcls11 error">303</div>
<div class="khtjcls11">303</div>
</div>
<div class="myappitem">
<div class="khtjcls11">1</div>
<div class="khtjcls11">2</div>
<div class="khtjcls11 error">3</div>
<div class="khtjcls11">4</div>
<div class="khtjcls11">5</div>
<div class="khtjcls11 error">6</div>
<div class="khtjcls11">7</div>
<div class="khtjcls11">8</div>
<div class="khtjcls11 error">9</div>
<div class="khtjcls11">10</div>
<div class="khtjcls11">11</div>
<div class="khtjcls11 error">12</div>
<div class="khtjcls11">13</div>
<div class="khtjcls11">14</div>
<div class="khtjcls11 error">15</div>
<div class="khtjcls11">16</div>
<div class="khtjcls11">17</div>
<div class="khtjcls11 error">18</div>
<div class="khtjcls11">19</div>
<div class="khtjcls11">20</div>
<div class="khtjcls11 error">303</div>
<div class="khtjcls11">303</div>
<div class="khtjcls11">303</div>
<div class="khtjcls11 error">303</div>
<div class="khtjcls11">303</div>
<div class="khtjcls11">303</div>
<div class="khtjcls11 error">303</div>
<div class="khtjcls11">303</div>
<div class="khtjcls11">303</div>
<div class="khtjcls11 error">303</div>
<div class="khtjcls11 error">303</div>
<div class="khtjcls11">303</div>
<div class="khtjcls11">303</div>
<div class="khtjcls11 error">303</div>
<div class="khtjcls11 error">303</div>
<div class="khtjcls11">303</div>
</div>
</div>
</div>
<div class="fn-left">
<span class="prevArrow"></span>
<div class="pages"><span id="myApp-current-num">1</span> / <span id="totalnum">6</span></div>
<span class="nextArrow"></span>
</div>
</div>
</div>
<center>
</body>
</html>
JS代码(pages.js):
;
(function($){
$.fn.pages = function(options){
var defaults ={
prev:'.prev',//上一页按钮next:'.next',//下一页按钮prevClass:'prevArrowC',//上一页按钮能点击的classnextClass:'nextArrowC',//下一页按钮能点击的classpageObj:'.myappitem',//每页移动的元素pageWidth:530,//每次移动的元素宽度totalnum:'#totalnum',//共几页赋值元素currnum:'#myApp-current-num'//当前第几页赋值元素}
;
// Extend our default options with those provided.var opts = $.extend(defaults,options);
var appro = $(this);
//控制的元素var appprev = opts.prev;
//上一页按钮var appnext = opts.next;
//下一页按钮/*只有一页时 上一页按钮和下一页按钮都不能点击 默认样式是都不能点击的样式 大于一页时 下一页按钮能点击 以此类推下面两个class 就是上一页 下一页按钮能点击时的样式当上一页 下一页按钮能点击时 分别加上对应的class 不能点击时 移除对应的class*/
var prevClass = opts.prevClass;
//上一页按钮能点击的classvar nextClass = opts.nextClass;
//下一页按钮能点击的classvar totalnum = $(opts.pageObj).length;
//获取总页数var warp = opts.pageWidth;
//每次移动的像素var currnum = 1;
//初始第一页$(opts.totalnum).text(totalnum);
if (currnum == 1 && currnum < totalnum){
//总页数大于1且不在最后一页时$(appnext).addClass(nextClass);
}
$(appnext).click(function (){
//下一页if (!appro.is(":animated")){
// 如果正处于动画中的则不进行动画if (currnum < totalnum){
//当前页码小于总页数appro.animate({
"left":"-=" + warp}
,300);
currnum++;
//当前页码+1$(opts.currnum).text(currnum);
//当前页码赋值if (currnum == totalnum){
//最后一页时 下一页按钮禁用$(this).removeClass(nextClass);
}
else{
$(this).addClass(nextClass);
}
$(appprev).addClass(prevClass);
}
}
}
);
$(appprev).click(function (){
//上一页if (!appro.is(":animated")){
// 如果正处于动画中的则不进行动画if (currnum <= totalnum && currnum > 1){
currnum--;
//当前页码-1appro.animate({
"left":"+=" + warp}
,300);
$(opts.currnum).text(currnum);
//当前页码赋值if (currnum == 1){
//第一页时 上一页按钮禁用$(this).removeClass(prevClass);
}
else{
$(this).addClass(prevClass);
}
$(appnext).addClass(nextClass);
}
}
}
);
}
;
}
)(jQuery);
CSS代码(style.css):
@charset "utf-8";/* CSS Document */
*{margin:0px;padding:0px;font-family:"宋体";}
/*解决IE6闪动问题 start*/
*html{background-image:url(about:blank);background-attachment:fixed;height:100%;}
/*解决IE6闪动问题 end*/
body{margin:0;padding:0;font-size:14px;font-family:"宋体";font-size:14px;height:100%;}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0;margin:0;}
ol,ul,li{list-style-type:none;}
img{vertical-align:top;border:0;margin:0px;padding:0px;}
a{cursor:pointer;}
a,input,textarea{text-decoration:none;border:0;outline:none;}
a:active{star:expression_r(this.onFocus=this.blur());background:none;}
:focus{outline:0;}
/*clear fix*/
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-block;}
/*hide for IE mac start*/
.clearfix{display:block;}
.khtjcls08{width:576px;height:251px;background:url(../images/black.png);margin-top:25px;position:relative;overflow:hidden;}
.khtjcls09{width:530px;height:150px;margin:0px auto;overflow:hidden;position:relative;top:30px;}
.khtjcls10{width:9999px;height:150px;overflow:hidden;position:relative;left:0px;}
.myappitem{width:530px;height:150px;overflow:hidden;float:left;}
.khtjcls11{width:30px;height:21px;line-height:21px;text-align:center;display:inline-block;font-family:"微软雅黑";font-size:16px;color:#FFFFFF;float:left;margin-right:14px;margin-bottom:30px;word-break:keep-all;white-space:nowrap;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;}
.error{background:url(../images/error.png) no-repeat center;}
/*分页样式*/
.fn-left{width:90px;height:14px;position:absolute;bottom:40px;left:30px;}
.prevArrow,.nextArrow{display:block;width:8px;height:14px;position:absolute;top:0px;-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
.prevArrow{background:url(../images/pageL.png);left:0px;}
.nextArrow{background:url(../images/pageR.png);right:0px;}
.prevArrowC,.nextArrowC{cursor:pointer;}
.prevArrowC:hover{background:url(../images/pageLH.png);}
.nextArrowC:hover{background:url(../images/pageRH.png);}
.pages{width:50px;height:14px;line-height:14px;font-weight:normal;position:absolute;top:0px;left:16px;color:#F3BF59;font-family:"微软雅黑";font-size:16px;text-align:center;}
.pages span{font-family:"微软雅黑";}
.pages #myApp-current-num{color:#ea5501;font-weight:bold;font-family:"微软雅黑";}
分享到QQ
分享到微博
微信扫一扫
