我想，當你將鼠標懸停DIV article_head做，檢查跨度寬度，如果是更大然後420PX（parrent DIV寬度 - article_head）移動文本看到它的整體。我知道，這有點複雜......懸停移動文本，如果寬度> 420

例子：

現在，當你將鼠標懸停「如何安裝Windows ...」它會移動文字並顯示

<div class="article_head"><span>Text with bigger width than 420px</span></div> 

.article_head span{ 
    font-size: 40px; 
    font-weight: 300; 
    line-height: 110% !important; 
    text-transform: none !important; 
    white-space:nowrap; 
} 
.article_head{ 
    line-height: 110% !important; 
    margin:-10px 0 10px; 
    height: 50px; 
    overflow: hidden; 
    width:420px 
}

我試過幾次，但都沒有成功...

來源

2014-01-11 Vladimir Aleksić

@ZachSaucier我試圖在js中做一些事情，但span寬度總是等於父寬度，並且它永遠不會比父寬度大。所以當我寫寬度大於420時，它永遠不會是真的，因爲跨度寬度總是等於420px，並且不會改變。 –

嘗試this Example：

<div class="article_head"> 
    <span>Now, when you hover "How to install Windows..." it will move text and show Now, when you hover "How to install Windows..." it will move text and show </span> 
<div>

CSS

添加位置：相對於第二條主管

body {padding:20px;} 
.article_head span{ 
    font-size: 40px; 
    font-weight: 300; 
    line-height: 110% !important; 
    text-transform: none !important; 
    white-space:nowrap; 
    position:relative; 
} 
.article_head{ 
    line-height: 110% !important; 
    margin:-10px 0 10px; 
    height: 50px; 
    overflow: hidden; 
    width:420px 
}

jQuery的

你也可以增加緩解喜歡this example

$(document).ready(function() { 
    $('.article_head').each(function() { 
     var head_width = $(this).width(); 
     var span_width = $(this).find('span').innerWidth(); 
      $('.article_head').hover(function() { 
     if (span_width > head_width) { 
      $(this).find('span').stop().animate({ 'right': head_width }); 
     } 
     }, function() { 
      $(this).find('span').stop().animate({ 'right': '0px' }); 
     }); 
    }); 
});

來源

2014-01-11 17:03:39 hsobhy

@ Vlada903：我已經在上面的fuddle例子中爲您添加了jQuery Easing ...祝你好運 – hsobhy

謝謝......這幫了我很多。我改變了一部分代碼，現在一切都很好。 –

你可以做的是使用.scrollLeft方法的文章腦袋裏滾動。您可以通過評估htmlElement.scrollWidth - htmlElement.clientWidth

計算最大滾動位置，以便可以實現兩個功能：一個滾動向右：

function move(htmlElement) { 
    console.log(htmlElement); 
    htmlElement.scrollLeft = htmlElement.scrollWidth - htmlElement.clientWidth; 
}

和功能重置滾動位置：

function moveBack(htmlElement) { 
    htmlElement.scrollLeft = 0; 
}

看看這個例子：http://jsfiddle.net/2ysP7/

來源

2014-01-11 15:52:31

有什麼辦法動畫這一點，我可以用它這樣的： $（「 article_head」）懸停（...）因爲我有一個以上的分度，文本...... –

謝謝它的工作，我只想知道我可以動畫這個？ –

懸停移動文本，如果寬度> 420

回答

CSS

jQuery的

相關問題