Question

我希望跨度移动，以便当您位于div.url的右侧时，span内的div.url结尾处就是一直。< / p>

当您位于div.url的左侧时，您位于span的左侧。

希望这是有道理的。我不希望在网址结束后有任何可见的空格...它应与div.url的右侧匹配

ps：如果你可以在滑动时应用钟形曲线，那么奖励积分就会使得网址的中点是最快的加速度。

function log(m){
    ( console.log && console.log(m) );
}
$(function(){
    $(".url").mousemove(function(e){
        var $targ = $(e.currentTarget)
            , $span = $targ.find('span')
            , offset = e.pageX - $targ.offset().left
        ;

        log($targ);
        log(offset);
        $span.css({ left: -offset });
    });
});

table, td { border: 1px solid gray; }
td, .url { width: 300px; }
.url { overflow-x: hidden; position: relative; }
.url, .url span { padding: 0; height: 20px;  line-height: 20px; }
.url span { position: absolute; left: 0; top: 0; display: block; white-space:nowrap; }
table { margin-left: 200px; }

<table>
    <tbody>
        <tr><td><div class="url"><span>https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js</span></div></td></tr>
        <tr><td><div class="url"><span>https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js</span></div></td></tr>
        <tr><td><div class="url"><span>https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js</span></div></td></tr>
        <tr><td><div class="url"><span>https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js</span></div></td></tr>
        <tr><td><div class="url"><span>https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js</span></div></td></tr>
        <tr><td><div class="url"><span>https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js</span></div></td></tr>
        <tr><td><div class="url"><span>https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js</span></div></td></tr>
    </tbody>
</table>

Answer 1

这是一个修复，加速滚动：http://jsfiddle.net/aw2A9/

$(function(){
    $(".url").mousemove(function(e){
        var $targ = $(e.currentTarget)
        , $span = $targ.find('span')
        , offset = e.pageX - $targ.offset().left
        ;

        var parentwidth = $span.parent().width()
        , overflow = $span.width() - parentwidth
        , scrollmargin = parentwidth * 0.20 // add margin for scroll area
        , scrollwidth = parentwidth - ( scrollmargin * 2 )
        , scrolloffset = Math.min( Math.max(0, offset-scrollmargin ),scrollwidth)
        , ratio = 0.5 - Math.cos(( scrolloffset / scrollwidth ) * Math.PI )/2
        , newpos = overflow * ratio;

        if ( overflow > 0 ) { $span.css({ left: -newpos }); };

    });
});

使用scrollmargin，scrollwidth和scrolloffset进行额外计算，以便在靠近边缘时不会滚动。在此示例中，非滚动区域设置为宽度的20％。

jQuery mousemove动画，用于将长URL滑入视图

1 个答案: