js“分享到”侧边框伸缩实现

标签：style   width   os   art   cti   html   

思路：
1，临界值是 -150 和 0
如果大于临界值，就要隐藏
2，隐藏：速度为负
显示：速度为正

3,如果与临界值相等，就清空定时器
否则，就运动

--------------------------------
html

<div id="div1"><span>分享到</span></div>

<style>
#div1 { position:absolute; left:-150px; width:150px; height:200px; background:green;}
#div1 span {position:absolute; right:-20px; top:70px; width:20px; height:60px; line-height:20px; background:blue;}
</style>

----------------------------------------
js

<script>

window.onload = function(){
	var oDiv = document.getElementById("div1");
	var timer = null;
	
	oDiv.onmouseover = function(){
		showHide(0);
	}
	
	oDiv.onmouseout = function(){
		showHide(-150);
	}
	
	//优化成一个方法
	function showHide(iCritical){
		clearInterval(timer);
		var speed;
		timer = setInterval(function(){
			if(oDiv.offsetLeft > iCritical){
				speed = -10;
			}else{
				speed = 10;
			}
			
			if(oDiv.offsetLeft == iCritical){
				clearInterval(timer);
			} else{
				oDiv.style.left = oDiv.offsetLeft + speed + "px";
			}
			
		},30);
	}
	
	
	//展开
	function show(){
		clearInterval(timer);
		timer = setInterval(function(){
			if(oDiv.offsetLeft>=0){
				clearInterval(timer);
			}else{
				oDiv.style.left = oDiv.offsetLeft + 10 + "px";
			}
		},30);
	}
	
	//隐藏
	function hide(){
		clearInterval(timer);
		timer = setInterval(function(){
			if(oDiv.offsetLeft==-150){	//这里是等于
				clearInterval(timer);
			}else{
				oDiv.style.left = oDiv.offsetLeft - 10 + "px";
			}
		},30);
	}
	
}


</script>

js“分享到”侧边框伸缩实现,布布扣,bubuko.com

js“分享到”侧边框伸缩实现

标签：style   width   os   art   cti   html   

原文地址：http://www.cnblogs.com/huaci/p/3832240.html