Question

我看过一个jquery插件，当你将鼠标移到它上面时，它能够水平地“扩展”<pre>元素。

但我不记得它的名字或在哪里找到它......

有人知道吗？

Answer 1

你可以在没有插件的情况下完成。

我还想在展开的预设置上设置overflow-x，以便仍然可以滚动查看比扩展尺寸更宽的行。我不喜欢较窄的滚动条，因此我将overflow设置为隐藏在CSS和mouseleave上。

$(function() {
    $('pre').mouseenter(function() {
        $(this).stop().animate({
            width: 400
        }, function() {
            $(this).css('overflow-x','auto');
        });
    }).mouseleave(function() {
        $(this).stop().animate({
            width: 200
        }, function() {
            $(this).css('overflow','hidden');
        });
    });
});

假设CSS如下：

pre {
    width: 200px;
    overflow: hidden;
}

甚至更好！使用figure和figcaption元素为每个代码清单提供方便的提示，如here所示。

最重要的是，您可以使用像ScrollTo这样的jQuery插件，以确保只要鼠标离开它，代码就会向左滚动。

Answer 2

您不需要插件。您可以使用animate()功能执行此操作。

$('div').bind({
    mouseover: function() {
        $(this).stop().animate({
            width: 300
        })
    },
    mouseout: function() {
        $(this).stop().animate({
            width: 100
        })
    }
})

检查http://jsfiddle.net/zgTw3/2/

处的工作示例

Answer 3

你正在寻找这个www.sohtanaka.com吗？

jQuery代码揭示

3 个答案:

检查http://jsfiddle.net/zgTw3/2/