类似时光轴的效果 

<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>获取元素的高度</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
*{margin: 0px; padding: 0px; font-size:14px; font-family:'微软雅黑'; font-size:12px;}
.clearfix:after{content:'.';display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block;}
* html .clearfix{height:1%}
.clearfix{display:black;}
ul li{list-style:none;}
#main{width:1000px; margin:110px auto;}
.p1{width:1000px; height:230px;border:1px solid red; margin-top:10px;}
.p2{width:1000px; height:260px;border:1px solid red; margin-top:10px;}
.p3{width:1000px; height:300px;border:1px solid red; margin-top:10px;}
.p4{width:1000px; height:230px;border:1px solid red; margin-top:10px;}
.p5{width:1000px; height:330px;border:1px solid red; margin-top:10px;}
.p6{width:1000px; height:430px;border:1px solid red; margin-top:10px;}
.p7{width:1000px; height:300px;border:1px solid red; margin-top:10px;}
.p8{width:1000px; height:230px;border:1px solid red; margin-top:10px;}
.p9{width:1000px; height:2300px;border:1px solid red; margin:20px auto;}
#minLi{position:fixed; top:260px; right:25px;}
#minLi li{height:22px;line-height:22px; border:1px solid red; width:40px; text-align:center; margin:5px 0; cursor:pointer;}
#minLi li.addnew{
  background:red; color:#fff;
}
</style>
</head>
<body>
<div id='main'>
     <div class='p1'>开始</div>
         <div class='p2'>介绍</div>
         <div class='p3'>发展</div>
         <div class='p4'>历史</div>
         <div class='p5'>事件</div>
         <div class='p6'>现状</div>
         <div class='p7'>成就</div>
         <div class='p8'>结束</div>
</div>
<div class='p9'>~~</div>
<ul id='minLi'>
   <li>开始</li>
   <li>介绍</li>
   <li>发展</li>
   <li>历史</li>
   <li>事件</li>
   <li>现状</li>
   <li>成就</li>
   <li>结束</li>
</ul>
</body>
<script type="text/javascript">
var oBox = document.getElementById('main');
var oDiv =oBox.children;
var oUl = document.getElementById('minLi');
var oLi = oUl.getElementsByTagName('li');
var arr =[];
var bstop = true;
for(var i=0;i<oDiv.length;i++){
    arr.push(getPos(oDiv[i]).top);
}
function getPos(obj) {
	var pos = {left:0,top:0};
	while(obj) {
		pos.left = pos.left+obj.offsetLeft;
		pos.top = pos.top+obj.offsetTop;
		obj = obj.offsetParent;             
	}
	return pos;
}
//点击侧边栏
for(var i=0;i<oLi.length;i++){
    oLi[i].index = i;
    oLi[i].onclick = function(){
		if(bstop){
			bstop = false;
			Move(this,arr[this.index],function(){
			bstop = true;
		   }); 
		}
    }
}
window.onscroll = function () {
	var iH = document.body.scrollTop || document.documentElement.scrollTop;
	var n = getIndex(arr,iH);
	for(var i=0;i<oLi.length;i++ ) {
		oLi[i].className = '';
	}
	oLi[n].className = 'addnew';
};
function getIndex(arr, v){
	for (var i=0; i<arr.length; i++) {
		if (arr[i] >= v) {
			return i;
		}
	}
}
function Move(obj,iTarget,fn){
  clearInterval(obj.timer);
  obj.timer=setInterval(function(){
    var iH = document.body.scrollTop || document.documentElement.scrollTop;
    var ispeed = (iTarget-iH)/6;
    ispeed=ispeed>0?30:-30;
    if(Math.abs(iH-iTarget)<30){
          document.documentElement.scrollTop = document.body.scrollTop = iTarget;
		  clearInterval(obj.timer);
          if(fn) fn();
        }else{
          document.documentElement.scrollTop = document.body.scrollTop = iH+ispeed;
          document.title = iH+ispeed;
        }        
  },30);
}
</script>
</html>

类似时光轴的效果　　

posted @ 2014-04-09 14:51  潇潇杀  阅读(221)  评论(0)    收藏  举报