大家帮我看下为什么鼠标移出没反应（不会缩回去），谢谢
慕粉2349317883
2019-01-13 10:07
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JS动画2</title>
<style type="text/css">
body,div,span{
margin:0;
padding:0;
}
#div1{
width:200px;
height: 200px;
background: red;
position: relative;
left:-200px;
top: 0;
}
#div1 span{
width:20px;
height:50px;
background: blue;
position:absolute;
left:200px;
top:75px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('div1');
oDiv.onmouseover=function(){
startMove();
}
ODiv.onmouseout=function(){
startMove1();
}
}
//定义定时器初始化为null
var timer=null;
function startMove(){
//先清除之前的定时器
clearInterval(timer);
var oDiv=document.getElementById('div1');
timer=setInterval(function(){
if(oDiv.offsetLeft==0){
clearInterval(timer);
}
else{
oDiv.style.left=oDiv.offsetLeft+10+'px';
}
},30)
}
//鼠标移出
function startMove1(){
//先清除之前的定时器
clearInterval(timer);
var oDiv=document.getElementById('div1');
timer=setInterval(function(){
if(oDiv.offsetLeft==-200){
clearInterval(timer);
}
else{
oDiv.style.left=oDiv.offsetLeft-10+'px';
}
},30)
}
//30表示：每隔30毫秒，就执行一次function里面的操作
</script>
</head>
<body>
<div id="div1"><span id="share">分享</span></div>
</body>
</html>
3回答
-
- ass315
- 2019-02-19 10:22:13
你这个是大写，我的出毛病是……startMove 写成 strtMove……哎
-
- 慕圣9316290
- 2019-02-09 14:28:39
萌新路过
-
- 光小白22
- 2019-01-15 09:09:55
有一个大写有问题
JS动画效果
113925 学习 · 1443 问题
相似问题