我如何使用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来制作图像“晃动”或“颤抖”？

回答

相关问题