Question

我有一个简单的菜单，根据您将鼠标光标悬停在哪个链接上显示不同的图像。现在我想要出现的图像会淡入，以便它看起来更好，但我还不太熟悉Javascript，所以我想知道是否有人可以帮助我。

到目前为止，这是我的代码：

使用Javascript：

if (document.images) {


image2 = new Image
image3 = new Image
image4 = new Image
image5 = new Image
image6 = new Image
image7 = new Image
image8 = new Image
image9 = new Image
image10 = new Image


image1.src = "imgs/Categories/1.jpg" 
image2.src = "imgs/Categories/2.jpg"
image3.src = "imgs/Categories/3.jpg"
image4.src = "imgs/Categories/4.jpg"
image5.src = "imgs/Categories/5.jpg"
image6.src = "imgs/Categories/6.jpg"
image7.src = "imgs/Categories/7.jpg"
image8.src = "imgs/Categories/8.jpg"
image9.src = "imgs/Categories/9.jpg"
image10.src = "imgs/Categories/10.jpg"

}

这是HTML：

<ul class="menu">
          <li><a href="#" onMouseover="document.imagename.src=image1.src",  onMouseout="document.imagename.src=image10.src">Link 1</a></li>
          <li ><a href="#" onMouseover="document.imagename.src=image2.src" onMouseout="document.imagename.src=image10.src">Link 2 </a></li>
          <li><a href="#" onMouseover="document.imagename.src=image3.src" onMouseout="document.imagename.src=image12.src">Link 3 </a></li>
          <li><a href="#" onMouseover="document.imagename.src=image4.src" onMouseout="document.imagename.src=image10.src"> Link 4 </a></li>
          <li><a href="#" onMouseover="document.imagename.src=image5.src" onMouseout="document.imagename.src=image10.src">Link 5 </a></li>
          <li><a href="#" onMouseover="document.imagename.src=image6.src" onMouseout="document.imagename.src=image10.src">Link 6 </a></li>
          <li><a href="#" onMouseover="document.imagename.src=image7.src" onMouseout="document.imagename.src=image12.src">Link 7 </a></li>
          <li><a href="#" onMouseover="document.imagename.src=image8.src" onMouseout="document.imagename.src=image10.src">Link 8 </a></li>
          <li><a href="#" onMouseover="document.imagename.src=image9.src" onMouseout="document.imagename.src=image10.src">Link 9</a>
          </li>
          </ul>

谢谢！努诺

Answer 1

你可以使用jQuery fadein＆amp; jQuery fadeout for this。

以下是一个示例：http://kaidez.com/tutorial-simple-jquery-fade-in-fade-out/

javascript部分看起来有点像这样：

<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() { 
    $('#picOne').fadeIn(1500).delay(3500).fadeOut(1500);
    $('#picTwo').delay(5000).fadeIn(1500);
});
</script>

Answer 2

我会从html中取出你所有的javascript并使用jquery。

<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>

<script type="text/javascript">

    $('.menu li').mouseover(function() {
       whichItem = $(this).index();
       $('body').animate({ background-image: 'url(imgs/Categories/'+whichItem+'.jpg)' }, "slow");
    });
</script>

HTML

 <ul class="menu">
         <li><a href="#">Link 1</a></li>
         <li><a href="#">Link 2</a></li>
         <li><a href="#">Link 3</a></li>
         <li><a href="#">Link 4</a></li>
          ...      
   </ul>

显示Javascript图像从文本链接中淡出效果

2 个答案: