5种风格的 jQuery 分页效果【附代码】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>jQuery Pagination - jPaginate</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="jPaginate - jQuery Pagination Plugin" />
<meta name="keywords" content="jquery, plugin, pagination, fancy" />
<link rel="stylesheet" type="text/css" href="http://1112.qkxue.net/css/style.css" media="screen"/>
<link rel="stylesheet" href="http://1112.www.qixoo.qixoo.com/demo/common/init.css">
<style>
body{
background: #a7c7dc repeat-x top left;
font-family: verdana;
padding:0px;
margin:0px;
letter-spacing:2px;
}
.top-banner {
background-color: rgba(0,0,0,0.5);
}
.header{
position:absolute;
top:0px;
left:0px;
width:100%;
height:80px;
}
.header h1{
color:#fff;
font-size: 38px;
margin:0px 0px 0px 30px;
font-weight:100;
line-height:80px;
padding:0px;
}
.footer{
width:100%;
margin:10px 0px 5px 0px;
}
a img{
border:none;
outline:none;
}
.content{
margin-top:100px;
padding:0px;
bottom:0px;
}
.about{
width:100%;
height:400px;
background:transparent url(about.png) repeat-x top left;
border-top:2px solid #ccc;
border-bottom:2px solid #000;
}
.about .text{
width:16%;
margin:5px 2% 10px 2%;
height:380px;
float:left;
color:#FCFEF3;
font-size: 16px;
text-align:justify;
letter-spacing:0px;
}
.about .text h1{
border-bottom: 1px dashed #ccc;
color:#fff;
}
.demo{
width:580px;
padding:10px;
margin:10px auto;
border: 1px solid #fff;
background-color:#f7f7f7;
}
h1{
color:#404347;
margin:5px 30px 20px 0px;
font-weight:100;
}
.pagedemo{
border: 1px solid #CCC;
width:310px;
margin:2px;
padding:50px 10px;
text-align:center;
background-color:white;
}
</style>
</head>
<body>
<!-- <div class="header">
<h1>jPaginate</h1>
</div> -->
<div class="content" style="margin-bottom:100px">
<div class="demo">
<h1>分页效果 1</h1>
<div id="demo1">
</div>
</div>
<div class="demo">
<h1>分页效果 2</h1>
<div id="demo2">
</div>
</div>
<div class="demo">
<h1>分页效果 3</h1>
<div id="demo3">
</div>
</div>
<div class="demo">
<h1>分页效果 4</h1>
<div id="demo4">
</div>
</div>
<div id="paginationdemo" class="demo">
<h1>分页效果 5</h1>
<div id="p1" class="pagedemo _current" style="">Page 1</div>
<div id="p2" class="pagedemo" style="display:none;">Page 2</div>
<div id="p3" class="pagedemo" style="display:none;">Page 3</div>
<div id="p4" class="pagedemo" style="display:none;">Page 4</div>
<div id="p5" class="pagedemo" style="display:none;">Page 5</div>
<div id="p6" class="pagedemo" style="display:none;">Page 6</div>
<div id="p7" class="pagedemo" style="display:none;">Page 7</div>
<div id="p8" class="pagedemo" style="display:none;">Page 8</div>
<div id="p9" class="pagedemo" style="display:none;">Page 9</div>
<div id="p10" class="pagedemo" style="display:none;">Page 10</div>
<div id="demo5">
</div>
</div>
</div>
<!-- <div class="about">
<div class="text">
<h1>Demo 1</h1>
<p>Hover over the arrows to make the pages move or keep the mouse button down in order to move a whole set.</p>
<p>Clicking a page number will make it move to the center</p>
</div>
<div class="text">
<h1>Demo 2</h1>
<p>Demo 2 shows how the plugin can be used with arrow images.</p>
</div>
<div class="text">
<h1>Demo 3</h1>
<p>This is an example without any arrows. The user just sees the current page and the surrounding pages.</p>
</div>
<div class="text">
<h1>Demo 4</h1>
<p>Demo 4 shows how the plugin can be configured in style (no borders for the page numbers).</p>
</div>
<div class="text">
<h1>Demo 5</h1>
<p>This one shows how to integrate the plugin with an onChange event.</p>
</div>
</div> -->
</div>
<!-- <div class="footer"><a href="http://www.tympanus.net/codrops/"><img src="codrops_back.png" alt="Back to Codrops"/></a></div> -->
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script src="jquery.paginate.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#demo1").paginate({
count : 100,
start : 1,
display : 8,
border : true,
border_color : ‘#fff‘,
text_color : ‘#fff‘,
background_color : ‘black‘,
border_hover_color : ‘#ccc‘,
text_hover_color : ‘#000‘,
background_hover_color : ‘#fff‘,
images : false,
mouse : ‘press‘
});
$("#demo2").paginate({
count : 50,
start : 5,
display : 10,
border : false,
text_color : ‘#888‘,
background_color : ‘#EEE‘,
text_hover_color : ‘black‘,
background_hover_color : ‘#CFCFCF‘
});
$("#demo3").paginate({
count : 50,
start : 20,
display : 12,
border : true,
border_color : ‘#BEF8B8‘,
text_color : ‘#68BA64‘,
background_color : ‘#E3F2E1‘,
border_hover_color : ‘#68BA64‘,
text_hover_color : ‘black‘,
background_hover_color : ‘#CAE6C6‘,
rotate : false,
images : false,
mouse : ‘press‘
});
$("#demo4").paginate({
count : 50,
start : 20,
display : 12,
border : false,
text_color : ‘#79B5E3‘,
background_color : ‘none‘,
text_hover_color : ‘#2573AF‘,
background_hover_color : ‘none‘,
images : false,
mouse : ‘press‘
});
$("#demo5").paginate({
count : 10,
start : 1,
display : 7,
border : true,
border_color : ‘#fff‘,
text_color : ‘#fff‘,
background_color : ‘black‘,
border_hover_color : ‘#ccc‘,
text_hover_color : ‘#000‘,
background_hover_color : ‘#fff‘,
images : false,
mouse : ‘press‘,
onChange : function(page){
$(‘._current‘,‘#paginationdemo‘).removeClass(‘_current‘).hide();
$(‘#p‘+page).addClass(‘_current‘).show();
}
});
});
</script>
<div style="position:fixed;height:90px;width:100%;left:0;bottom:0"><div class="footer-banner" style="width:728px; margin:0px auto"></div></div>
<script src="http://www.yyyweb.com/demo/common/init.js"></script>
</body>
</html>
5种风格的 jQuery 分页效果【附代码】的更多相关文章
- 分享5种风格的 jQuery 分页效果【附代码】
jPaginate 是一款非常精致的分页插件,提供了五种不同风格的分页效果,支持鼠标悬停翻页,快速分页功能.这款插件还提供了丰富的配置选项,你可以根据需要进行设置. 效果演示 源码下载 各个 ...
- 三种比较好玩的黑客效果JS代码（摘取）
<html> <head> <title>The Matrix</title> <script src="http://ajax.goo ...
- php分页实例附代码
一个典型的PHP分页实例代码分享,学习php的朋友肯定用得到,主要是了解思路: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...
- Winform中实现自定义屏保效果(附代码下载)
场景 效果 注: 博客主页: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书.教程推送与免费下载. 实现 新建form ...
- Winform中使用Timer实现滚动字幕效果(附代码下载)
场景 效果 注: 博客主页: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书.教程推送与免费下载. 实现 新建一个Fo ...
- 一段freemarker高级分页效果的代码
<a onclick="page(1)">首页</a> [#if currpage != 1] [#assign last=currpage - 1] &l ...
- 新鲜出炉的30个精美的 jQuery & CSS3 效果【附演示和教程】
新鲜出炉的30个精美的 jQuery & CSS3 效果[附演示和教程] 作为最流行的 JavaScript 开发框架,jQuery 在现在的 Web 开发项目中扮演着重要角色,它简化了 ...
- jquery自定义插件实现分页效果
这节介绍如何自定义jquery插件,实现分页效果,话不多说,先看看实现的效果: 分页插件 实现的代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTM ...
- 基于jquery 的分页插件，前端实现假分页效果
上次分享了一款jquery插件,现在依旧分享这个插件,不过上一次分享主要是用于regular框件,且每一页数据都是从后端获取过来的,这一次的分享主要是讲一次性获取完数据 然后手动进行分页.此需求基本上 ...
随机推荐
- localStorage实现购物车数量单价和结算页面的实时同步
While there is life there is hope.一息若存,希望不灭 用localStorage实现简易的购物车数量单价和结算页面两个页面的实时同步: 购物车页面:实时更新页面,在i ...
- [原创]CI持续集成系统环境---部署Jenkins完整记录
Jenkins通过脚本任务触发,实现代码的自动化分发,是CI持续化集成环境中不可缺少的一个环节. 下面对Jenkins环境的部署做一记录. ------------------------------ ...
- App_api设计
2014年,移动APP的热度丝毫没有减退,并没有像桌面软件被WEB网站那样所取代,不但如此,越来越多的传统应用.网站也都开始制作自己的移动APP,也就是我们常说的IOS客户端.android客户端.这 ...
- poj 1458 Common Subsequence
Common Subsequence Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 46387 Accepted: 19 ...
- WPF学习笔记：MVVM模式下，ViewModel如何关闭View？
原文:http://blog.csdn.net/leftfist/article/details/32349731 矫枉过正,从一个极端走向另一个极端.MVVM模式,View只负责呈现,虽然也有后台代 ...
- 构建高转化率的着陆页-PS+HTML+网络营销
课程简介 本课程是全网独家专业的着陆页课程,课程完整的再现了整个着陆页实战案例的开发过程,包括:策划.设计和实现.上线后的推广.优化及提高转化率的技巧等,本套课程能帮助您迅速掌握着陆页的能力,迅速洞察 ...
- Linux 删除文件夹和文件命令
inux删除目录很简单,很多人还是习惯用rmdir,不过一旦目录非空,就陷入深深的苦恼之中,现在使用rm -rf命令即可.直接rm就可以了,不过要加两个参数-rf 即:rm -rf 目录名字-r 就是 ...
- 20155226田皓宇关于优秀技能经验以及c语言学习感悟和对JAVA的展望
读老师文章后关于一项优秀技能的经验有感 1.首先我自我剖析认为,我是没有哪一个方面能做到强于身边90%的人的,我只能说有些方面略强于身边的人.比如唱歌.办公软件的应用(word.excel)等.但我不 ...
- Android空闲教室查询-资料
这是去年某课程的一个称作“研究型学习”的东西的报告的展示PPT,有点失败的是这个APP的名字起得不太好……PPT上的功能都实现了,其他功能都没有.一年了,程序都忘差不多了,也暂时没有时间分享.就先把P ...
- 细说 Web API参数绑定和模型绑定
今天跟大家分享下在Asp.NET Web API中Controller是如何解析从客户端传递过来的数据,然后赋值给Controller的参数的,也就是参数绑定和模型绑定. Web API参数绑定就是简 ...