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

>>点击这里下载完整html源码<<

截图如下:

 

滚动鼠标中键读取Json数据分页显示网页内容，关键的Javascript如下：

  1 <script type="text/javascript">

  2 <!--//

  3 function $(id){return document.getElementById(id);} //定义获取ID的方法

  4 

  5 function GotoPage(num){ //跳转页

  6     Page = num;

  7     OutputHtml();

  8 } 

  9 

 10 var PageSize = 9; //每页个数

 11 var Page = 1; //当前页码

 12 

 13 function OutputHtml(){

 14     

 15     var obj = eval(siteList);  //获取JSON

 16     var sites = obj.sites;

 17     

 18     //获取分页总数

 19     var Pages = Math.floor((sites.length - 1) / PageSize) + 1; 

 20     if(Page < 1)Page = 1;  //如果当前页码小于1

 21     if(Page > Pages)Page = Pages; //如果当前页码大于总数

 22     var Temp = "";

 23     

 24     var BeginNO = (Page - 1) * PageSize + 1; //开始编号

 25     var EndNO = Page * PageSize; //结束编号

 26     if(EndNO > sites.length) EndNO = sites.length;

 27     if(EndNO == 0) BeginNO = 0;

 28     

 29     if(!(Page <= Pages)) Page = Pages;

 30     $("total").innerHTML = "Total:<strong class='f90'>" + sites.length + "</strong>&nbsp;&nbsp;Show:<strong class='f90'>" + BeginNO + "-" + EndNO + "</strong>"; 

 31     

 32     //分页

 33     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;"};

 34     

 35     //完美的翻页列表

 36     var PageFrontSum = 3; //当页前显示个数

 37     var PageBackSum = 3; //当页后显示个数

 38     

 39     var PageFront = PageFrontSum - (Page - 1);

 40     var PageBack = PageBackSum - (Pages - Page);

 41     if(PageFront > 0 && PageBack < 0)PageBackSum += PageFront; //前少后多，前剩余空位给后

 42     if(PageBack > 0 && PageFront < 0)PageFrontSum += PageBack; //后少前多，后剩余空位给前

 43     var PageFrontBegin = Page - PageFrontSum;

 44     if(PageFrontBegin < 1)PageFrontBegin = 1;

 45     var PageFrontEnd = Page + PageBackSum;

 46     if(PageFrontEnd > Pages)PageFrontEnd = Pages;

 47     

 48     if(PageFrontBegin != 1) Temp += '<a href="javascript:void(0)" onclick="GotoPage(' + (Page - 10) + ')" title="前10页">..</a>';

 49     for(var i = PageFrontBegin;i < Page;i ++){

 50         Temp += " <a href='javascript:void(0)' onclick='GotoPage(" + i + ")'>" + i + "</a>";

 51     }

 52     Temp += " <strong class='f90'>" + Page + "</strong>";

 53     for(var i = Page + 1;i <= PageFrontEnd;i ++){

 54         Temp += " <a href='javascript:void(0)' onclick='GotoPage(" + i + ")'>" + i + "</a>";

 55     }

 56     if(PageFrontEnd != Pages) Temp += " <a href='javascript:void(0)' onclick='GotoPage(" + (Page + 10) + ")' title='后10页'>..</a>";

 57     

 58     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;"}

 59     

 60     $("pagelist").innerHTML = Temp;

 61     

 62     //输出数据

 63     

 64     if(EndNO == 0){ //如果为空

 65         $("content").innerHTML += "<h1>No Images</h1>";

 66         return;

 67     }

 68     var html = "";

 69         

 70     for(var i = BeginNO - 1;i < EndNO;i ++){

 71         html += "<div class='entry'>";

 72         html += "<a href='" +sites[i].Url+ "' rel='bookmark' title=" +sites[i].Name+ ">";

 73         html += "<img src='" +sites[i].Pic+ "' width='200' height='170' />";

 74         html += "<p class='url'><span>" +sites[i].Name+ "</span></p></a>";

 75         html += "</div>";

 76         

 77     }

 78     $("content").innerHTML = html;

 79     clickShow(); //调用鼠标点击事件

 80     

 81     //键盘左右键翻页

 82     document.onkeydown=function(e){

 83         var theEvent = window.event || e;

 84         var code = theEvent.keyCode || theEvent.which;

 85         if(code==37){

 86             if(Page > 1 && Page !== 1){

 87                 GotoPage(Page - 1);

 88                 

 89             }

 90         }

 91         if(code==39){

 92             if(Page != Pages){

 93                 GotoPage(Page + 1);

 94             }

 95         }

 96     }

 97     

 98     

 99     //鼠标滚轮翻页

100 function handle(delta){

101     if (delta > 0){

102         if(Page > 1 && Page !== 1){

103             GotoPage(Page - 1);

104         }        

105     }

106     else{

107         if(Page != Pages){

108             GotoPage(Page + 1);

109         } 

110     }

111 }

112 

113 function wheel(event){

114     var delta = 0;

115     if (!event) /* For IE. */

116         event = window.event;

117     if (event.wheelDelta) { /* IE或者Opera. */

118         delta = event.wheelDelta / 120;

119         /** 在Opera9中，事件处理不同于IE

120         */

121     if (window.opera)

122         delta = -delta;

123     } else if (event.detail) { /** 兼容Mozilla. */

124     /** In Mozilla, sign of delta is different than in IE.

125     * Also, delta is multiple of 3.

126     */

127     delta = -event.detail / 3;

128     }

129     /** 如果 增量不等于0则触发

130     * 主要功能为测试滚轮向上滚或者是向下

131     */

132     if (delta)

133         handle(delta);

134 }

135 

136 /** 初始化 */

137 if (window.addEventListener)

138     /** Mozilla的基于DOM的滚轮事件 **/

139     window.addEventListener("DOMMouseScroll", wheel, false);

140     /** IE/Opera. */

141     window.onmousewheel = document.onmousewheel = wheel;

142     

143     

144 }

145 

146 //获取链接地址和网站名称

147 function showLink(source){

148     var siteUrl = $("siteurl");

149     var siteName = $("sitename");

150     var description = $("description");

151     

152     if(source.getAttribute("rel") == "bookmark"){

153         var url = source.getAttribute("href");

154         var title = source.getAttribute("title");

155         siteUrl.innerHTML = "<a href='" + url + "' target='_blank'>"+ url +"</a>";

156         siteName.innerHTML = title;

157     }

158     

159 }

160 

161 //鼠标点击事件

162 function clickShow(){

163     var links = $("content").getElementsByTagName("a");

164     for(var i=0; i<links.length; i++){

165         var url = links[i].getAttribute("href");    

166         var title = links[i].getAttribute("title");

167         links[i].onclick = function(){

168             showLink(this);

169             return false;

170         }

171     }

172 }

173 //-->

174 </script>