jQuery 使网页的背景颜色渐变

一纸忘忧

2017 年 07 月 24 日

6363 次浏览

暂无评论

7433字数

Web 前端

今天在折腾网页背景的时候，把整个网站都弄成透明的了，这样一来就可以弄一个动态的背景。我首先想到了 CSS + jQuery，可是瞎搞了许久才发现没法和知更鸟主题兼容，两者必须舍弃一个，我自然是放弃了背景。

然后想了下，还是把做好的背景发出来给小伙伴们参考参考吧。

HTML 代码

<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script src="gradientify.js"></script>
<link rel="stylesheet" href="main.css">
<script>
    $(document).ready(function() {
        $("body").gradientify({
            gradients: [
                { start: [49, 76, 172], stop: [242, 159, 191] },
                { start: [33, 229, 241], stop: [235, 236, 117] }
            ]
        });
    });
</script>

CSS 代码

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body { color: #ffffff; font: 18px/1.5 'Ubuntu', sans-serif; }
h1 { margin-top: 0; margin-bottom: 0.5em; }
p { margin-top: 0; margin-bottom: 2em; }
h1 { font-size: 60px; font-weight: bold; }
#wrapper { position: absolute; top: 50%; left: 50%; margin-top: -130px; margin-left: -300px; height: 260px; width: 600px; text-align: center; }

jQuery 代码

;window.Modernizr = function(a, b, c) {
    function u(a) { i.cssText = a; }
    function v(a, b) { return u(l.join(a + ";") + (b || "")); }
    function w(a, b) { return typeof a === b; }
    function x(a, b) { return !!~("" + a).indexOf(b); }
    function y(a, b, d) {
        for (var e in a) {
            var f = b[a[e]];
            if (f !== c) return d === !1 ? a[e] : w(f, "function") ? f.bind(d || b) : f;
        }
        return !1;
    }

    var d = "2.8.3", e = {}, f = b.documentElement, g = "modernizr", h = b.createElement(g), i = h.style, j, k = {}.toString, l = " -webkit- -moz- -o- -ms- ".split(" "), m = {}, n = {}, o = {}, p = [], q = p.slice, r, s = {}.hasOwnProperty, t;
    !w(s, "undefined") && !w(s.call, "undefined") ? t = function(a, b) { return s.call(a, b); } : t = function(a, b) { return b in a && w(a.constructor.prototype[b], "undefined"); };

    Function.prototype.bind || (Function.prototype.bind = function(b) {
        var c = this;
        if (typeof c != "function") throw new TypeError;
        var d = q.call(arguments, 1), e = function() {
            if (this instanceof e) {
                var a = function() {};
                a.prototype = c.prototype;
                var f = new a, g = c.apply(f, d.concat(q.call(arguments)));
                return Object(g) === g ? g : f;
            }
            return c.apply(b, d.concat(q.call(arguments)));
        };
        return e;
    });

    m.cssgradients = function() {
        var a = "background-image:", b = "gradient(linear,left top,right bottom,from(#9f9),to(white));", c = "linear-gradient(left top,#9f9, white);";
        return u((a + "-webkit- ".split(" ").join(b + a) + l.join(c + a)).slice(0, -a.length)), x(i.backgroundImage, "gradient");
    };

    for (var z in m) t(m, z) && (r = z.toLowerCase(), e[r] = m[z](), p.push((e[r] ? "" : "no-") + r));
    return e.addTest = function(a, b) {
        if (typeof a == "object") for (var d in a) t(a, d) && e.addTest(d, a[d]);
        else {
            a = a.toLowerCase();
            if (e[a] !== c) return e;
            b = typeof b == "function" ? b() : b;
            typeof enableClasses != "undefined" && enableClasses && (f.className += " " + (b ? "" : "no-") + a);
            e[a] = b;
        }
        return e;
    }, u(""), h = j = null, e._version = d, e._prefixes = l, e;
}(this, this.document);

(function($, window, document, undefined) {
    'use strict';
    var pluginName = 'gradientify', defaults = {
        angle: '0deg', fps: 60, gradients: {}, transition_time: 8
    };
    
    function Plugin(element, options) {
        this.element = element;
        this.settings = $.extend({}, defaults, options);
        this._defaults = defaults;
        this._name = pluginName;
        this.init();
    }

    $.extend(Plugin.prototype, {
        init: function() {
            if (!Modernizr.cssgradients) return;
            this.currentIndex = 0;
            this.nextIndex = 1;
            this.steps_count = 0;
            this.steps_total = Math.round(this.settings.transition_time * this.settings.fps);
            this.rgb_steps = { start: [0, 0, 0], stop: [0, 0, 0] };
            this.rgb_values = { start: [0, 0, 0], stop: [0, 0, 0] };
            this.prefixes = ['-webkit-', '-moz-', '-o-', '-ms-', ''];
            this.color1 = null;
            this.color2 = null;
            this.calculateSteps();
            setInterval(function() {
                this.updateGradient.apply(this);
            }.bind(this), Math.round(10 / this.settings.fps));
        },

        setNext: function(num) {
            return (num + 1 < this.settings.gradients.length) ? num + 1 : 0;
        },

        calculateStepSize: function(a, b) {
            return (a - b) / this.steps_total;
        },

        calculateSteps: function() {
            for (var key in this.rgb_values) {
                if (this.rgb_values.hasOwnProperty(key)) {
                    for (var i = 0; i < 3; i++) {
                        this.rgb_values[key][i] = this.settings.gradients[this.currentIndex][key][i];
                        this.rgb_steps[key][i] = this.calculateStepSize(this.settings.gradients[this.nextIndex][key][i], this.rgb_values[key][i]);
                    }
                }
            }
        },

        updateGradient: function() {
            var i;
            for (var key in this.rgb_values) {
                if (this.rgb_values.hasOwnProperty(key)) {
                    for (i = 0; i < 3; i++) {
                        this.rgb_values[key][i] += this.rgb_steps[key][i];
                    }
                }
            }

            var t_color1 = 'rgb(' + (this.rgb_values.start[0] | 0) + ',' + (this.rgb_values.start[1] | 0) + ',' + (this.rgb_values.start[2] | 0) + ')';
            var t_color2 = 'rgb(' + (this.rgb_values.stop[0] | 0) + ',' + (this.rgb_values.stop[1] | 0) + ',' + (this.rgb_values.stop[2] | 0) + ')';
            
            if (t_color1 !== this.color1 || t_color2 !== this.color2) {
                this.color1 = t_color1;
                this.color2 = t_color2;
                $(this.element).css('background-image', '-webkit-gradient(linear, left bottom, right top, from(' + this.color1 + '), to(' + this.color2 + '))');
                for (i = 0; i < 4; i++) {
                    $(this.element).css('background-image', this.prefixes[i] + 'linear-gradient(' + this.settings.angle + ', ' + this.color1 + ', ' + this.color2 + ')');
                }
            }

            this.steps_count++;
            if (this.steps_count > this.steps_total) {
                this.steps_count = 0;
                this.currentIndex = this.setNext(this.currentIndex);
                this.nextIndex = this.setNext(this.nextIndex);
                this.calculateSteps();
            }
        }
    });

    $.fn[pluginName] = function(options) {
        return this.each(function() {
            if (!$.data(this, 'plugin_' + pluginName)) {
                $.data(this, '

plugin_' + pluginName, new Plugin(this, options));
            }
        });
    };
})(jQuery, window, document);