Question

我有一系列文字链接，当翻过来时，会导致特定的图片链接淡入;在翻转不同的文本链接之前，该图像不会淡化/更改为其他图像。

我确实找到了一些基本的脚本来实现这一点，虽然图像更改时没有淡出效果：

<script language="javascript">
function roll(img_name1, img_src1)
{
document[img_name1].src = img_src1;
}
</script>

<ul>
<li><a href="1.htm" onMouseOver="roll('poster', '1.png')">111</a>
<li><a href="2.htm" onMouseOver="roll('poster', '2.png')">222</a>
<li><a href="3.htm" onMouseOver="roll('poster', '2.png')">333</a>
</ul>

<br><br><br><br>

<p align="center"><img src="1.png" name="poster"></p>

一个完美的例子是http://sharifabraham.com/projects/，我在类似的帖子中发现了hover on text link to change image。我试图在上述两个链接中编辑和使用代码，但无济于事。任何有关做什么的见解都非常感谢。

Answer 1

我放弃了内联JS代码，因为它不是首选方式。

我已经为li添加了一个数据属性，其中包含要加载的图像。

$(document).ready(function() {
  $('ul.image-switch li').mouseover(function() {
    var image_src = $(this).data('image');
    var img = $('.image-container img');
    if (img.attr('src') != image_src) { // only do the fade if other image is selected
      img.fadeOut('slow', function() { // fadeout the current image
        img.attr('src', img).fadeIn(); // load and fadein new image
      });
    }
  });
});

<ul class="image-switch">
  <li><a href="1.htm" data-image="1.png">111</a>
  <li><a href="2.htm" data-image="2.png">222</a>
  <li><a href="3.htm" data-image="2.png">333</a>
</ul>

<br><br><br><br>

<p align="center" class="image-container"><img src="1.png" name="poster"></p>

修改

抱歉做了一个类型。

DEMO：http://jsfiddle.net/yVcV3/1/

编辑2

http://jsfiddle.net/yVcV3/2/

Answer 2

使用jQuery淡化图像

http://api.jquery.com/category/effects/fading/

将鼠标悬停在文本上以淡入淡出来更改图像

2 个答案: