Javascript实例技巧精选(6)—滚动鼠标中键读取Json数据分页显示网页内容

>>点击这里下载完整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>&nbsp;&nbsp;Show:<strong class='f90'>" + BeginNO + "-" + EndNO + "</strong>"; 

     //分页
     if(Page > 1 && Page !== 1){Temp ="<a href='javascript:void(0)' onclick='GotoPage(1)'>&lt;&lt;Index</a> <a href='javascript:void(0)' onclick='GotoPage(" + (Page - 1) + ")'>Previous</a>&nbsp;"}else{Temp = "&lt;&lt;Index Previous&nbsp;"};

     //完美的翻页列表
     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 += "&nbsp;&nbsp;<a href='javascript:void(0)' onclick='GotoPage(" + (Page + 1) + ");'>Next</a> <a href='javascript:void(0)' onclick='GotoPage(" + Pages + ")'>Last&gt;&gt;</a>"}else{Temp += "&nbsp;&nbsp;Next Last&gt;&gt;"}

     $("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>