上面代码怎样实现div的跳转

2012-11-21

下面代码怎样实现div的跳转？HTML code!DOCTYPE htmlhtmlheadmeta http-equivContent-Type conte

下面代码怎样实现div的跳转？

HTML code

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>练习3.9.3</title>    <script type="text/javascript" src="/js/jquery.min.js" ></script>    <script type="text/javascript">        $(document).keyup(function(event){            if(event.keyCode==39){                 //这里怎么写？            }        });    </script></head><body><div id="div1"><span>    div1</span></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></div><div id="div2"><span>    div2</span></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></div><div id="div3"><span>    div3</span></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></div></body></html>

我想要实现当按下向方向键的时候（键码为39），页面会从当前显示的div跳转到下一个div，就是页面向下滚动到下一个div的位置，如果当前div是最后一个，那么又会跳转到第一个div，即页面向上滚动到显示第一个div的位置。

[解决办法]

JScript code

    <script type="text/javascript">              //获取元素相对于页面根元素的位置        var getOffsetTop = function(elem){            var height = elem.offsetTop;            while(elem.offsetParent){                elem = elem.offsetParent;                height += elem.offsetTop            }            return height;        };                //按下下键的时候，首先找到页面显示的目标div，再跳转到下一个div的位置        var skipToTarget = function(){            var divs = document.getElementsByTagName("div");            if(divs.length < 1) return false;                        //遍历div元素            (function(){                for(var i = 0, len = divs.length; i < len; i++){                                    var elem = divs[i],                                                //跳转的目标位置                        skipFlag = i + 1;                                             if( i == len - 1){                        skipFlag = 0;                    }                                        //通过判断元素在可视窗口显示的区域，确定目标div                        if(elem.offsetHeight - (document.documentElement.scrollTop - getOffsetTop(elem)) >= 0){                                                //跳转                        location.hash = divs[skipFlag].id;                         break;                    }                                    }            })();        };                window.onload = function(){            document.onkeyup = function(event){                event = event ? event : window.event;                if(event.keyCode == 40){                    skipToTarget();                    }            };                };                 /*        $(document).keyup(function(event){            if(event.keyCode==39){            //在这里调用跳转函数                 skipToTarget();            }        });        */    </script>
[解决办法]
JScript code 
 
    <script type="text/javascript">        $(function(){            var i=0,count=$('body>div').size();            $(document).keyup(function(event){                if(event.keyCode==39){                     i=i==count-1?0:(i+1);                     var top=$('div').eq(i).offset().top;                     window.scrollTo(0,top);                }            });        })    </script>

热点排行

JavaScript

上面代码怎样实现div的跳转