我如何使用JavaScript來製作圖像「晃動」或「顫抖」？

所以我的問題很簡單，我建設HTML網頁，我想結合一些JavaScript到它，從而使圖像「振動」或「抖動」基本上移動在一個相對狹小的空間來回/模式。我如何使用JavaScript來製作圖像「晃動」或「顫抖」？

我做了一些研究，我發現這一點：

Copy the below code and paste it into the <HEAD> section of your page 
Example:<head>Code Here</head> 
<style> 
.jc{ 
position:relative; 
} 
</style> 

<script language="JavaScript1.2"> 

var ns6=document.getElementById&&!document.all 
var ie=document.all 

var customcollect=new Array() 
var i=0 

function jiggleit(num){ 
if ((!document.all&&!document.getElementById)) return; 
customcollect[num].style.left=(parseInt(customcollect[num].style.left)==-1)? customcollect[num].style.left=1 : customcollect[num].style.left=-1 
} 

function init(){ 
if (ie){ 
while (eval("document.all.jiggle"+i)!=null){ 
customcollect[i]= eval("document.all.jiggle"+i) 
i++ 
} 
} 
else if (ns6){ 
while (document.getElementById("jiggle"+i)!=null){ 
customcollect[i]= document.getElementById("jiggle"+i) 
i++ 
} 
} 

if (customcollect.length==1) 
setInterval("jiggleit(0)",80) 
else if (customcollect.length>1) 
for (y=0;y<customcollect.length;y++){ 
var tempvariable='setInterval("jiggleit('+y+')",'+'100)' 
eval(tempvariable) 
} 
} 

window.onload=init 

</script> 

NOW PASTE THIS ANYWHERE YOU WISH YOUR IMAGE TO APPEAR 

<span id="jiggle0" class="jc"><b>YOUR IMAGE URL HERE</b></span>

他們把它叫做一個「顫抖PIC」，並給了一個例子...它正是我想要的。我完全按照他們描述的那樣做了。我在他們說需要的地方添加了代碼，我複製了所有正確的部分（沒有任何一個方向），並且確保一切都在正確的位置。

我測試了一下，沒有圖像！什麼都沒有！我意識到這是因爲我使用黑色背景，如果有任何文字，它也會是黑色的，所以實際發生的情況是它僅顯示我想添加的圖像的URL（我可以看到它後，我突出顯示它）。無論如何，仍然沒有圖像（只是文字），仍然沒有振動/抖動/顫抖/搖擺。我確實注意到有大膽的標籤，它建議添加圖片網址......所以對我來說，這將使我看起來像將文本。

請幫助！我如何使這個代碼工作，或者我如何讓圖像「顫抖」？

來源

2011-04-12 Jacob

我們需要看到您實際使用的HTML，而不是說明。在jsfiddle.net上設置一個小提琴。另外，如果你做了很多動畫相關的編碼，你應該考慮在其中的許多動畫庫之一。會爲你節省很多麻煩 – JohnP 2011-04-12 06:06:23

這是你想要什麼：

Dynamic Drive : Shake Image script

來源

2011-04-12 06:04:25

使用MooTools的，Fx.Shake。檢查this了！

來源

2011-04-12 06:09:21

此行有一個錯誤：

customcollect[num].style.left=(parseInt(customcollect[num].style.left)==-1)? customcollect[num].style.left=1 : customcollect[num].style.left=-1

你可能想：

customcollect[num].style.left=(parseInt(customcollect[num].style.left)==-1) ? 1 : -1;

來源

2011-04-12 06:10:04 oedo

我不知道什麼是錯的，上面的代碼，對不起。

我恨嘟嘟我自己的號角，但我最近發佈，可能爲你工作，如果你願意使用jQuery插件。它被稱爲jRumble。您可以自定義X範圍，Y範圍，旋轉範圍，隆隆聲速度和事件類型。它可以用在任何元素上，所以如果你願意的話，你可以直接將它應用到圖像或圖像所在的div上。

來源

2011-04-12 06:45:24 jackrugile

NICe謝謝你。現在我準備好了...... RUUUUMBLEEE！ – ppumkin 2012-07-12 09:18:10

我如何使用JavaScript來製作圖像「晃動」或「顫抖」？

回答

相關問題