js之侧栏分享

好多网站都有这个功能，其实就是个小东西，很简单。这个是最简单的，自己瞎做的，练习练习。

css代码

#div1{ width:150px; height:200px; background:#40ADE9; position:absolute;left:-150px; top: 50px;}
#div1 span{ position:absolute; height:60px; width:20px; line-height:20px; right:-20px;top:70px; background:#E55DED;}

js代码

window.onload=function()
{
	var oDiv=document.getElementById('div1');
	oDiv.onmouseover=function()
	{
		startmove(0)  //出来的left的指定位置
	};
	oDiv.onmouseout=function()
	{
		startmove(-150)//回去的时候left的指定位置
	};
};
	var timer=null;
	function startmove(target)    //先写一个运动框架
	{
		var oDiv=document.getElementById('div1');
		var speed=0;
		if(oDiv.offsetLeft>target)  // 判断一下速度的取值，出和进的时候值不同
		{
			speed=-10;
		}else{
			speed=10;
		}
		clearInterval(timer);		//为了不出错，设置定时器之前先清除所有定时器
		timer=setInterval(function(){ //设置定时器
			if(oDiv.offsetLeft==target)  //如果到达预定位置，关闭定时器
			{
				clearInterval(timer);
			}else{						//如果没有到达位置，用left属性，将其移动到指定位置
				oDiv.style.left=oDiv.offsetLeft+speed+'px';
			}
		},30)	
	}

html代码