如何慢慢地一個div內汽車無移動圖像到不同的座標系

-1

我有一個圖像的div內。我想用某種定時器將圖像移動到div內部的各個位置。如何慢慢地一個div內汽車無移動圖像到不同的座標系

HTML示例：

<div id="Container" width="200" height="100"><img src="..."></div>

來源

2012-04-19 Nag Arjun

什麼「不同的位置」？角落？ – Andre 2012-04-18 16:12:41

你能解釋一下「將圖像移動到不同位置」的含義嗎？就目前而言，這個問題措辭不佳。 – Kappei 2012-04-18 16:13:14

*「（...）移動圖像」*，怎麼樣？只是移動，或動畫？什麼類型的動畫？ *「（...）到不同的位置」*，在哪裏？您可以使用[jsFiddle]（http://jsfiddle.net/）向我們展示您嘗試的內容。 – 2012-04-18 16:16:33

我掀起的東西了使用jQuery。有趣的是，我開始通過同時動畫top和left，並經過一番努力和三角，我意識到，如果你分開的x和y分量，在一個div蹦跳着的動畫變得輕鬆了許多。

演示：http://jsfiddle.net/jtbowden/DcgwR/

下面是可以處理多個元素的一個版本：

演示：http://jsfiddle.net/jtbowden/DcgwR/2/

的代碼的關鍵部分是：

// Parameters 
// img: jQuery element (not necessarily img) 
// speed: in px/millisecond 
// max: maximum distance to travel 
// dir: 'left' or 'top' 

function bounce(img, speed, max, dir) { 
    speed += ((Math.random() * varSpeed) - (varSpeed/2)); 
    speed = speed < minSpeed ? minSpeed : (speed > maxSpeed ? maxSpeed : speed) 
    var time = max/speed; 
    var position = img.position(); 
    var target = (position[dir] < 2) ? max : 0; 

    var style = { 
     queue: false 
    }; 
    style[dir] = target; 
    img.animate(style, { 
     duration: time, 
     queue: false, 
     easing: "linear", 
     complete: function() { 
      bounce(img, time, max, dir); 
     } 
    }); 
}

maxSpeed，minSpeed，全局定義varSpeed（單位爲px/ms），varSpeed速度在每次反彈時變化多少。我有一個單獨的功能startBounce，它調用bounce兩次，一次爲left，一次爲top。由於動畫未排隊，因此它們獨立動畫。

來源

2012-04-19 18:17:26

有沒有辦法在較慢的速度下停止顛簸？ – zoltar 2014-09-06 18:53:35

讓我們假設你有下面的HTML：

<div id="container" style="width:500px;height:500px"> 
    <img src="foo.gif" width="50" height="50"> 
</div>

現在使用jQuery你可以這樣做：

<script> 
    ;(function() { 
    var img = $("#container img"); 
    img.css({ position: "absolute" }); 
    img.animate({ left: 50, top: 50 }); 
    img.animate({ left: 100, top: 100 }); 
    // and so on 

    // or if you just want to position it without animation 
    img.css({ left: 50, top: 50 }); 
    // some timeout or similar 
    img.css({ left: 100, top: 100 }); 
    // and so on 
    })();

來源

2012-04-18 20:05:41

我相信你不會只是希望我們爲您編寫代碼並希望得到答案：

你是在正確的軌道上，使用定時器（查詢：setTimeout），上whichyou可以改變位置（CSS;查閱屬性position，left，right和可能margin，大概width和height）。

如果是我，我會使用jQuery的，在這種情況下，你應該查找animate，.offset() ...

來源

2012-04-19 14:47:27 LeonardChallis

事情是這樣的：

<script> 
function moveit() 
{ 
    var animatedImg = document.getElementById("animate"); 
    var top = animatedImg.offsetTop; 
    var left = animatedImg.offsetLeft; 
    top++; 
    left++; 
    if (top > 100) 
    { 
    top = 0; 
    } 
    if (left > 200) 
    { 
    left = 0; 
    } 
    animatedImg.setAttribute("style", "position: relative; top: " + top + "px; left: " + left + "px;"); 
    setTimeout(moveIt, 1000); 
} 
</script> 
... 
<body onload="moveIt()"> 
<div> 
    <img src="imageSource" id="animate" /> 
</div>

來源

2012-04-19 15:09:03

如何慢慢地一個div內汽車無移動圖像到不同的座標系

回答

相關問題