我将如何使用 javascript 使图像“抖动”或“颤抖”？
所以我的问题很简单，我正在用 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（我可以一旦我突出显示它，就可以看到它）。无论如何，仍然没有图像（只有文本），并且仍然没有振动/抖动/颤抖/抖动。我确实注意到，建议添加图像 URL 的地方有粗体标签……所以对我来说，这会让我看起来像是要输入文本。
请帮忙！我该如何让这段代码工作，或者如何让图像“颤抖”？
So my question is simple, I'm building a webpage in HTML and I want to incorporate a little JavaScript into it so as to make an image "vibrate" or "jiggle" Basically move back and forth in a relatively tight space/pattern.
I did some research and I found this:
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>
They called it a "shivering pic" and gave an example... its exactly what I want. I did it exactly as they described it. I added the code where they said it was needed, I copied all the right parts (none of the directions), and I made sure everything is in the right place.
I tested it out an there was no image! There was nothing! I realized that this was because I was using a black background, and if there was any text, it would also be black, so what actually was happening was that it was merely showing the URL of the image I want to add in (I could see it once I highlighted it). Regardless, still no image (just the text), and still no vibrating/jittering/shivering/jiggling. I did note that there were bold tags right where it suggests to add the image URL... so to me that would make it seem like I would be putting in text.
PLEASE HELP! How do I make this code work, or how do I make an image "shiver"?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
这就是您想要的：
动态驱动：摇动图像脚本
This is what you want :
Dynamic Drive : Shake Image script
我不确定上面的代码有什么问题，抱歉。
我讨厌自吹自擂，但我最近发布了一个可能适合你的插件，如果你愿意使用 jQuery。它被称为jRumble。您可以自定义 X 范围、Y 范围、旋转范围、震动速度和事件类型。它可以用于任何元素，因此您可以根据需要将其直接应用于图像或图像所在的 div。
I am not sure what is wrong with the above code, sorry.
I hate to toot my own horn, but I recently released a plugin that might work for you, if you are willing to use jQuery. It is called jRumble. You can customize the X range, Y range, rotation range, rumble speed, and event type. It can be used on any element, so you could apply it directly to the image or to the div that the image is in, if you want.
此行有一个错误：
您可能想要：
this line has an error :
you probably want :
使用 Mootools、Fx.Shake。检查这个！
Use Mootools, Fx.Shake. Check this out!