/* kun_page.css lxk 2014.06.16 */ .kun_page {font-size: 12px;line-height:23px;font-family:"Microsoft YaHei";} .kun_page .k_p_page{position:relative;} .kun_page div {float: left;margin: 3px;border: solid 1px #ccc;cursor: pointer;color: #333;min-width:12px;text-align:center;padding:0px 5px;} .kun_page em {display: block;float: left;margin: 2px;} .kun_page .k_p_current {background: #ccc;color: #fff;-webkit-animation:scroll_b 300ms;animation:scroll_b 300ms;} .kun_page .k_cl {clear: both;float: none;border: none;margin: 0px;padding: 0px;width:0px;height:0px;} .kun_page .k_custom {display: block;float: left;margin: 3px 3px 3px 20px;} .kun_page .k_ipt {width: 30px;height: 21px;border: solid 1px #ccc;text-align: center;vertical-align:middle;} .kun_page .k_m{ opacity: 0; width: 1%; height: 1%;top:0px;left:0px; display:block; position: absolute; } .kun_page .sc_l{background: -webkit-gradient(linear, 0 100%, 100% 100%, from(#CCCCCC), to(#645F5F)); -webkit-transform:translate(-50px);-webkit-animation:scroll_k_l 300ms linear; background: -moz-linear-gradient(left,#CCCCCC 0%, #645F5F 100%); background: -ms-linear-gradient(left,#CCCCCC 0%, #645F5F 100%); transform:translate(-50px);animation:scroll_k_l 300ms linear; } .kun_page .sc_r{background: -webkit-gradient(linear, 0 100%, 100% 100%, from(#645F5F), to(#CCCCCC)); -webkit-transform:translate(50px); -webkit-animation:scroll_k_r 300ms linear; background: -moz-linear-gradient(left, #645F5F 0%, #CCCCCC 100%); background: -ms-linear-gradient(left,#CCCCCC 0%, #645F5F 100%); transform:translate(50px); animation:scroll_k_r 300ms linear; } /* animation */ @-webkit-keyframes scroll_k_l{ 0%{-webkit-transform:translate(-100px);opacity:0.2;width:200%;height:100%;} 99%{-webkit-transform:translate(-20px);opacity:0;width:200%;height:100%;} 100%{-webkit-transform:translate(-20px);opacity:0;width:1%;height:1%;} } @-webkit-keyframes scroll_k_r{ 0%{-webkit-transform:translate(100px);opacity:0.2;width:200%;height:100%;} 99%{-webkit-transform:translate(20px);opacity:0;width:200%;height:100%;} 100%{-webkit-transform:translate(20px);opacity:0;width:1%;height:1%;} } @keyframes scroll_k_l{ 0%{transform:translate(-100px);opacity:0.2;width:200%;height:100%;} 99%{transform:translate(-20px);opacity:0;width:200%;height:100%;} 100%{transform:translate(-20px);opacity:0;width:1%;height:1%;} } @keyframes scroll_k_r{ 0%{transform:translate(100px);opacity:0.2;width:200%;height:100%;} 99%{transform:translate(20px);opacity:0;width:200%;height:100%;} 100%{transform:translate(20px);opacity:0;width:1%;height:1%;} } @-webkit-keyframes scroll_b{ 0%,99%{background: #fff;color: #000;} 100%{background: #ccc;color: #fff;} } @keyframes scroll_b{ 0%,99%{background: #fff;color: #000;} 100%{background: #ccc;color: #fff;} }
样式和动画都可以自己修改(好吧，动画效果很朴素，闹哪样，明明想了很久好吗)
pageChange事件里面也没有过多的其他处理，比如我们公司前后台处理json就有一套方案，ajax提交的参数也有处理
所以若有需求，完全可以在我的代码上再封装一层
另外插件内公开的方法暂只有几个，可视情况增加
代码下载(后台查询代码需要自己写一个)：这里
您可能感兴趣的文章: