課程
/前端開發
/JavaScript
/JS動畫效果
這個只能執行一次啊，怎么才能不斷執行而不用刷新呢？
2014-12-10
源自：JS動畫效果 2-1
正在回答
可以在超出界外清空之后，讓位置再減去一個速度值，回到界內，即可。
var oDiv=document.getElementById('photo');
oDiv.onmouseover=function(){
onMove(2);
}
oDiv.onmouseout=function(){
onMove(-2);
var ?timer=null;
function onMove(speed){
clearInterval(timer);
?timer=setInterval(function(){
?if(oDiv.offsetLeft>=400&&oDiv.offsetLeft<=600){
oDiv.style.left=oDiv.offsetLeft+speed+"px";?
?}else{
?clearInterval(timer);oDiv.style.left=oDiv.offsetLeft-speed+"px";
?}
},5)
當oDiv.offsetLeft的值和邊界值相等時，就會出現程序不再執行的情況，這也是speed取值造成的。
舉報
通過本課程JS動畫的學習，從簡單動畫開始，逐步深入各種動畫框架封裝
1 回答有個問題，鼠標隨著在 a內持續移動 事件持續跟著發生，怎么能鼠標移入a之后只執行一次就停下來
2 回答關于兩個startMove函數先后執行的問題
2 回答同時執行透明度和寬度改變的問題
2 回答應該是先執行1,1執行完了再執行2，怎么可能出現2覆蓋一的現象？ 函數的執行應該是有先后順序的
3 回答為什么連著寫不行？
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2014-12-11
可以在超出界外清空之后，讓位置再減去一個速度值，回到界內，即可。
var oDiv=document.getElementById('photo');
oDiv.onmouseover=function(){
onMove(2);
}
oDiv.onmouseout=function(){
onMove(-2);
}
}
var ?timer=null;
function onMove(speed){
clearInterval(timer);
var oDiv=document.getElementById('photo');
?timer=setInterval(function(){
?if(oDiv.offsetLeft>=400&&oDiv.offsetLeft<=600){
oDiv.style.left=oDiv.offsetLeft+speed+"px";?
?}else{
?clearInterval(timer);oDiv.style.left=oDiv.offsetLeft-speed+"px";
?}
},5)
}
2014-12-10
當oDiv.offsetLeft的值和邊界值相等時，就會出現程序不再執行的情況，這也是speed取值造成的。