JavsScript实现网页左右侧淡入淡出效果

来源：互联网发布：淘宝客服招聘网编辑：程序博客网时间：2024/05/16 15:46

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{overflow-X:hidden;}
#box1{
width: 150px;
height: 200px;
background-color: red;
position: absolute;
left: -150px;top: 100px;
}
#box1 span{
width: 20px;
height: 60px;
line-height: 20px;
display: inline-block;
position: absolute;right: -20px;top: 70px;
cursor: default;
}
#box2{
width: 150px;
height: 200px;
background-color: red;
position: absolute;
right: -150px;
top: 100px;
}
#box2 span{
width: 20px;
height: 60px;
line-height: 20px;
display: inline-block;
position: absolute;
left: -20px;
top: 70px;
cursor: default;
}
</style>
</head>
<body>
<div id="box1">
<span>分享到</span>
</div>
<div id="box2">
<span>分享到</span>
</div>
</body>
<script>
//左侧效果
(function(){
var oDiv = document.getElementById('box1');
var handler = null;
oDiv.onmouseover = function(){
startMove(0);
};
oDiv.onmouseout = function(){
startMove(-150);
};
function startMove(target){
clearInterval(handler);
var speed;
if(oDiv.offsetLeft>target){
speed = -5;
}else{
speed = 5;
};
handler = setInterval(function(){
if(oDiv.offsetLeft == target){
clearInterval(handler);
}else{
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
};
},30);
};
})();

//右侧效果
(function(){
var oDiv = document.getElementById('box2');
var handler = null;
var bodyWidth = document.documentElement.clientWidth;//获取可视区域的宽度
oDiv.onmouseover = function(){
startMove(bodyWidth-150);
};
oDiv.onmouseout = function(){
startMove(bodyWidth);
};
function startMove(target){
clearInterval(handler);
var speed;
if(oDiv.offsetLeft > target){
speed = -5;
}else{
speed = 5;
};
handler = setInterval(function(){
if (oDiv.offsetLeft == target){
clearInterval(handler);
}else{
oDiv.style.left = oDiv.offsetLeft + speed +'px';
};
},30);
};
})();
</script>
</html>

0 0