jQuery使网页的背景颜色渐变

2017 年 07 月 24 日

5916 次浏览

6769字数

正文

今天在折腾网页背景的时候，把整个网站都给弄成透明的了，这样一来就可以弄一个动态的背景，我首先想到了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);