Javascript功能不起作用，簡單的代碼

下面的很簡單的代碼是行不通的。不知道爲什麼，JS功能平穩移動圖像。幫助會很棒，嘗試幾乎所有的東西。Javascript功能不起作用，簡單的代碼

準備好將代碼粘貼到php腳本並進行測試的代碼。提前

<?php 
echo " 

<script type='text/javascript'> 

var img = document.getElementById('test'); 

function translate(elem, x, y) { 
    var left = 120, 
     top = 120, 
     dx = left - x, 
     dy = top - y, 
     i = 1, 
     count = 20, 
     delay = 20; 

    function loop() { 
     if (i >= count) { return; } 
     i += 1; 
     elem.style.left = (left - (dx * i/count)).toFixed(0) + 'px'; 
     elem.style.top = (top - (dy * i/count)).toFixed(0) + 'px'; 
     setTimeout(loop, delay); 
    } 

    loop(); 
} 

</script> 
"; 
echo ' 
</head> 
<body> 
    <img id="test" src="http://placekitten.com/100/100" style="position:absolute; left:120px; top:120px;"> 


<a href="#" onclick="translate(\'test\', 30 , 30)">Translate to (0, 200)</a> 

</body> 
'; 
?>

來源

2013-04-11 John

寫了許多感謝你爲什麼要使用echo打印出來的HTML/JS的JavaScript代碼從PHP – Amit 2013-04-11 02:40:31

外面？你可以關閉php標籤。 – 2013-04-11 02:41:01

已經試過了，在php外寫結果與這裏的效果相同 – John 2013-04-11 02:41:18

<!doctype html> 
<html> 
<head> 
<script type='text/javascript'> 

function byId(e){return document.getElementById(e);} 

function translate(elem, x, y) { 
    var left = 120, 
     top = 120, 
     dx = left - x, 
     dy = top - y, 
     i = 1, 
     count = 20, 
     delay = 20; 

    function loop() 
    { 
     if (i >= count) 
      return; 
     i += 1; 
     elem.style.left = (left - (dx * i/count)).toFixed(0) + 'px'; 
     elem.style.top = (top - (dy * i/count)).toFixed(0) + 'px'; 
     setTimeout(loop, delay); 
    } 
    loop(); 
} 

window.addEventListener('load', myInit, false); 

function myInit() 
{ 
    byId('myAnchor').addEventListener('click', handleLinkClick, false); 
} 

function handleLinkClick(evt) 
{ 
    //translate(byId('test'), 30, 30); // only works on the #test target. 
    translate(this, 30, 30); // makes the handler work for any element it's attached to. 
} 
</script> 
</head> 
<body> 
    <img id="test" src="http://placekitten.com/100/100" style="position:absolute; left:120px; top:120px;"> 
    <a id='myAnchor' href="#">Translate to (0, 200)</a> 
</body> 
</html>

來源

2013-04-11 03:20:34 enhzflep

男人你真了不起:)工作就像魅力。我很好奇你爲什麼需要添加這兩個功能？ – John 2013-04-11 10:13:13

有一個問題，您沒有使用link移動圖像。這對於此代碼至關重要。輕鬆修復？ – John 2013-04-11 10:23:44

瞭解它:)添加到 John 2013-04-11 10:29:26

Javascript功能不起作用，簡單的代碼

回答

相關問題