使用精灵图和JS实现拟人化移动应用下载提示图标

使用JS操作元素CSS样式的背景位置，从而实现动漫效果。

js，二次元

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2734
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

Animator = function(d) {
    function c(a) {
        this.frameTimer = null;
        this.framePos = 0;
        this.reverse = !1;
        a = this.options = d.extend({
            element: "",
            frameSource: "",
            frameWidth: 16,
            frameHeight: 16,
            totalFrame: 0,
            fps: 16,
            frameTimer: null,
            animationList: {},
            orientationLandscape: !0
        }, a);
        if (!a.element) {
            return !1
        }
        a.element.css({
            display: "block",
            backgroundImage: "url(" + a.frameSource + ")",
            width: a.frameWidth,
            height: a.frameHeight,
            backgroundPosition: "0px 0px"
        })
    }
    c.prototype.loadAnimation = function(f) {
        var e = this.options;
        if (e.animationList && e.animationList[f]) {
            this.move(e.animationList[f].endFrame, e.animationList[f].loopFrame)
        } else {
            return !1
        }
    };
    c.prototype.move = function(h, g) {
        var j = this,
            i = this.options;
        clearInterval(j.frameTimer);
        this.reverse = !1;
        j.frameTimer = setInterval(function() {
            j._animate(h, g)
        }, 1000 / i.fps)
    };
    c.prototype._animate = function(f, e) {
        if ("undefined" !== typeof e) {
            e = parseInt(e - 1) >> 0, this.framePos == f ? (this.framePos > e ? this.framePos-- : this.framePos++, this.framePos = e) : this.reverse ? this.framePos == e ? (this.reverse = !1, this.framePos > f ? this.framePos-- : this.framePos++) : this.framePos > e ? this.framePos-- : this.framePos++ : this.framePos > f ? this.framePos-- : this.framePos++
        } else {
            if (this.framePos == f) {
                return clearInterval(this.frameTimer), !0
            }
            this.framePos > f ? this.framePos-- : this.framePos++
        }
        this._setPosition(this.framePos)
    };
    c.prototype._setPosition = function(h, g) {
        var j = this.options;
        if (!j.element) {
            return !1
        }
        var i = h ? h : this.framePos;
        j.element.css("backgroundPosition", -(j.orientationLandscape ? j.frameWidth * i : 0) + "px " + -(j.orientationLandscape ? 0 : j.frameHeight * i) + "px")
    };
    c.prototype.start = function(b) {
        this.move(this.options.totalFrame - 1, b)
    };
    c.prototype.back = function(b) {
        this.move(0, b)
    };
    c.prototype.stop = function() {
        clearInterval(this.frameTimer)
    };
    return c
}(jQuery)

g = $(".nav");
var j = $('<div class="n-i n-i-mlink"><a href="#" target="_blank"><div class="mlink-dl-msg"></div><div class="n-i-mlink-bg"></div></a></div>').insertAfter(g),
    i = new Animator({
        element: j.find(".n-i-mlink-bg"),
        frameSource: "/uploads/160501/tv_animate.png",
        frameWidth: 80,
        frameHeight: 80,
        totalFrame: 16
    }),
    h;
j.mouseenter(function() {
    i.start(10);
    h = setTimeout(function() {
        j.find(".mlink-dl-msg").stop(!0, !0).fadeIn(200)
    }, 500)
}).mouseleave(function() {
    clearInterval(h);
    i.back();
    j.find(".mlink-dl-msg").stop(!0, !0).fadeOut(200)
})

编译

CSS

HTML

使用JS操作元素CSS样式的背景位置，从而实现动漫效果。

js，二次元

编辑器支持Emmet

快捷键

使用JS操作元素CSS样式的背景位置，从而实现动漫效果。

js，二次元

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：