1

我有一个简单的菜单，它根据您将鼠标光标悬停在哪个链接上显示不同的图像。现在我希望出现的图像会淡入，以便看起来更好，但我对 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>

谢谢！努诺

4

2 回答 2

1

您可以为此使用 jQuery 淡入和 jQuery 淡出。

这是一个例子： 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>
于 2013-04-01T01:06:28.323 回答
1

我会将您所有的 javascript 从 html 中提取出来并使用 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>
于 2013-04-01T01:11:00.017 回答