QQ抖动效果

所属分类：其他-动画效果

33864 346 查看评论 (3)

分享到微信朋友圈

查看演示立即下载

插件描述：仿QQ抖动效果代码，兼容主流浏览器

使用步骤

head区域引用样式表

<link rel="stylesheet" type="text/css" href="css/style.css">

引入JS文件

<script type="text/javascript" src="js/js.js"></script>

在BODY区域加入图片代码

<div id="bk"><img src="images/qq.png" width="543"></div>

jQuery时钟插件

HEXAFLIP：灵活的3D魔方插件

购物车商品飞入动画

使用css规则简单实现商品飞入效果

动画效果

21023 262

HTML5 Canvas下雪效果插件

飘雪效果，可设置控制数量

动画效果

44408 353

canvas 雨滴

这款动画主要是模拟了下雨的场景，雨滴从空中飘落，落在地上溅起水花，整个过程模拟得相当逼真。更重要的是，这款HTML5下雨动画还可以通过鼠标控制风向和雨水强度，鼠标左右滑动控制雨滴方向，鼠标上下滑动控制雨滴密度。

动画效果

28044 415

导航水波纹点击效果外加滑动效果

动画效果

34027 421

讨论这个项目（3）回答他人问题或分享插件使用方法奖励jQ币评论用户自律公约

对方正在输入... 0

2021/8/30 18:21:40

看我压缩后的JS代码：

function jqShake(elm) {
    var $elm = $(elm);
    if (!$elm.length)
        return;
    var obj = $elm[0],
        left = obj.offsetLeft,
        top = obj.offsetTop;
    obj.style.left = obj.offsetLeft + 'px';
    obj.style.top = obj.offsetTop + 'px';
    obj.style.position = 'absolute';
    obj.style.margin = 0;
    var click = function() {
        var cn = parseInt($elm.attr('data-shake-cn') || 30);
        if (cn < 2) {
            obj.style.left = left + 'px';
            obj.style.top = top + 'px';
            $elm.attr('data-shake-cn', 30);
            return console.log('cn end...');
        }
        obj.style.left = left + ((cn % 2) > 0 ? -2 : 2) + 'px';
        obj.style.top = top + ((cn % 2) > 0 ? -2 : 2) + 'px';
        $elm.attr('data-shake-cn', --cn);
        setTimeout(click, 30);
    }
    obj.onclick = click;
}


window.onload = function() {
    jqShake('#bk');
}