尊敬的客户您好,经我们多年的网站制作、网络营销经验,请建站和优化同时做,以达到最好的推广效果!----创赢网络 2012-06
加入收藏设为首页
  • [2013-8-7]洛阳贷款 洛阳小额贷款公司网站上线
  • [2013-8-4]洛阳开锁公司 洛阳开锁电话优化
  • [2013-5-25]洛阳聚鑫钢绳有限公司网站上线
  • [2013-5-20]吉利区图书馆网站备案通过上线开通
  • [2013-5-13]洛阳旭晋昇商贸有限公司 食品批发零售
  • [2013-4-14]洛阳市建投节能技术服务有限公司 新版上线
  • [2013-4-11]南阳顽石玉器工作室网站上线
  • ------专业网站设计制作、网站排名优化、建设一流品牌!
    新闻正文 ·您的位置:首页 > 新闻中心 > 技术中心 > 查看新闻

    支持键盘和滚轮翻页的javascript读取Json数据分页显示

    作者:redroom  来源:redroom  发表时间:2009-8-25 9:10:19  点击:3322

    代码说明:

    以下是引用片段:
    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;
            }
        }
    }

    1、读取外部数据JSON并根据设置分页显示,添加删除酷站都可以在JSON文件里改;

    2、点击酷站后,右侧的框里显示网站的地址和名称并带有链接,DESCRIPTION部分偷了个懒没写,需要的可以自己加;

    3、支持键盘翻页和鼠标滚轮翻页;

    BUG:

    1、鼠标滚轮翻页在FF3下会有问题,来回在第一页和最后一页跳;

    2、IE6下JS文件不能外调,否则会出错,其它浏览器正常。

    演示地址:http://www.mykite.cn/demo/json/dome1/json.html

    下载地址:http://www.mykite.cn/demo/json/dome1/jsonsite.rar

    您的需求

    联系我们

    正确的选择

    金亚洲安全吗