JavaScript DOM侧边栏
1.首先先建一个盒子设置一个div,div里面加个span,给这个div设置样式: *{padding: 0;margin: 0;}
.box{width: 200px;height: 250px;background: skyblue;position: relative;
margin-top: 400px;left: -200px;}
.box span{position: absolute;left: 200px;background: red;top: 50%;
display: inline-block;width: 25px;text-align: center;transform: translateY(-50%)};
设置过样式之后就该写鼠标事件如下代码:
var o=document.querySelector('.box');
var t;
//鼠标经过事件
o.onmouseenter=function(){
clearInterval(t);
t=setInterval(move,20);
};
//鼠标离开事件
o.onmouseleave=function(){
clearInterval(t);
t=setInterval(moveLeft,20);
};
function move(){
// console.log('move');
var l=getComputedStyle(o,null).left;//获取左边距
l=parseFloat(l);
// console.log('r',l);
//若移动到边缘是,停止移动
if(l>=0){
clearInterval(t);
}else{
o.style.left=l+5+'px';//向右移动
}
}
function moveLeft(){
var l=getComputedStyle(o,null).left;//获取左边距
l=parseFloat(l);
//若移动到边缘是,停止移动
if(l<=-200){
clearInterval(t);
}else{
o.style.left=l-5+'px';//向右移动
}
}
这就跟侧边广告弹窗差不多,里面加些样式就可以。