2013-03-28 24 views
1

我正在使用移動版本的網站&當文本長於某些像素時需要添加滾動功能。我想實現下面的邏輯到我的項目使用jquerymobile滾動標題文本

Source of scrolling example

I want to implement same in my example到目前爲止,我不能夠讓它工作,我的基本結構將保持同樣的我只想滾動文本,如果屏幕小,顯示完整的標題。

$("div.aaa h2").each(function(){  
    var m = $(this).width(); 
    var n = $(this).find("div.aaa h2").width(); 
    var o = m - n; 
    var z = $(this).find("div.aaa h2"); 

    $(this).mouseenter(function(){ 
     //alert ("title: " + m + " text: " + n + " diff: " + o); 
     if (n > m) { 
      z.animate({ 
      left: o      
     }, 2000); 
     } 
    }).mouseleave(function(){ 
      z.animate({ 
      left: "0" 
     }, 2000);  
    });   

}); 

我願意接受這是工作&任何解決方案檢測是否完整標題是可見的或不那麼它應該實現對於具有長標題並非所有這些元素上滾動。

其他方法我試過也沒有,因爲它滾動所有元素沒有一個對我做鼠標懸停

http://jsfiddle.net/yVtVE/21/

+0

你可以在我的答案用同樣的方法[這裏](http://stackoverflow.com/questions/15676121/jquery-mobile-listview-descrption-with-scrolling/ 15679055#15679055)。它可以根據屏幕寬度進行設置。 – Omar

+0

檢查此http://jsfiddle.net/Palestinian/ctC97/ – Omar

回答

3

增加了額外的參數「ELEM」到animateTitle功能,ELEM定義時,懸停事件完成。 我從.aaa類刪除width:330px css代碼。添加了對.aaa元素寬度的額外控制(同時懸停了.aaa類元素)。

這裏是您的解決方案:jsfiddle.net/yVtVe/22/

+0

您的解決方案正是我正在尋找,但我的實際標記ID略微不同於此中使用的。我將不勝感激,如果你能幫我修復這個http://jsfiddle.net/yVtVE/24/,我試圖讓它工作到目前爲止我無法做到,因爲我只是一個學習者,當涉及到jQuery。我希望你能回覆。 – Learning