Question

所以我的问题很简单，我正在用HTML构建一个网页，我想在其中加入一些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>

他们称之为“颤抖的照片”并举了一个例子......这正是我想要的。我完全按照他们的描述做到了。我在他们说需要的地方添加了代码，我复制了所有正确的部分（没有任何指示），我确保一切都在正确的位置。

我测试了它没有图像！什么都没有！我意识到这是因为我使用的是黑色背景，如果有任何文字，它也会是黑色的，所以实际发生的是它只是显示我要添加的图像的URL（我可以看到它一旦我突出显示它）。无论如何，仍然没有图像（只是文字），仍然没有振动/抖动/颤抖/摇晃。我确实注意到有大胆的标签，它建议添加图片网址...所以对我来说，这似乎会让我看起来像是在放文字。

请帮助！如何使这段代码工作，或者如何使图像“颤抖”？

Answer 1

这就是你想要的：

Dynamic Drive : Shake Image script

Answer 2

我不确定上述代码有什么问题，抱歉。

我讨厌自己的号角，但我最近发布了一个可能适合你的插件，如果你愿意使用jQuery的话。它被称为jRumble。您可以自定义X范围，Y范围，旋转范围，隆隆速度和事件类型。它可以在任何元素上使用，因此您可以将其直接应用于图像或图像所在的div（如果需要）。

Answer 3

此行有错误：

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;

Answer 4

使用Mootools，Fx.Shake。检查this！

我如何使用javascript制作图像“摇晃”或“颤抖”？

4 个答案: