1. 功能一：右方sidebar控制整个页面的切换

  2. 功能二：右方sidearea包含2个hover图标

    wKiom1RB_6LCKgHkAAIyLLPA90k952.jpg

  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/...al.dtd">
<html xmlns="www.w3.org/1999/xhtml" >
<head>
<title>hey</title>
<style>


	.dc{
	  position:absolute;
	  width:100%;
	  height:800px;
	  
	}


	#div_content{
	  position:relative;
	  width:100%;
	  height:800px;
	  background:gray;
	  float:right;
	  overflow:hidden;
	}
	.inner{
	  margin-left:auto;
	  margin-right:auto;
	}

	#sidebar{
		position:fixed;
		z-index:999;
		width:21px;
		height:149px;
		top: 40%;
		right: 131px;
		
	}
		
	img{
		border:0px;
	}
	
		
	.link-list{
		list-style:none;
		width:21px;
		height:126px;		
		position:absolute;
		top:6px;
		left:3px;	
		margin:0px;
		padding:0px;
	}

	.anchor:active a {	
		opacity: 0.3;
	}
	
	.link-list li a{
		text-decoration: none;
		display: inline-block;
		color: #0069ca;
		width: 12px;
		height: 12px;
		cursor: pointer;
		overflow: hidden;
		background: #e1f3ef;
		border-radius: 5px;
		margin-top: 4px;					
	}
	
	.sidearea{
		right: 100px;
		bottom:90px;
	}
	
	.fix{
		position:fixed;
		z-index:999;
	}
	
	ul{
		list-style:none;
		margin:0;
		padding:0;
	}
	.sidearea li{
		margin:10px;
	}
	
	a{
		text-decoration:none;
	}
	
	.sidearea .e_li_1 a{
		display:block;
		width:56px;
		height:56px;
		background:url(2d_default.png);
	}
	
	.sidearea .e_li_2 a{
		display:block;
		width:56px;
		height:56px;
		background:url(weibo_default.png);
	}
	
	.sidearea .e_li_1 a:hover{
		background:url(2d_hover_small.png);
	}
	
	.sidearea .e_li_2 a:hover{
		background:url(weibo_hover.png);
	}
</style>
<script>
</script>
</head>
<body>

	<div id="div_left">
		<div id="sidebar">
			<img src="sidebar.png" alt>
			<ul class="link-list" id="menu" >
				<li class="anchor" >
					<a id="con1"></a>
				</li>
					<li class="anchor">
					<a id="con2"></a>
				</li>
				<li class="anchor" >
					<a id="con3"></a>
				</li>
				<li class="anchor" >
					<a id="con4"></a>
				</li>
				<li class="anchor" >
					<a id="con5"></a>
				</li>
				<li class="anchor" >
					<a id="con6"></a>
				</li>
				<li class="anchor" >
					<a id="con7"></a>
				</li>
			</ul>
		</div>	
	</div>
  
	<div class="sidearea fix" id="sidearea">
        <ul>
            <li class="e_li_1">
				<a href="javascript:void(0);">
				
				</a>
			</li>
            <li class="e_li_2">
				<a href="http://weibo.com/qunarxiaoyuan" target="_blank">
				</a>
			</li>
            <li class="e_2d_show " style="display: none;">          
        </li>
        </ul>     
    </div>
  
  <div id="div_content">
	 <div id="divc1" class="dc" style="background-color:#45b19a" >111111111111111111111111111111</div>
	 <div id="divc2" class="dc" style="background-color:#ff777a">2222222222222222222222222222</div>
	 <div id="divc3" class="dc" style="background-color:#80ab51">333333333333333333333333</div>
	 <div id="divc4" class="dc" style="background-color:#a285c5">4444444444444444444444444</div>
	 <div id="divc5" class="dc" style="background-color:#fbb168">555555555555555555555555</div>
	 <div id="divc6" class="dc" style="background-color:#456084">666666666666666666666666</div>
	 <div id="divc7" class="dc" style="background-color:#B2BBEC">77777777777777777777</div>
  </div>
  
  <script>
  try{
  var step = 15;
  var speed = 1;
  var th= 800;
  function changePageLeft(){
    var dc = document.getElementById("div_content");
    var dcc = dc.childNodes; 
	var target = event.target;
	
    var tg =parseInt(event.target.id.slice(-1));
    //alert(tg);
    
	//获得当前显示内容divnow,和即将显示内容divnext
    var divnow = null;
    var divnext = null;
	
    
    var j = 0;
    for(var i=0;i<dcc.length;i++){
  //  alert(dcc[i]);
   
     	 if(dcc[i].nodeType == 1){
	       j++;
	      // alert(j + ""+ tg);
	       if(j==tg)
	         divnext = dcc[i];
	        
     		  if(dcc[i].style.top == "0px")
		          divnow = dcc[i];
		       
   }
  }
	 // alert(divnext.id);
	 // alert(divnow.id);
	if(divnow != divnext){
	  
	   move(divnow,divnext);
	  }
		
	}
  
  function changeTop(divNow,divNext,hundle){
  
	//var top = document.defaultView.getComputedStyle(div,null)["top"]; 无设置的函数
	var topNow = divNow.style.top;//返回空字符串 不是null
	var topNow2 = parseInt(topNow.slice(0,-2));
	   
	var topNext = divNext.style.top;
	var topNext2 = parseInt(topNext.slice(0,-2));
	   
	   
	//alert(top2);
	// var heightp = parseInt(document.defaultView.getComputedStyle(div,null)["height"].slice(0,-2));
	// alert(heightp);
	  
	topNow2 -= step;
	topNext2 -= step;
	  
	divNow.style.top = topNow2 + "px";
	divNext.style.top = topNext2 + "px";
	//alert(top2);
	   
	//移出界面时停止
	if(Math.abs(topNow2) > th){ 
		
		clearInterval(hundle);
		//当前页面
		divNow.style.top = th + "px";
		//Next页面
		divNext.style.top = "0px";
			
	  }
  }
  
  
  //持续改变top
  function move(divNow,divNext){
  
	var mup = setInterval(function () {changeTop(divNow,divNext,mup);},speed);        
 
  }
  
	function changeHoverImage(){
		var targetid = event.target.id;
		var target = document.getElementById(targeid);
		if(event.type == "mouseover")
			target.style.src = "2d_hover_small.png";
		if(event.type == "mouseout")
			target.style.src = "2d_default.png";	
	}
  
  
  //1111111111111111111111111
  
  //菜单栏事件
  var dr = document.getElementById("div_left");
  dr.addEventListener("click",changePageLeft);
  //var sidearea = document.getElementById("sidearea");
 // sidearea.addEventListener("mouseover",changeHoverImage);
  
  
  
  //所有内容隐藏
    var dc = document.getElementById("div_content");
  // alert("tp" + dc.nodeType);
   var dcc = dc.childNodes;
  // alert(dcc.length);
  var j=0;
  
  for(var i=0;i<dcc.length;i++){
     //alert("key " + dcc[i].nodeType +" " + dcc[i].nodeName);
     //显示第一个
	 if(dcc[i].nodeType == 1){
	 j++;
	 dcc[i].style.top ="0px";
		//alert(dcc[i].id);
		  if(j!= 1){
		dcc[i].style.top = th + "px";
		}
	}
   }
	
  
  } catch(e){
  alert(e.name + e.message);
 }
  </script>


</body>
</html>