当前位置:首页 » SEO知识

侧边栏收起展开效果,onmouseover,onmouseout

2016-03-03 11:19 本站整理 浏览(18)

//方法一
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>分享按钮,展开收起效果(基础原理方法)</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#div1{
			width: 200px;
			height: 200px;
			background: red;
			position: relative;
			left: -200px;
			top: 0;
		}
		#div1 span{
			width: 20px;
			height: 50px;
			background: blue;
			position: absolute;
			left: 200px;
			top: 75px;
		}
	</style>
	<script>
	window.onload = function(){
		var oDiv = document.getElementById('div1');//获取对象
		oDiv.onmouseover = function(){//给对象绑定事件
			startMove();
		}
		oDiv.onmouseout = function(){
			startMove1();
		}
	}
	var timer = null;//声明定时器先为空
	function startMove(){
		clearInterval(timer);//进入函数执行定时器之前先清除所有的定时器
		var oDiv = document.getElementById('div1');
		timer = setInterval(function(){
			if(oDiv.offsetLeft == 0){ //如果当前对象left值为0也就是已经展开的状态
				clearInterval(timer);//那么就清除定时器,也就是停止运动
			}else{
				oDiv.style.left = oDiv.offsetLeft+10+'px';//否则就从-200一直没个30ms加10像素一直到0为止	
			}
		},30)
	}
	function startMove1(){//移出函数原理与移入相同
		clearInterval(timer);
		var oDiv = document.getElementById('div1');
		timer = setInterval(function(){
			if(oDiv.offsetLeft == -200){//如果对象当前left值为-200也就是收起状态
				clearInterval(timer);//那么就清除定时器
			}else{
				oDiv.style.left = oDiv.offsetLeft-10+'px';//否则就执行元素从0一直减10像素一直到-200为止	
			}
		},30)
	}
	</script>
</head>
<body>
	<div id="div1">
		<span id="share">分享</span>
	</div>
</body>
</html>
//方法2:将变量拿出作为参数传递,简化为一个函数
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分享按钮,展开收起效果(传参)</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #div1{
            width: 200px;
            height: 200px;
            background: red;
            position: relative;
            left: -200px;
            top: 0;
        }
        #div1 span{
            width: 20px;
            height: 50px;
            background: blue;
            position: absolute;
            left: 200px;
            top: 75px;
        }
    </style>
    <script>
    window.onload = function(){
        var oDiv = document.getElementById('div1');
        oDiv.onmouseover = function(){
            startMove(10,0);
        }
        oDiv.onmouseout = function(){
            startMove(-10,-200);
        }
    }
    var timer = null;
    function startMove(speed,iTarget){
        clearInterval(timer);
        var oDiv = document.getElementById('div1');
        timer = setInterval(function(){
            if(oDiv.offsetLeft == iTarget){
                clearInterval(timer);
            }else{
                oDiv.style.left = oDiv.offsetLeft+speed+'px';    
            }
        },30)
    }
    </script>
</head>
<body>
    <div id="div1">
        <span id="share">分享</span>
    </div>
</body>
</html>

//方法三 传一个参数:目标值。在进入定时器时就声明速度,如果当前值大于目标值,说明是收起,则速度为-10,如果当前值小于目标值,说明是展开,则速度为10
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分享按钮,展开收起效果(传一个参数)</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #div1{
            width: 200px;
            height: 200px;
            background: red;
            position: relative;
            left: -200px;
            top: 0;
        }
        #div1 span{
            width: 20px;
            height: 50px;
            background: blue;
            position: absolute;
            left: 200px;
            top: 75px;
        }
    </style>
    <script>
    window.onload = function(){
        var oDiv = document.getElementById('div1');
        oDiv.onmouseover = function(){
            startMove(0);
        }
        oDiv.onmouseout = function(){
            startMove(-200);
        }
    }
    var timer = null;
    function startMove(iTarget){
        clearInterval(timer);
        var oDiv = document.getElementById('div1');
        timer = setInterval(function(){
            var speed = 0;
            if(oDiv.offsetLeft > iTarget){
                speed = -10;
            }else{
                speed = 10;
            }
            if(oDiv.offsetLeft == iTarget){
                clearInterval(timer);
            }else{
                oDiv.style.left = oDiv.offsetLeft+speed+'px';    
            }
        },30)
    }
    </script>
</head>
<body>
    <div id="div1">
        <span id="share">分享</span>
    </div>
</body>
</html>
分享按钮,展开收起效果(传一个参数)