上面代码怎样实现div的跳转
日期：2014-05-16 浏览次数：20407 次
下面代码怎样实现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>
------解决方案--------------------
- 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>
------解决方案--------------------
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
