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)
猜你喜欢
- 迭代器模式迭代器模式(Iterator Pattern)是一种常用的设计模式,用于遍历集合中的元素,不暴露集合的内部结构。迭代器模式将集合和
- <%'asp事务处理。'测试数据库为sql server,服务器为本机,数据库名为test,表名为a,两个字段id(i
- 临近下班的时候,突然想到统计热门文章的问题。以前我所知道的热门文章统计,基本有这么几种:按点击数排序 该方法最大的问题在于热门的文章会越来越
- 一、问题的提出随着互连网的发展,网站的数量以惊人的数字增加。网站的作用除了给广大网友们提供信息资讯服务外,还应该成为网友们上传与下载文件的场
- class test { &nbs
- 字符函数——返回字符值这些函数全都接收的是字符族类型的参数(CHR除外)并且返回字符值.除了特别说明的之外,这些函数大部分返回VARCHAR
- 一、何谓ASP缓存/为什么要缓存当你的web站点采用asp技术建立的初期,可能感觉到的是asp * 页技术带来的便利性,以及随意修改性、自如
- 认知心理学家Donald A. Norman将人类的行动分解成七个阶段:1. 确定目标2. 确定意图3. 明确行动内容4. 执行5. 感知外
- Server对象提供对服务器上访问的方法和属性.大多数方法和属性是作为实用程序的功能提供的。语法:Server.property|metho
- 刚刚登甲发来一个文章,看到只要一行代码,就可以把IE6弄死.<style>*{position:relative}&
- asp中利用XMLhttp对象获取远程的数据,然后用二进制输出到客户浏览器,让客户下载数据,此例从某一远程服务器获取一个压缩包,并且输出到浏
- 在并不知道DIV浮动层的宽度,高度的情况下,如何使浮动层在任何分辩率的情况下居中呢! 下面使用了JAVASCRIPT来
- 死锁是指在某组资源中,两个或两个以上的线程在执行过程中,在争夺某一资源时而造成互相等待的现象,若无外力的作用下,它们都将无法推进下去,死时就
- *注意:本文的内容涉及到修改NTFS磁盘权限和设置安全策略,请务必在确认您了解操作可能的后果之后再动手进行任何的修改。文中提及的权限都是在原
- 最近关于HTML5吵得火热,很多人认为HTML5出现会秒杀Flash,以至于在各大web前端开 * 坛吵得不可开交。论坛里三言两语说的不够 尽
- 作用: 构建一些简单的SQL语句,结合在提交表单时使用,可以较方便<%@LANGUAGE="VBSCRIPT&
- 一个js用星投票的例子,不是常见的图片版,当然你如果会点js代码的话应该可以改为更加美观的图片投票,原理都一样。本程序只演示了读取星的个数,
- 与前面一样我们会用fso来对文件或文件夹进行创建与删除操作了,其实fso有强大的功能但非常危险的哦,下面我们不来看看删除实例吧,在这些例子,
- NOMONEYDAY123114321-45324212-102250331008为了符合阅读习惯,最终报表希望是如下格式:NOMONTUE
- select 终极美化,主要是针对下拉框的美化一个很古老的话题了,不过貌似目前为止也没有比较好的做到,在jxdawei的基础上做了