当前位置：文江博客话题详情

jQuery 垂直气泡选框 HTML 元素

发布于 2024-10-02 10:50:27 字数 124 浏览 7 评论 0原文

我正在寻找一个好的垂直气泡选框插件。

不是简单的垂直选取框，我正在寻找一个好的“类似闪光”的效果插件，它可以使元素选取框从 div 内容的底部到顶部平滑。

可能真的很好，但我认为这个插件只是在我的梦想中

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

狼性发作 2024-10-09 10:50:27

嗯，它的效率不是很高，但我认为这是一个好的开始：

jQuery.fn.verticalMarquee = function(vertSpeed, horiSpeed) {
    this.css('float', 'left');

    vertSpeed = vertSpeed || 1;
    horiSpeed = 1/horiSpeed || 1;

    var windowH = this.parent().height(),
        thisH = this.height(),
        parentW = (this.parent().width() - this.width()) / 2,
        rand = Math.random() * 1000,
        current = this;

    this.css('margin-top', windowH + thisH);
    this.parent().css('overflow', 'hidden');

    setInterval(function() {
        current.css({
            marginTop: function(n, v) {
                return parseFloat(v) - vertSpeed;
            },
            marginLeft: function(n, v) {
                return (Math.sin(new Date().getTime() / (horiSpeed * 1000) + rand) + 1) * parentW;
            }
        });
    }, 15);

    setInterval(function() {
        if (parseFloat(current.css('margin-top')) < -thisH) {
            current.css('margin-top', windowH + thisH);
        }
    }, 250);
};

$('.message').verticalMarquee(0.5, 1);

它使用 Math.sin 水平移动元素。函数verticalMarquee接受两个参数，一个用于垂直速度，另一个用于水平速度。该函数只能在仅包含一个元素的 jQuery 对象上调用 - 在测试过程中，任何超过一个元素同时进行动画处理都会导致严重的滞后。

在这里查看一个简单的演示：http://jsfiddle.net/CcccQ/2/

Well, it's not terribly efficient, but this is a good start I think:

jQuery.fn.verticalMarquee = function(vertSpeed, horiSpeed) {
    this.css('float', 'left');

    vertSpeed = vertSpeed || 1;
    horiSpeed = 1/horiSpeed || 1;

    var windowH = this.parent().height(),
        thisH = this.height(),
        parentW = (this.parent().width() - this.width()) / 2,
        rand = Math.random() * 1000,
        current = this;

    this.css('margin-top', windowH + thisH);
    this.parent().css('overflow', 'hidden');

    setInterval(function() {
        current.css({
            marginTop: function(n, v) {
                return parseFloat(v) - vertSpeed;
            },
            marginLeft: function(n, v) {
                return (Math.sin(new Date().getTime() / (horiSpeed * 1000) + rand) + 1) * parentW;
            }
        });
    }, 15);

    setInterval(function() {
        if (parseFloat(current.css('margin-top')) < -thisH) {
            current.css('margin-top', windowH + thisH);
        }
    }, 250);
};

$('.message').verticalMarquee(0.5, 1);

It uses Math.sin to move the element horizontally. The function verticalMarquee accepts two arguments, one for vertical speed and the other for horizontal speed. The function can only be called on jQuery objects that contains only one element - during testing anything more than one element been animated at once caused terrible amount of lagging.

See a simple demo here: http://jsfiddle.net/CcccQ/2/

回复收藏 0 原文