javascript读取Json数据并分页显示,支持键盘和滚轮翻页
作者:marlon119 来源:经典论坛 发布时间:2010-01-06 13:03:00
闲着没事看到国外一个酷站欣赏的网站不错,不过他是用FLASH做的,于是想着用JS也写一个看看,技术有限写的不是很完美,还有一些小的BUG不知道怎么解决,主要目的是练手。
function $(id){return document.getElementById(id);} //定义获取ID的方法
function GotoPage(num){ //跳转页
Page = num;
OutputHtml();
}
var PageSize = 9; //每页个数
var Page = 1; //当前页码
function OutputHtml(){
var obj = eval(siteList); //获取JSON
var sites = obj.sites;
//获取分页总数
var Pages = Math.floor((sites.length - 1) / PageSize) + 1;
if(Page < 1)Page = 1; //如果当前页码小于1
if(Page > Pages)Page = Pages; //如果当前页码大于总数
var Temp = "";
var BeginNO = (Page - 1) * PageSize + 1; //开始编号
var EndNO = Page * PageSize; //结束编号
if(EndNO > sites.length) EndNO = sites.length;
if(EndNO == 0) BeginNO = 0;
if(!(Page <= Pages)) Page = Pages;
$("total").innerHTML = "Total:<strong class='f90'>" + sites.length + "</strong> Show:<strong class='f90'>" + BeginNO + "-" + EndNO + "</strong>";
//分页
if(Page > 1 && Page !== 1){Temp ="<a href='javascript:void(0)' onclick='GotoPage(1)'><<Index</a> <a href='javascript:void(0)' onclick='GotoPage(" + (Page - 1) + ")'>Previous</a> "}else{Temp = "<<Index Previous "};
//完美的翻页列表
var PageFrontSum = 3; //当页前显示个数
var PageBackSum = 3; //当页后显示个数
var PageFront = PageFrontSum - (Page - 1);
var PageBack = PageBackSum - (Pages - Page);
if(PageFront > 0 && PageBack < 0)PageBackSum += PageFront; //前少后多,前剩余空位给后
if(PageBack > 0 && PageFront < 0)PageFrontSum += PageBack; //后少前多,后剩余空位给前
var PageFrontBegin = Page - PageFrontSum;
if(PageFrontBegin < 1)PageFrontBegin = 1;
var PageFrontEnd = Page + PageBackSum;
if(PageFrontEnd > Pages)PageFrontEnd = Pages;
if(PageFrontBegin != 1) Temp += '<a href="javascript:void(0)" onclick="GotoPage(' + (Page - 10) + ')" title="前10页">..</a>';
for(var i = PageFrontBegin;i < Page;i ++){
Temp += " <a href='javascript:void(0)' onclick='GotoPage(" + i + ")'>" + i + "</a>";
}
Temp += " <strong class='f90'>" + Page + "</strong>";
for(var i = Page + 1;i <= PageFrontEnd;i ++){
Temp += " <a href='javascript:void(0)' onclick='GotoPage(" + i + ")'>" + i + "</a>";
}
if(PageFrontEnd != Pages) Temp += " <a href='javascript:void(0)' onclick='GotoPage(" + (Page + 10) + ")' title='后10页'>..</a>";
if(Page != Pages){Temp += " <a href='javascript:void(0)' onclick='GotoPage(" + (Page + 1) + ");'>Next</a> <a href='javascript:void(0)' onclick='GotoPage(" + Pages + ")'>Last>></a>"}else{Temp += " Next Last>>"}
$("pagelist").innerHTML = Temp;
//输出数据
if(EndNO == 0){ //如果为空
$("content").innerHTML += "<h1>No Images</h1>";
return;
}
var html = "";
for(var i = BeginNO - 1;i < EndNO;i ++){
html += "<div class='entry'>";
html += "<a href='" +sites[i].Url+ "' rel='bookmark' title=" +sites[i].Name+ ">";
html += "<img src='" +sites[i].Pic+ "' width='200' height='170' />";
html += "<p class='url'><span>" +sites[i].Name+ "</span></p></a>";
html += "</div>";
}
$("content").innerHTML = html;
clickShow(); //调用鼠标点击事件
//键盘左右键翻页
document.onkeydown=function(e){
var theEvent = window.event || e;
var code = theEvent.keyCode || theEvent.which;
if(code==37){
if(Page > 1 && Page !== 1){
GotoPage(Page - 1);
}
}
if(code==39){
if(Page != Pages){
GotoPage(Page + 1);
}
}
}
//鼠标滚轮翻页
function handle(delta){
if (delta > 0){
if(Page > 1 && Page !== 1){
GotoPage(Page - 1);
}
}
else{
if(Page != Pages){
GotoPage(Page + 1);
}
}
}
function wheel(event){
var delta = 0;
if (!event) /* For IE. */
event = window.event;
if (event.wheelDelta) { /* IE或者Opera. */
delta = event.wheelDelta / 120;
/** 在Opera9中,事件处理不同于IE
*/
if (window.opera)
delta = -delta;
} else if (event.detail) { /** 兼容Mozilla. */
/** In Mozilla, sign of delta is different than in IE.
* Also, delta is multiple of 3.
*/
delta = -event.detail / 3;
}
/** 如果 增量不等于0则触发
* 主要功能为测试滚轮向上滚或者是向下
*/
if (delta)
handle(delta);
}
/** 初始化 */
if (window.addEventListener)
/** Mozilla的基于DOM的滚轮事件 **/
window.addEventListener("DOMMouseScroll", wheel, false);
/** IE/Opera. */
window.onmousewheel = document.onmousewheel = wheel;
}
//获取链接地址和网站名称
function showLink(source){
var siteUrl = $("siteurl");
var siteName = $("sitename");
var description = $("description");
if(source.getAttribute("rel") == "bookmark"){
var url = source.getAttribute("href");
var title = source.getAttribute("title");
siteUrl.innerHTML = "<a href='" + url + "' target='_blank'>"+ url +"</a>";
siteName.innerHTML = title;
}
}
//鼠标点击事件
function clickShow(){
var links = $("content").getElementsByTagName("a");
for(var i=0; i<links.length; i++){
var url = links[i].getAttribute("href");
var title = links[i].getAttribute("title");
links[i].onclick = function(){
showLink(this);
return false;
}
}
}
说明:
1、读取外部数据JSON并根据设置分页显示,添加删除酷站都可以在JSON文件里改;
2、点击酷站后,右侧的框里显示网站的地址和名称并带有链接,DESCRIPTION部分偷了个懒没写,需要的可以自己加;
3、支持键盘翻页和鼠标滚轮翻页;
BUG:
1、鼠标滚轮翻页在FF3下会有问题,来回在第一页和最后一页跳;
2、IE6下JS文件不能外调,否则会出错,其它浏览器正常。
演示地址:http://www.mykite.cn/demo/json/dome1/json.html
下载地址:
远程下载:jsonsite.rar (929.77 KB) 本地下载:jsonsite.rar (929.77 KB)
猜你喜欢
- 1. 项目背景视频传输: 在一台电脑上播放视频(捕捉摄像头画面),同局域网内另一台电脑上实时播放,尽量不卡顿。先放最后的照片,和用gif展示
- 1.写在前面JS要实现下载功能,一般都是这么几个过程:生成下载的URL,动态创建一个A标签,并将其href指向生成的URL,然后触发A标签的
- 将dataframe中的NaN替换成希望的值import pandas as pddf1 = pd.DataFrame([{'col
- 图像的全景拼接包括三大部分:特征点提取与匹配、图像配准、图像融合。1、基于SIFT的特征点的提取与匹配利用Sift提取图像的局部特征,在尺度
- 在学习和使用各种数据库的过程中,我们常常会遇到聚族索引、非聚族索引、组合索引的概念,这些索引对我们使用数据库,特别是查询的速度的
- 一、安装首先根据自己的python版本下载pyqt4离线包,现在连接:https://www.lfd.uci.edu/~gohlke/pyt
- 我们都知道数据是无价,如果不对数据进行备份,相当是让数据在裸跑,一旦服务器出问题,只有哭的份了。下面将介绍mysql数据库的自动备份,大家可
- 目录1. 输入、输出与注释1.1 获取用户输入1.2 格式化输出1.2.1 基本方法1.2.2 format 格式化函数1.3 注释2. 高
- 前言这篇博客针对《PPython+Qt身体特征识别人数统计》编写代码,功能包括了相片,摄像头身体识别,数量统计。代码整洁,规则,易读。应用推
- 前言人生苦短,快学Python!日报,是大部分打工人绕不过的难题。对于管理者来说,日报是事前管理的最好抓手,可以了解团队的氛围和状态。可对于
- jupyter notebook非常方便,想在服务器上面搭建一个,但是访问不了。(一)首先是安装jupyter notebook,pip i
- django处理Ajax跨域访问使用javascript进行ajax访问的时候,出现如下错误出错原因:javascript处于安全考虑,不允
- 本文介绍了随机提取N条记录的例子,通过Sql server与access数据库的代码比较让你更快的掌握。随机提取10条记录的例子:Sql s
- 1. 采用工作区设置默认解释器的方式(推荐)下载完vscode,并安装python支持之后。使用vscode打开一个空文件夹。点击左侧的运行
- 今天看了篇关于Web Form Design的成功案例,虽然讲的事情很简单,但总结了一些方法,翻译过来做个原始积累吧,以后写东西举例子时也好
- 报错信息:Job for mysqld.service failed because the control process exited
- 本文实例讲述了MySQL查询条件常见用法。分享给大家供大家参考,具体如下:条件使用where子句对表中的数据筛选,结果为true的行会出现在
- layer的两个函数:get_weights(), set_weights(weights)。详情请参考about-keras-layers
- /*不同服务器数据库之间的数据操作*/ --创建链接服务器 exec sp_addlinkedserver 'ITSV ',
- # -*- coding: utf8 -*- #! python print(repr("测试报警,xxxx是大猪头".