求助,為什鼠標必須在藍色部分才向前運動啊???鼠標移入不應該是一次觸發,應該到鼠標移動前都執行這個動作么???代碼和老師一樣,為什么我不能像老師一樣運動?。???
<!doctype html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>速度動畫</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>
鼠標移入藍色部分物體開始運動,但是當藍色部分將要離開鼠標的時候(鼠標不動,物體向前運動)就不向前了,就開始向前向后患者來????
2019-03-08
你的鼠標移入移出事件是綁定在藍色部分的,而藍色部分是包含在div里的;你換成綁定在big上 就好了