jQuery 效果插件

发布于 2024-09-13 03:02:42 字数 186 浏览 3 评论 0原文

我正在寻找一个 jQuery 插件,它可以像 http://www.iconatlas.com/

我检查了他们的来源,他们使用 jQuery,但看起来他们并没有使用插件来做到这一点。有人知道有类似功能的插件吗?

I'm looking for a jQuery plugin that wobbles DOM elements like on http://www.iconatlas.com/

I checked their source and they use jQuery but it doesn't look like they're using a plugin to do that. Anyone know of a plugin that does something similar?

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

扫码二维码加入Web技术交流群

发布评论

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

评论(1

千と千尋 2024-09-20 03:02:42

我不知道有什么插件,但如果你愿意,你可以创建一个。

好吧,该网站使用这个(下面的)jQuery 代码来实现这一点。

$(function(){
    var start_time = new Date().getTime();
    var wobble_sec = 4;
    var icons = $("#featured img");
    var bobble = setInterval(function (){
        var sec = ((new Date().getTime()) - start_time)*0.001;
        var alpha = sec*2*Math.PI;

        var wobble_alpha = alpha/wobble_sec;
        var lambda = (0.5 + Math.cos(Math.min(Math.PI,wobble_alpha))*0.5)*50;

        for (var i=0;i<icons.length;++i){

            var y = Math.round(lambda*(Math.cos(alpha*1.2 + i)*0.5) + 30);
            icons.eq(i).css("top",y+"px");
        }

        if (wobble_alpha > Math.PI){
            clearTimeout(bobble);

        }
    },30);
});

去玩演示

I don't know any plugin about that, but you can create one if you want.

Well, the site use this(below) jQuery code for that.

$(function(){
    var start_time = new Date().getTime();
    var wobble_sec = 4;
    var icons = $("#featured img");
    var bobble = setInterval(function (){
        var sec = ((new Date().getTime()) - start_time)*0.001;
        var alpha = sec*2*Math.PI;

        var wobble_alpha = alpha/wobble_sec;
        var lambda = (0.5 + Math.cos(Math.min(Math.PI,wobble_alpha))*0.5)*50;

        for (var i=0;i<icons.length;++i){

            var y = Math.round(lambda*(Math.cos(alpha*1.2 + i)*0.5) + 30);
            icons.eq(i).css("top",y+"px");
        }

        if (wobble_alpha > Math.PI){
            clearTimeout(bobble);

        }
    },30);
});

go play with the demo.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文