>>点击这里下载完整html源码<<
截图如下:
滚动鼠标中键读取Json数据分页显示网页内容,关键的Javascript如下:
<script type="text/javascript"> <!--// 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; } } } //--> </script>