顯示Javascript圖像從文字鏈接中淡入效果

我有一個簡單的菜單，根據您將鼠標懸停在哪個鏈接上顯示不同的圖像。現在我想讓出現的圖像會淡入以便看起來更好，但我對Javascript還不是很熟悉，所以我想知道是否有人可以幫助我。顯示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>

謝謝！ Nuno

來源

2013-04-01 Nuno Luz

你怎麼去用呢？任何解決方案都有幫助嗎？你最終如何解決這個問題？ –

你可以使用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-01 01:06:28

我把所有您的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-01 01:11:00

顯示Javascript圖像從文字鏈接中淡入效果

回答

相關問題