帮我看看哪有问题,怎么框架弹回去就消失了呢?
来源：2-1 JS速度动画
oju
2016-08-20 16:40
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/1.css">
<style type="text/css">
*｛margin:0;padding:0;｝
li{
list-style:none;
}
.huiyuan,.mima ,.chongfu{
width:500px;
font-size: 30px;
margin:0 auto;
}
#yu{
position:relative;
top:0px;
left:-480px;
border: 2px solid #000;
border-radius: 10px;
width:500px;
}
</style>
</head>
<body>
<!-- <form method="post" action="saike.php"> -->
<div id="yu">
<ul>
<li class="huiyuan">会员：<input type="text" placeholder="ttt"/></li>
<li class="mima">密码：<input type= "password"/></li>
<li class="chongfu">重复密码:<input type="password"/></li><input type="button" name="bbb" onclick="aaa()" value="333">
</ul>
</div>
<!-- </form> -->
<script>
window.onload = function(){
var c = document.getElementById('yu');
c.onmouseover =function(){
move();
}
c.onmouseout = function(){
leave();
}
}
var timer = null;
function move(){
clearInterval(timer);
timer = setInterval(function(){
var c = document.getElementById('yu');
if(c.offsetLeft >= 0){
clearInterval(timer);
}
else{
c.style.left = c.offsetLeft+10+"px";
}
},10)
}
function leave(){
clearInterval(timer);
timer = setInterval(function(){
var c = document.getElementById('yu');
if(c.offsetLeft <= -480+"px"){
clearInterval(timer);
}
else{
c.style.left = c.offsetLeft-10+"px";
}
},10)
}
</script>
</body>
</html>
写回答
关注
1回答
-
- 穿皮夹克的大熊
- 2016-08-20 20:14:23
offsetLeft 为数值 不该＋px
function leave(){
clearInterval(timer);
timer = setInterval(function(){
var c = document.getElementById('yu');
if(c.offsetLeft <= -480){
clearInterval(timer);
}
else{
c.style.left = c.offsetLeft-10+"px";
}
},10)
}
JS动画效果
通过本课程JS动画的学习，从简单动画开始，逐步深入各种动画框架封装
113923 学习 · 1443 问题
相似问题