求助,為什鼠標(biāo)必須在藍(lán)色部分才向前運(yùn)動(dòng)?????鼠標(biāo)移入不應(yīng)該是一次觸發(fā),應(yīng)該到鼠標(biāo)移動(dòng)前都執(zhí)行這個(gè)動(dòng)作么???代碼和老師一樣,為什么我不能像老師一樣運(yùn)動(dòng)啊???
<!doctype html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>速度動(dòng)畫</title>?
<style type="text/css">
*{margin: 0;padding: 0}
#big {height: 200px;width:200px;background-color: red;position: relative;left: -200px;top: 10px}
#big span{height: 20px;width:50px;background-color: blue;position: absolute;cursor: pointer;top: 85px;left:200px;}
? ? </style>
? ?<script>
? ? var timer=null;
? ?var speed=0;
? ? ?window.onload=function(){
? ? ?var start=document.getElementById("s");
? ? ?start.onmouseover=function(){
? ? ? ? ? forth(0);
? ? ?}
? ? ?start.onmouseout=function(){
? ? ? ? back(-200);
? ? ?}
?}
? ? ?function forth(target){
? ? ? clearInterval(timer);
? ? ? var big=document.getElementById("big");
? ? ? timer=setInterval(function(){
? ? ? if(big.offsetLeft<target){
? ? ? speed=10;
? ? ? }
? ? ? ?else{
? ? ? speed=-10;
? ? ? }
? ? ? ?if(big.offsetLeft==target){
? ? ? clearInterval(timer);
? ? ? }
? ? ? else{
? ? ? ? ? ? ? ? ?big.style.left=big.offsetLeft+speed+'px';
? ? ? }
? ? ? },50)
? ? ?}
? ? ? function back(target){
? ? ? ?clearInterval(timer);
? ? ? ?var big=document.getElementById("big");
? ? ? timer=setInterval(function(){
? ? ? if(big.offsetLeft<target){
? ? ? speed=10;
? ? ? }
? ? ? else {
? ? ? speed=-10;
? ? ? }
? ? ? if(big.offsetLeft==target){
? ? ? clearInterval(timer);
? ? ? }
? ? ? else{
? ? ? ? ? ? ? ? ?big.style.left=big.offsetLeft+speed+'px';
? ? ? }
? ? ?
? ? ? },50)
? ? ?}
? ?
? ?</script>
</head>
<body>
<div id="big"><span id="s">開始</span></div>
</body>
</html>
鼠標(biāo)移入藍(lán)色部分物體開始運(yùn)動(dòng),但是當(dāng)藍(lán)色部分將要離開鼠標(biāo)的時(shí)候(鼠標(biāo)不動(dòng),物體向前運(yùn)動(dòng))就不向前了,就開始向前向后患者來????
2019-03-08
你的鼠標(biāo)移入移出事件是綁定在藍(lán)色部分的,而藍(lán)色部分是包含在div里的;你換成綁定在big上 就好了