您的位置：首页 > 其它

侧边栏原理

2016-01-23 17:13 309 查看

<script type="text/javascript">
window.onload = function()
{
var oSide = document.getElementById('side');
oSide.onmousemove = function()
{
leftMove();
}
oSide.onmouseout= function()
{
rightMove();
}
}

var timer = null;
//鼠标移入的时候
function leftMove()
{
var oSide = document.getElementById('side');
clearInterval(timer);
timer = setInterval(function()
{
var spends = 10;
if(oSide.offsetLeft == 0)
{
clearInterval(timer);
}else{
oSide.style.left = oSide.offsetLeft + spends +'px';
}
},30);
}
//鼠标离开的时候
function rightMove()
{
var oSide = document.getElementById('side');
clearInterval(timer);//先清空定时器
timer = setInterval(function()
{
var spends = -10;//设置移动的速度
if(oSide.offsetLeft == -150)//设置样式本身的left如果是-150的时候说明隐藏掉了
{
clearInterval(timer);//当隐藏了就关闭定时器
}else{
oSide.style.left = oSide.offsetLeft + spends +'px';
}
},30);
}

</script>

</head>

<body>
<div id="side">
<span>分享到</span>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航