javascript - 悬停时临时动画输入类型文本

Question

如果文本比当前输入宽度宽，我想显示输入类型文本的内容。

当我悬停该字段时，我希望文本向左滚动或类似的东西，以查看隐藏的文本。

谢谢你。

注意：请告诉我是否必须添加/更改问题的标签。

Answer 1

我想过我会如何做到这一点，这就是我想出的。

在输入悬停时，我将获取输入值并将其放入 div （或任何其他元素）中。然后获取该 div 的宽度并将其与输入的宽度进行比较。如果 div 比输入宽，那么我将通过宽度的差异对输入文本缩进进行动画处理。

$('input').hover(function(){
    var temp = $('div').html($(this).val()).width();
    if($(this).width() < temp){
        $(this).animate({
            textIndent: $(this).width()-temp
        }, 100);
    }
});

你可以在这里看到完整的解决方案：http: //jsfiddle.net/taneleero/tB5C5/2/

应该足以让你前进。

Answer 2

嗯，尽管我确实发表了评论。自己无法抗拒这一点。使用 jQuery：

<input type="text" id="txt" value="A very long text goes here very long text goes here very long text goes here very long text goes here very long text goes here indeed."></input>

$('#txt').hover(

    function() {
        $(this).animate({"scrollLeft": this.scrollWidth}, this.value.length*50)
    },

    function() {
        $(this).stop();
        this.scrollLeft = 0;
    }
)

这里 jQuery.animate()用于为.scrollLeft输入字段中的文本位置设置动画。动画持续时间与文本长度相关，因此各种文本的速度应该相同。当鼠标离开输入控制 - 滚动位置重置为原始位置。

演示：http: //jsfiddle.net/uPGmC/

如果你用谷歌搜索“输入文本向左滚动”，你会找到这样的答案，将它与悬停和动画的 jQuery 文档结合起来，你可以自己拼凑解决方案。