Tip: You can modify some of the code before running
JS Special effects support the keyboard and mouse wheel page paging effect <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml > <pead> <title>js effects support the paging effect of keyboard and mouse wheel pages </title > <meta http-equiv= "content-type" content= "text/html;charset=gb2312" > <!--Add the following code to <pead> and </ Head> between--> <style type= "Text/css" > *{margin:0;padding:0;} img{border:0;} li{list-style:none Text-decoration:none;} A:hover{text-decoration:underline} body{background: #262626; font-size:9px;font-family:verdana,geneva,sans-serif ;} . warp{position:relative;width:960px;margin:0 Auto; list{width:670px; Entry{float:left;width:202px;position: Relative;margin:10px;_display:inline;} . entry a{display:block;text-decoration:none;border:1px #525252 solid; entry a:hover{border:1px #999 solid; entry. Url{position:absolute;left:1px;bottom:1px;height:28px;width:200px;background: #000; Text-align:center;filter: Alpha (opacity=-moz-opacity:0.8;opacity:0.8;} . Entry. URL span{display:block;border:0;color: #fff; margin-top:6px;padding:2px;font-weight:bold; detail{position : Absolute;right:45px;top:10px;width:216px;padding:10px;background: #393939; border:1px #555 solid;color: #fff;} . Detail li{margin-bottom:4px}. detail li.mt10{margin-bottom:10px; #url, #company, #description {color: #999; detail A{color: #999; detail a:hover{color: #fff;} #content h1{color: #ccc; font-size:20px;text-align:center;padding:70px 0;} #pager {clear:both;color: #fff;} #pager A{color: #fff;} #total {float:left;} #pagelist {float:right; F90{color: #f90;} </style> <script type= "Text/javascript" > var siteList = {"Sites": [{"Url": "Http://MYKITE. CN "," Pic ":" Http://www.zzsky.cn/effect/images/200909070730/tutorial9-200x170.png "," Name ":" Mykite. " CN "}, {" Url ":" Http://PLMCREATIVE.COM "," Pic ":" http://www.zzsky.cn/effect/images/200909070730/ Tearoundapp-200x170.png "," Name ":" Plmcreative.com "}, {" Url ":" Http://LOWERCASECREATIONS.COM "," Pic ":" HTTp://www.zzsky.cn/effect/images/200909070730/squarespace-200x170.png "," Name ":" Lowercasecreations.com "}, {" Url ": "Http://CREATICCA.COM", "Pic": "Http://www.zzsky.cn/effect/images/200909070730/simpleflame-200x170.png", "Name": " Creaticca.com "}, {" Url ":" Http://KOMODOMEDIA.COM "," Pic ":" http://www.zzsky.cn/effect/images/200909070730/ Rainfall-200x170.png "," Name ":" Komodomedia.com "}, {" Url ":" Http://SATURIZED.COM "," Pic ":" http://www.zzsky.cn/ Effect/images/200909070730/netdreams-200x170.png "," Name ":" Saturized.com "}, {" Url ":" Http://BOOMPA.CA "," Pic ":" Http://www.zzsky.cn/effect/images/200909070730/designdisease-200x170.png "," Name ":" boompa.ca "}, {" Url ":" http:// LABS. Revyver.com "," Pic ":" Http://www.zzsky.cn/effect/images/200909070730/dannydiablo-200x170.png "," Name ":" LABS. Revyver.com "}, {" Url ":" Http://CAMPAIGNMONITOR.COM "," Pic ":" http://www.zzsky.cn/effect/images/200909070730/ Campaignmonitor-200x170.png "," Name ":" Campaignmonitor.com "}, {" Url ":" Http://111cn.net "," Pic ":" http:// www.zzsky.cn/effect/images/200909070730/brushking-200x170.png "," Name ":" Brushking.com "}, {" Url ":" Http://111cn.net "," Pic ":" http://www.zzsky.cn/ Effect/images/200909070730/baeck-200x170.png "," Name ":" Baeck.on "}, {" Url ":" http://jz66.com.cn "," Pic ":" http:// Www.zzsky.cn/effect/images/200909070730/cleverful-200x170.png "," Name ":" Cleverful.com "}, {" Url ":" http:// Jz66.com.cn "," Pic ":" Http://www.zzsky.cn/effect/images/200909070730/benjamindavid-200x170.png "," Name ":" Benjamindavid.cc "}, {" Url ":" http://jz66.com.cn "," Pic ":" http://www.zzsky.cn/effect/images/200909070730/ Alexbuga-200x170.png "," Name ":" Alexbuga.com "}, {" Url ":" http://ohmedia.ca "," Pic ":" http://www.zzsky.cn/effect/ Images/200909070730/ohmedia-200x170.png "," Name ":" ohmedia.ca "}, {" Url ":" Http://coolpink.net "," Pic ":" http:// Www.zzsky.cn/effect/images/200909070730/coolpink-200x170.png "," Name ":" Coolpink.net "}, {" Url ":" http:// Wefunction.com "," Pic ":" Http://www.zzsky.cn/effect/images/200909070730/wefunction-200x170.png "," Name ":" Wefunction.com "}, {" Url ":" HTTP://NICHOLASDEAKINS.COm "," Pic ":" Http://www.zzsky.cn/effect/images/200909070730/nicholasdeakins-200x170.png "," Name ":" Nicholasdeakins.com "}, {" Url ":" Http://111cn.net "," Pic ":" http://www.zzsky.cn/effect/images/200909070730/ Davidpraznik-200x170.png "," Name ":" Davidpraznik.com "}, {" Url ":" Http://carrotcreative.com "," Pic ":" http:// Www.zzsky.cn/effect/images/200909070730/carrotcreative-200x170.png "," Name ":" Carrotcreative.com "}, {" URL ":" http ://pedigree.com.ar ", Pic": "Http://www.zzsky.cn/effect/images/200909070730/pedigree-200x170.png", "Name": " Pedigree.com.ar "}, {" Url ":" Http://tapbots.com "," Pic ":" http://www.zzsky.cn/effect/images/200909070730/ Tapbots-200x170.png "," Name ":" Tapbots.com "}, {" Url ":" Http://paramoreredd.com "," Pic ":" http://www.zzsky.cn/effect/ Images/200909070730/paramoreredd-200x170.png "," Name ":" Paramoreredd.com "}, {" Url ":" Http://MYKITE. " CN "," Pic ":" Http://www.zzsky.cn/effect/images/200909070730/tutorial9-200x170.png "," Name ":" Mykite. " CN "}, {" Url ":" Http://PLMCREATIVE.COM "," Pic ":" Http://www.zzsky.cn/effect/imAges/200909070730/tearoundapp-200x170.png "," Name ":" Plmcreative.com "}, {" Url ":" Http://LOWERCASECREATIONS.COM "," Pic: "Http://www.zzsky.cn/effect/images/200909070730/squarespace-200x170.png", "Name": "Lowercasecreations.com"} , {"Url": "Http://CREATICCA.COM", "Pic": "Http://www.zzsky.cn/effect/images/200909070730/simpleflame-200x170.png", ' Name ': ' creaticca.com '}, {"Url": "Http://KOMODOMEDIA.COM", "Pic": "http://www.zzsky.cn/effect/images/200909070730/ Rainfall-200x170.png "," Name ":" Komodomedia.com "}, {" Url ":" Http://SATURIZED.COM "," Pic ":" http://www.zzsky.cn/ Effect/images/200909070730/netdreams-200x170.png "," Name ":" Saturized.com "}, {" Url ":" Http://BOOMPA.CA "," Pic ":" Http://www.zzsky.cn/effect/images/200909070730/designdisease-200x170.png "," Name ":" boompa.ca "}, {" Url ":" http:// LABS. Revyver.com "," Pic ":" Http://www.zzsky.cn/effect/images/200909070730/dannydiablo-200x170.png "," Name ":" LABS. Revyver.com "}, {" Url ":" Http://CAMPAIGNMONITOR.COM "," Pic ":" http://www.zzsky.cn/effect/images/200909070730/ CampaignmoniTor-200x170.png "," Name ":" Campaignmonitor.com "}, {" Url ":" Http://brushking.com "," Pic ":" Http://www.zzsky.cn/effect /images/200909070730/brushking-200x170.png "," Name ":" Brushking.com "}, {" Url ":" Http://baeck.on "," Pic ":" http:// Www.zzsky.cn/effect/images/200909070730/baeck-200x170.png "," Name ":" Baeck.on "}, {" Url ":" Http://cleverful.com "," Pic: "Http://www.zzsky.cn/effect/images/200909070730/cleverful-200x170.png", "Name": "Cleverful.com"}, {"Url": " Http://benjamindavid.cc "," Pic ":" Http://www.zzsky.cn/effect/images/200909070730/benjamindavid-200x170.png "," Name ': ' benjamindavid.cc '}, {"Url": "Http://alexbuga.com", "Pic": "http://www.zzsky.cn/effect/images/200909070730/ Alexbuga-200x170.png "," Name ":" Alexbuga.com "}, {" Url ":" http://ohmedia.ca "," Pic ":" http://www.zzsky.cn/effect/ Images/200909070730/ohmedia-200x170.png "," Name ":" ohmedia.ca "}, {" Url ":" Http://coolpink.net "," Pic ":" http:// Www.zzsky.cn/effect/images/200909070730/coolpink-200x170.png "," Name ":" Coolpink.net "}, {" Url ":" http:// Wefunction.com "," Pic ":"Http://www.zzsky.cn/effect/images/200909070730/wefunction-200x170.png "," Name ":" Wefunction.com "}, {" Url ":" http:/ /nicholasdeakins.com "," Pic ":" Http://www.zzsky.cn/effect/images/200909070730/nicholasdeakins-200x170.png "," Name ":" Nicholasdeakins.com "}, {" Url ":" Http://davidpraznik.com "," Pic ":" http://www.zzsky.cn/effect/images/ 200909070730/davidpraznik-200x170.png "," Name ":" Davidpraznik.com "}, {" Url ":" Http://carrotcreative.com "," Pic ":" Http://www.zzsky.cn/effect/images/200909070730/carrotcreative-200x170.png "," Name ":" Carrotcreative.com "}, {" Url " : "http://pedigree.com.ar", "Pic": "Http://www.zzsky.cn/effect/images/200909070730/pedigree-200x170.png", "Name": " Pedigree.com.ar "}, {" Url ":" Http://tapbots.com "," Pic ":" http://www.zzsky.cn/effect/images/200909070730/ Tapbots-200x170.png "," Name ":" Tapbots.com "}, {" Url ":" Http://paramoreredd.com "," Pic ":" http://www.zzsky.cn/effect/ Images/200909070730/paramoreredd-200x170.png "," Name ":" Paramoreredd.com "}]} </script> </pead> <!-- <body> Change to--> <body onload= "outputhtml ();" > <!--Add the following code to <body> and </body>--> <div class= "warp" > <div class= "List" > <div id= " Content "></div> <div id=" Pager "> <div id=" Total "></div> <div id=" p Agelist "></div> </div> </div> <div class=" Detail "> <ul> ;li>url:</li> <li id= "SiteURL" class= "mt10" >http://mykite. cn</li> <li>COMPANY:</li> <li id= "sitename" class= "mt10" >mykite. cn</li> <li>DESCRIPTION:</li> <li id= "DESCRIPTION" >illustrates How to Impl Ement a nice animated menu using Mootools and some lines of CSS and HTML code ready to reuse in your project.</li> </ul> </div> </div> <script type= "Text/javascript" > <!--/function $ (ID) {return doc Ument.getelementbyid (ID);} Define how to get IDs function GotoPage (num) {//jump page = num; Outputhtml (); var PageSize = 9;//per page number var page = 1;//Current page number function outputhtml () {var obj = eval (siteList);//Get JSON var sites = obj. Sites Get Total paging var pages = Math.floor ((sites.length-1)/PageSize) + 1; if (page < 1) page = 1;//If the current page number is less than 1 if (Page > Pages) page = pages;//If the current page number is greater than the total number of var Temp = ""; var Beginno = (Page-1) * PageSize + 1;//start number var Endno = Page * pagesize;//End number if (Endno > sites.length) endno = si Tes.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>"; Paging if (page > 1 && page!== 1) {Temp = "<<index previous "}else{temp = "<<index previous "}; Perfect Page list var pagefrontsum = 3;//When the page displays the number of var pagebacksum = 3;//When the page displays the number of var Pagefront = pagefrontsum-(Page-1); var PagebacK = pagebacksum-(pages-page); if (Pagefront > 0 && pageback < 0) Pagebacksum + = pagefront;//before many, before remaining empty to the back if (Pageback > 0 && Page Front < 0) Pagefrontsum + + pageback;//after less than before, the remaining vacancy to the former var pagefrontbegin = page-pagefrontsum; if (Pagefrontbegin < 1) Pagefrontbegin = 1; var pagefrontend = Page + pagebacksum; if (Pagefrontend > pages) pagefrontend = pages; if (pagefrontbegin!= 1) Temp = ' ... '; for (var i = Pagefrontbegin;i < Page;i + +) {Temp = "" + i + ""; Temp + = "<strong class= ' F90 ' >" + Page + "</strong>"; for (var i = Page + 1;i <= pagefrontend;i + +) {Temp = "" + i + ""; if (pagefrontend!= Pages) Temp = "..."; if (Page!= Pages) {Temp = " next last>>"}else{temp + = " next last>>"} $ ("PageList"). InnerHTML = Temp; Output data if (Endno = 0) {//If empty $ ("content"). InnerHTML + = "<p>no images</p>"; Return var html = ""; for (var i = Beginno-1;i < Endno;i + +) {html+ + "<div class= ' entry ' >"; html = ""; html = ""; HTML + + <p class= ' url ' ><span> ' +sites[i]. Name+ "</span></p>"; HTML + "</div>"; $ ("content"). InnerHTML = html; Clickshow ()//Call mouse click event//keyboard key around page 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); ()}///mouse wheel page 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 or opera. * * Delta = event.wheeldelta/120; /** in Opera9, event handling differs from IE */if (window.opera) delta =-delta; else if (event.detail) {/** compatible with Mozilla. *//** In Mozilla, sign of the delta is different than in IE. * Also, Delta is multiple of 3. * * Delta =-EVENT.DETAIL/3; /** if increment does not equal 0 trigger * Main function is to roll up the test wheel or downward/if (delta) handle (delta); /** Initialize/if (Window.addeventlistener)/** Mozilla's DOM-based wheel event **/Window.addeventlistener ("Dommousescroll", Wheel, FA LSE); /** Ie/opera. * * Window.onmousewheel = Document.onmousewheel = wheel; //Get link address and site name 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 = "" + URL + ""; sitename.innerhtml = title; }//Mouse click event 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> </body> </ptml>
Tip: You can modify some of the code before running
