0

我想让跨度移动，这样当你在右边时，你一直在里面div.url的尽头。spandiv.url

当你在左边时div.url，你在左边span。

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

演示：http: //jsfiddle.net/chovy/FcSNw/

ps：如果可以将钟形曲线应用于滑动，则可以加分，因此url的中点是最快的加速度。

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>
4

1 回答 1

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%。

于 2013-07-16T01:29:44.587 回答