想js代码在页面窗口右侧弹出一个侧边栏div，但是不知道问题出在哪
#div1{width:100px;height:200px;background:red;top:300px;right:-100px;position:absolut...
#div1 {width:100px; height:200px; background:red; top:300px; right:-100px; position:absolute;}#div1 span{ width:20px; height:60px; line-height:20px; top:70px; right:100px; background:yellow; text-align:center; position:absolute;}这是div的设置
startmove2这句忽略已改为startmove 展开
startmove2这句忽略已改为startmove 展开
1个回答
展开全部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>222</title>
<style>
html, body{width: 100%; height: 100%; overflow: hidden;}
#div1 {width:100px; height:200px; background:red; top:300px; right:-100px; position:absolute;}
#div1 span{width:20px; height:60px; line-height:20px; top:70px; right:100px; background:yellow; text-align:center; position:absolute;}
</style>
</head>
<body>
<div id="div1"><span>111</span></div>
<script>
window.onload = function () {
var oDiv = document.getElementById('div1');
oDiv.style.right = '-100px';
oDiv.onmouseover = function () {
startMove(1);
};
oDiv.onmouseout = function () {
startMove(0);
}
};
var timer = null;
function startMove(iTarget) {
var oDiv = document.getElementById('div1');
var speed = 1;
clearInterval(timer);
timer = setInterval(function () {
if(iTarget){
oDiv.style.right = parseFloat(oDiv.style.right) + speed + 'px';
if(parseFloat(oDiv.style.right) >= 0){
oDiv.style.right = '0';
window.clearInterval(timer);
}
}else {
oDiv.style.right = parseFloat(oDiv.style.right) - speed + 'px';
if(parseFloat(oDiv.style.right) <= -100){
oDiv.style.right = '-100px';
window.clearInterval(timer);
}
}
}, 10);
}
</script>
</body>
</html>
我感觉你的逻辑有点太复杂了，既然都已经定位了，为何不直接用right值来调整呢，上面代码是用改变right值来实现的，并且这种效果通过css的transition更容易实现，可能是你为了专门练习JS吧。
追问
确实是在练习运动框架，我试着right取赋值的时候会出现水平滚动条，这个怎么处理为好
追答
那个是由于div把页面撑开了，你把整个页面overflow：hidden，溢出隐藏就可以了。建议你在练习的时候尽量用一些兼容性上没问题但是逻辑更为简单的好点，这样对于性能上有很大帮助，否则在大点的项目中逻辑太复杂会导致性能下降，影响体验的。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
