侧边栏

最新推荐文章于 2022-04-01 08:39:41 发布

转载最新推荐文章于 2022-04-01 08:39:41 发布 · 84 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/tltl/archive/2013/05/07/3064194.html

文章标签：

#javascript #ViewUI

View Code

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
*{margin:0;padding:0;}
#div1{width:100px;height:300px;background:red;position:absolute;left:-100px;top:100px;}
#div2{width:30px;height:50px;background:green;position:absolute;top:50%;right:-30px;margin-top:-25px;}
</style>
<script type="text/javascript">
var time=null;

var tii=null;
window.onload=function()
{
    var oDiv1=document.getElementById('div1');
    var oDiv2=document.getElementById('div2');
    
    oDiv1.onmousemove=function()//当鼠标移上去的时候
    {
        shou(0)
    };
    oDiv1.onmouseout=function()//当鼠标离开的时候
    {
        shou(-100)
    };
};

function shou(name)
{
        var oDiv1=document.getElementById('div1');//获得div
        clearInterval(time);//关闭定时器
        
        var ip=0;//div移动的速度
        
        if(oDiv1.offsetLeft<=name)//当它小于零时，速度值为整数
        {
            ip=10;
        }
        else//当它大于等于零时速度值为负数
        {
            ip=-10;
        }
        
        time=setInterval(function()//开启定时器
        {
            if(oDiv1.offsetLeft==name)//当left值等于参数（0或-100）
            {
                clearInterval(time);//关闭定时器
            }
            else//否则把速度值累加到div上
            {
                oDiv1.style.left=oDiv1.offsetLeft+ip+'px';
            }
        },50)
}
</script>
</head>

<body style="height:2000px;">
<div id="div3"></div>
<div id="div1">
    <div id="div2">客<br/>服</div>
</div>
</body>
</html>