如果宽度＆gt;在悬停时移动文本420

Question

我想在你将鼠标悬停在 article_head 时，检查 span 宽度，如果它更大，那么420px（parrent div width - article_head）移动文本以查看整个。我知道，它有点复杂......

  

示例：

     

    

  

     

现在，当您悬停“如何安装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
}

我尝试了几次但没有成功......

Answer 1

您可以使用.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/

Answer 2

尝试 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' });
        });
    });
});