**div样式**
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#all{
width: 200px;
height: 200px;
margin-top: 20px;
background-color: lightblue;
position: relative;
left: -200px;
top: 0;
}
#btn{
width: 20px;
background: rgb(255, 119, 157);
position: absolute;
left: 200px;
top: 75px;
color: #fff;
font-size: 16px;
cursor: pointer;
padding: 5px 1px 5px 0;
border-radius: 0 5px 5px 0;
}
</style>
<body>
<div id="all">
<div>你是不是傻</div>
<span id="btn">分享</span>
</div>
**//JS代码**
<script type="text/javascript">
var oAll=document.getElementById("all");
oAll.onmouseover=function(){
startMove(oAll,0,7,20);
}
oAll.onmouseout=function(){
startMove(oAll,-200,-7,20);
}
**函数封装代码公式**
function startMove(obj,targetPosition,speed,time){
clearInterval(obj.timer)
obj.timer = setInterval(function(){
if(Math.abs(targetPosition-obj.offsetLeft)<=Math.abs(speed)){
obj.style.left=targetPosition+"px";
}else{
obj.style.left=obj.offsetLeft+speed+"px";
}
console.log("offset: "+ obj.offsetLeft);
},time);
}
</script>
封装函数，分享侧边栏移入移出
猜你喜欢
转载自blog.csdn.net/weixin_39200549/article/details/82890458
今日推荐
周排行