原生js一些經常使用流行代碼分享、[很火的QQ空間長圖效果代碼]

<style>
*{ margin:0; padding:0;}
#box{ width:500px; height:300px; border:1px solid #000; position:absolute; left:50%; margin-left:-250px; top:50%; margin-top:-150px; overflow:hidden;}
#div1{ position:absolute; left:0; top:0;}

#box a{ position:absolute; z-index:2; left:0; width:100%; height:150px; opacity:0; filter:alpha(opacity:0);}
#box a.up{ background:red;}
#box a.down{ background:green; bottom:0;}
</style>
<div id="box">
	<a href="javascript:;" class="up"></a>
    <a href="javascript:;" class="down"></a>
	<div id="div1">
    	<img src="xxxx/thumb.jpg" width="500">
    </div>
</div>
<script>
window.onload=function(){
	var oBox=document.getElementById('box');
	var oDiv1=document.getElementById('div1');
	var oA = oBox.getElementsByTagName('a');
	oUp = oBox.children[0];
	oDown = oBox.children[1];
	var timer = null;
	var count = 0;
	
	   	oDown.onmouseover = function(){
	   		clearInterval(timer);
	   		timer = setInterval(function(){
	   			count -= 10;
	   			if(count<=oBox.offsetHeight-oDiv1.offsetHeight){
	   				clearInterval(timer);

	   			}else{
	   				oDiv1.style.top = count+'px';
	   				
	   			}
	   		},30)

	   	}
  
		oDown.onmouseout = function(){
    	 clearInterval(timer);

   		 }


   		 oUp.onmouseover = function(){

   		 	clearInterval(timer);
   		 	timer = setInterval(function(){
   		 	count += 10;
   		 	
   		 	if(count>=0){
   		 			clearInterval(timer);
   		 	}else{

   		 		oDiv1.style.top = count + 'px';
   		 		document.title = count;
   		 		console.log(document.title);
   		 	}
   		 	},30)
   		 	
   		 }

   		 oUp.onmouserout = function(){
   		 	clearInterval(timer);
   		 }

 }