jquery
2011-03-07 96 views 0 likes 
0

你能幫我介紹這個腳本:)。添加onmouseover到img標籤

我有一個腳本加載圖像和顯示一次

<script type="text/javascript" src="jquery.js"></script> 


<div class="spacer"></div> 
<div align="center"><script type="text/javascript"> 
var list_images = 'image1.jpg|image2.jpg'; 
var images = list_images.split('|'); 
</script><div class="spoiler-wrap"><div class="spoiler-head folded clickable">Click Here</div> 
       <div class="spoiler-body"></div> 
</div> 


<script type="text/javascript"> 
function initSpoilers(context) 
{ 
    var context = context || 'body'; 
    $('div.spoiler-head', $(context)) 
     .click(function(){ 
      $(this).toggleClass('unfolded'); 
      $(this).next('div.spoiler-body').slideToggle('fast'); 
      var html = $(this).next('div.spoiler-body').html(); 
      var max = $(images).length; 
      // at least 1 image exist 
      if(max>0 && !html) 
      { 
       var ul = $('<ul id="portfolio"></ul>'); 
       $(ul).appendTo($(this).next('div.spoiler-body')); 
       LoadImage(0,max); 
      } 

      function LoadImage(index,max) 
      { 
       if(index<max) 
       { 
        var list = $('<li id="portfolio_'+index+'"></li>').html('<div class="loading"><img src="images/5.gif" alt="loading..." align="baseline" /></div>'); 
           var aaa = $('<div class="highslide" >'+images[index]+'</div>'); 
        $('ul#portfolio').append(list); 
        var curr = $("ul#portfolio li#portfolio_"+index); 
        var img = new Image(); 
          // image onload 
        $(img).load(function() { 
          $(this).css('display','none'); // since .hide() failed in safari 
          $(this).addClass('m_picture'); 
          $(aaa).html(this); 
          $(curr).html('').append(aaa); 
          $(this).fadeIn('slow',function(){ 
           LoadImage(index+1,max); 
          }); 
        }).error(function() { 

         $(curr).remove(); 
         // trigger the next image 
         LoadImage(index+1,max); 
        }).attr('src', images[index]); 

       } 
      } 
     }) 
    ; 
} 
$(document).ready(function(){ 
    initSpoilers('body'); 
}); 
</script> 

我的形象會dislay像:

<ul id="portfolio"> 

<li id="portfolio_0"><div class="highslide"><img style="" src="1.jpg"></div></li> 
<li id="portfolio_1"><div class="highslide"><img style="" src="2.jpg"></div></li> 

</ul> 

知道我想添加一些在IMG標籤,並顯示像

<ul id="portfolio"> 

<li id="portfolio_0"><div class="highslide"><img style="" src="1.jpg" onmouseover="TJPzoom(this);" ></div></li> 
<li id="portfolio_1"><div class="highslide"><img style="" src="2.jpg" onmouseover="TJPzoom(this);" ></div></li> 

</ul> 

可以幫我嗎? 。我認爲可以編輯

$(this).addClass('m_picture'); to add onmouseover="TJPzoom(this);" 

但我不知道該怎麼做。

由於堆放超過流量,大家幫我:)

+0

你知道哪裏的問題恰好是? – 2011-03-07 04:32:27

回答

0

嘗試:

$(this).mouseover(function() 
{ 
    TJPzoom(this); 
}); 
0

有幾個可能的方式。你可以通過jquery使用.hover或者.mouseover事件來觸發TJPzoom(this);

例如(後DOM已加載,或者您插入您的標籤後):

$("#portfolio li").mouseover(TJPzoom($(this))); 

$("#portfolio li").hover(TJPzoom($(this))); 

的代碼:

$(this).addClass('m_picture'); to add onmouseover="TJPzoom(this);" 

合適(我相信,糾正我,如果我錯了)代碼將是:

$(this).attr('onmouseover', 'TJPzoom(this)'); 

希望這有助於

0
$(document).ready(function(){ 
    $("div.highslide img").mouseover(function(){TJPzoom($(this));}); 
}); 
+0

感謝您的幫助。我可以說如何獲得寬度和高度添加到img選項卡, – MIF 2011-03-07 05:05:34

+0

您想獲得或設置寬度和高度?無論如何,您可以嘗試在TJPzoom函數中使用函數$(this).height()和$(this).width()來設置或獲取維度。 – Quincy 2011-03-07 05:12:19

相關問題