js + jquery 实现分页区翻页
简单来说,情况是这样的,假如做好了对动漫每一集进行分页,如下图:
但当分页太多就会变得不能看,而且前后箭头也不能只是摆设。
想要得到类似这样效果:
网上搜了一会翻页相关的库没什么效果,也不太合适自己的项目应用。
于是决定自己写一个。
pageturn.js:
function get_segment(aid, size) {
var start = 0, end = 0;
var count_switch = true;
for (var i = 1; i <= size; i++) {
if (document.getElementById(aid + i.toString()).style.display != 'none') {
if (count_switch) {
start = i;
count_switch = false;
}
else {
end = i;
}
}
}
return [start, end];
}; function prev_page_turn(aid, start, end, step) {
for (var i = 0; i < step; i++) {
if (start == 1)
break; $("#" + aid + end.toString()).hide(500); start -= 1; $("#" + aid + start.toString()).show(500); end -= 1;
}
}; function next_page_turn(aid, start, end, step, size) {
for (var i = 0; i < step; i++) {
if (end == size)
break; $("#" + aid + start.toString()).hide(500); end += 1; $("#" + aid + end.toString()).show(500); start += 1;
}
};
# 用法见 31 line
test.html:
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="pageturn.js"></script>
</head> <body>
<ul class="pagination">
<li><a id="prev-page">«</a></li>
<li><a href="#" id="av8299421" title="夢ちゃん">第 1 集</a></li>
<li><a href="#" id="av8299422" title="夢ちゃん">第 2 集</a></li>
<li><a href="#" id="av8299423" title="夢ちゃん">第 3 集</a></li>
<li><a href="#" id="av8299424" title="夢ちゃん">第 4 集</a></li>
<li><a href="#" id="av8299425" title="夢ちゃん">第 5 集</a></li>
<li><a href="#" id="av8299426" title="夢ちゃん" style="display:none">第 6 集</a></li>
<li><a href="#" id="av8299427" title="夢ちゃん" style="display:none">第 7 集</a></li>
<li><a href="#" id="av8299428" title="夢ちゃん" style="display:none">第 8 集</a></li>
<li><a href="#" id="av8299429" title="夢ちゃん" style="display:none">第 9 集</a></li>
<li><a href="#" id="av82994210" title="夢ちゃん" style="display:none">第 10 集</a></li>
<li><a href="#" id="av82994211" title="夢ちゃん" style="display:none">第 11 集</a></li>
<li><a href="#" id="av82994212" title="夢ちゃん" style="display:none">第 12 集</a></li>
<li><a href="#" id="av82994213" title="夢ちゃん" style="display:none">第 13 集</a></li>
<li><a href="#" id="av82994214" title="夢ちゃん" style="display:none">第 14 集</a></li>
<li><a id="next-page">»</a></li>
</ul>
<script type="text/javascript">
$(document).ready(function () {
var size = 14; // 集数
var aid = "av829942"; // 视频 id 前缀
var prev_click = true;
var next_click = true;
$('#prev-page').bind('click', function () {
if (prev_click) {
prev_click = false;
var get_value = get_segment(aid, size);
var start = get_value[0], end = get_value[1]; if (start > 1) {
prev_page_turn(aid, start, end, 3);
}
setTimeout(function () {
prev_click = true;
}, 500);
}
});
$('#next-page').bind('click', function () {
if (next_click) {
next_click = false;
var get_value = get_segment(aid, size);
var start = get_value[0], end = get_value[1]; if (end < size) {
next_page_turn(aid, start, end, 3, size);
}
setTimeout(function () {
next_click = true;
}, 500);
}
});
});
</script>
</body> </html>
可自行配制 step 来控制点一次的翻页速度。
js + jquery 实现分页区翻页的更多相关文章
- jquery.Table实现的翻页功能比较完整漂亮,本想扩展个模版DIV
jquery.dataTable实现的翻页功能比较完整漂亮,本想提取其的翻页部分,再结合模版DIV,bootstrop实现聊天记息的展示. jquery.Table 与table结合的较紧,不能在很下 ...
- JeeSite数据分页与翻页
本文章介绍的是JeeSite开源项目二次开发时的一些笔记,对于没有使用过JeeSite的可以不用往下看了,因为下面的代码是跟JeeSite二次开发相关的代码,不做JeeSite的二次开发,以下代码对您 ...
- JS调用水晶报表打印翻页按钮事件
默认的水晶报表打印按钮.翻页按钮太小,并且样式不好调整,考虑自己做一个按钮,然后调用水晶报表的按钮事件. 在实际操作中发现可以在.net按钮的服务器端事件中调用翻页方法: CrystalReportV ...
- turn.js中文API 写一个翻页效果的参数详细解释
$('.flipbook').turn({ width: 922, height: 600, elevation: 50, gradients: true, a ...
- jquery easyui datagrid 在翻页以后仍能记录被选中的行及刷新设置选中行数据
//easyUI的datagrid在复选框多选时,如何在翻页以后仍能记录被选中的行://注意datagrid中需要配置idField属性,一般为数据的主键 $.ajax({ type: 'GET', ...
- 使用switchPage.js插件jQuery全屏滚动翻页
1. 先引入jquery.js,再引入switchPage.js 文件地址:点击打开链接 <script src="jquery.min.js"></script ...
- jquery css3问卷答题卡翻页动画效果
这个选项调查的特效以选项卡的形式,每答完一道题目自动切换到下一条,颇具特色.使用jQuery和CSS3,适合HTML5浏览器. 效果展示 http://hovertree.com/texiao/jqu ...
- 织梦DEDECMS网站首页如何实现分页翻页
织梦DEDECMS模板网站首页如何实现首页分页和翻页 方法如下:(三种方法,自己选择一种来实现分页吧) 第一种:调用ajax和参数的(不推荐)1.必须在DEDE首页模板中的<head>&l ...
- asp.net中应用JQuery.pagination分页
JQuery.pagination这款分页控件非常好用,可实现无刷新分页,为了方便下次做项目便于拷贝,所以在此发布一下,具体的实现流程如下: 效果图: JQuery.pagination的各个参数的说 ...
随机推荐
- 自定义输入函数 - C语言编程
有返回功能的输入函数: #include <stdio.h> #include <conio.h> void input(char content[]); int main() ...
- day04_1hibernate
log4j的整合.一对一关系的操作.二级缓存的介绍 一.log4j的整合: 1.介绍什么是 slf4j 核心jar : slf4j-api-1.6.1.jar .slf4j是日志框架,将其他优秀的日 ...
- 采用PHP实现”服务器推”技术的聊天室
传统的B/S结构的应用程序,都是采用”客户端拉”结束来实现客户端和服务器端的数据交换. 本文将通过结合Ticks(可以参看我的另外一篇文章:关于PHP你可能不知道的-PHP的事件驱动化设计),来实 ...
- go语言 实现哈希算法
验证结果网址 http://www.fileformat.info/tool/hash.htm "golang.org/x/crypto/md4"不存在时,解决方法: cd $GO ...
- AD转换器的主要技术指标
1)分辩率(Resolution) 指数字量变化一个最小量时模拟信号的变化量,定义为满刻度与2n的比值.分辩率又称精度,通常以数字信号的位数来表示. 2) 转换速率(Conversion Ra ...
- laravel如何A表中包含B表中信息
A表中如何包含B表中的信息 首先看A表的信息 接着看B表的信息 我的需求就是 A表字段name对应B表字段ream_name然后得到B表的对应主键ID要在A表中查询出来 发现问题就是查询出来的id和A ...
- 801. 二进制中1的个数(lowbit(n)函数)
给定一个长度为n的数列,请你求出数列中每个数的二进制表示中1的个数. 输入格式 第一行包含整数n. 第二行包含n个整数,表示整个数列. 输出格式 共一行,包含n个整数,其中的第 i 个数表示数列中的第 ...
- 通过CSS禁用页面内容选中和复制操作
-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;-khtml-user-select: none;user ...
- html 未选择复选框不上传
问题 之前就遇到类似的问题,在一个列表中,如果有复选框,并且不选中 会导致这个复选框不上传,导致后台接收不到复选框数据 解决方法我想到的就是 <td> <input type=&qu ...
- form表单提交且接口回调显示提交成功
前端: <form method="post" enctype="multipart/form-data" id="formSubmit&quo ...