window.onload = function(){
var returnHome = document.getElementById('return-home');
var returnLeft = document.getElementById('return-home-left');
var returnRight = document.getElementById('return-home-right');
returnRight.onclick = function(){
startMove(0,10);
};
returnLeft.onclick = function(){
startMove(-250,-10);
};
var timer = null;
function startMove(a,b){
var returnHome = document.getElementById('return-home');
setInterval(function(){
if(returnHome.offsetLeft === a){
clearInterval(null);
}else{
returnHome.style.left = returnHome.offsetLeft + b +"px";
}
},30);
}
};<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>返回首页</title>
<link href="./return-home.css" rel="stylesheet"> <!-- /css样式表 -->
<link href="./icomoon-common/style.css" rel="stylesheet"> <!-- /图标字体 -->
</head>
<body>
<!-- 整个ul丢进去 -->
<ul id="return-home">
<li class="left sidebar" id="return-home-left">
<a href="javascript:;">
<span></span> 关
</a>
</li>
<li>
<a href="#">
<span></span> 首页
</a>
</li>
<li>
<a href="#">
<span></span> 首页
</a>
</li>
<li>
<a href="#">
<span class=" icon-play"></span> 首页
</a>''
</li>
<li>
<a href="#">
<span></span> 首页
</a>
</li>
<li class="right sidebar" id="return-home-right">
<a href="javascript:;">
<span></span> 开
</a>
</li>
</ul>
<script src="./return-home.js"></script> <!-- /整段js代码 -->
</body>
</html>@charset 'UTF-8';
.return-home
{
font-size: 0;
position: fixed;
z-index: 999999;
bottom: 5%;
/*left: calc(100% / 6 - 100%);*/
left: -250px;
display: inline-block;
overflow: hidden;
width: 300px;
height: 50px;
margin: 0;
padding: 0;
opacity: .7;
border: 0;
background-color: white;
}
.return-home li
{
font-size: 0;
display: inline-block;
width: 50px;
height: 100%;
margin: 0;
padding: 0;
list-style: none;
border: 0;
}
.return-home .sidebar
{
background-color: transparent;
}
.return-home .sidebar a
{
color: #666;
}
.return-home li a
{
font-size: 14px;
display: inline-block;
width: 100%;
height: 100%;
text-align: center;
}
.return-home li a span
{
font-size: 24px;
display: inline-block;
width: 100%;
margin-top: 5px;
}
2 回答
stone310
TA贡献361条经验 获得超191个赞
有几个地方要注意和修改的：
1、startMove(0,10)，表达的意思是以10px的速度到达left为0的位置
如果你body初始margin（好像是8）没有去掉（我看你CSS代码上面没有），那么你用offsetLeft初始位置就是8，你以每次10px的速度永远到不了offsetLeft=0这个位置
2、if(returnHome.offsetLeft === a){
clearInterval(null);
}
这个动画停不了，给setInterval起个名字，然后再把null换掉
3、function startMove(a,b)函数一开始要放置一个clearInterval，否则多次点击计时器会叠加（点一下左点一下右就在那乱抖）
添加回答
举报
0/150
提交
取消