Question

我正在使用一个显示鼠标光标后面的动画的脚本。我通过运行此代码初始化它：

<SCRIPT LANGUAGE="JavaScript"> 
function JSFX_StartEffects()
{
JSFX.MakeMouseSquidie (15,"<img src='JSFX/ant_head.gif'>" ,"<img src='JSFX/ant_tail.gif'>"
);
}
</SCRIPT>

这是运行onload的众多函数之一，所以我使用的是jQuery的DOM就绪处理程序：

<script language="javascript" type="text/javascript">
$(document).ready(function(){ JSFX_StartEffects() });
</SCRIPT>

这很好用，但我想为用户添加选项，为动画选择一对不同的图像。我有四对不同的选项，因此我在文档中添加了<select>：

<div>
<div class="bebete">
<div>Choisis ta Bebete ! :))))</div>
<br>
<div>
<select id="select1">
<option selected>alien_ant</option> 
<option>alien_arachnid</option> 
<option>cute_worm</option> 
<option>alien_caterpillar</option> 
</select>
</div>
<div>
<br><br>      
<img id="preview1" alt="image" src="http://tip-top-torrents.net/JSFX/alien_ant.jpg"
width="180" h   eight="180">
<h3 id="random1"></h3>
</div>
<br>
</div>
<script type="text/javascript">
var images = [];
var select1 = window.document.getElementById("select1");
var preview1 = window.document.getElementById("preview1");
var random1 = window.document.getElementById("random1");
var selectLength = select1.length;
images[0] = "http://tip-top-torrents.net/JSFX/alien_ant.jpg";
images[1] = "http://tip-top-torrents.net/JSFX/alien_arachnid.jpg";
images[2] = "http://tip-top-torrents.net/JSFX/cute_worm.jpg";
images[3] = "http://tip-top-torrents.net/JSFX/alien_caterpillar.jpg";

function edit_image1() {
var index = select1.selectedIndex;
if (index !== 0) {
preview1.src = images[index];
random1.style.visibility = "hidden";
} else {        
preview1.src = images[Math.floor(Math.random() * selectLength)];
random1.style.visibility = "visible";
}
return true;
}
select1.onchange = edit_image1;
</script>

</div>

我现在正试图弄清楚如何在初始化动画时应用用户的选择。

<SCRIPT LANGUAGE="JavaScript"> 
function JSFX_StartEffects()
{

var Img.src = document.getElementById('preview1.src');

这里我需要使用一个条件。如果用户选择了alien_ant，则必须使用这对图像初始化它：

JSFX.MakeMouseSquidie (15,"<img src='JSFX/ant_head.gif'>" ,"<img src='JSFX/ant_tail.gif'>");

如果没有，我需要将用户的选择与其他选项进行比较并应用适当的图像对。

JSFX.MakeMouseSquidie (15,"<img src='JSFX/worm_head.gif'>" ,"<img src='JSFX/worm_tail.gif'>");
JSFX.MakeMouseSquidie (15,"<img src='JSFX/spider_head.gif'>" ,"<img src='JSFX/spider_tail.gif'>");
JSFX.MakeMouseSquidie (15,"<img src='JSFX/alien_head.gif'>" ,"<img src='JSFX/alien_tail.gif'>");

}
</SCRIPT>

这样做的最佳方式是什么？

您可以在“{鼠标之间”下的this page附近找到我正在使用的原始脚本。

Answer 1

如果系统地命名了所有图像，您可以执行以下操作：

将选项的值设置为文件名的变量部分：

<option value="ant" selected="selected">Ant</option> 
<option value="arachnid">Arachnid</option> 
<option value="worm">Worm</option> 
<option value="caterpillar">Caterpillar</option>

然后替换你在那里的所有js并使用select元素中的值调用尾随鼠标函数，如下所示：

$(function() {
    $("#select1").change(function() {
        JSFX.MakeMouseSquidie (15,"<img src='JSFX/" + $(this).val() + "_head.gif'>" ,"<img src='JSFX/" + $(this).val() + "_tail.gif'>");
    });
});

根据用户在<select> </select>中的选择，在脚本中使用不同的图像

1 个答案: