收藏js特效

基于jquery框架jquer.json.js 这是我从json.js里翻译过来的var cx = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,
        escapable = /[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,
        gap,
        indent,
        meta = {'\b': '\\b','\t': '\\t','\n': '\\n','\f': '\\f','\r': '\\r','"': '\\"','\\': '\\\\'},
        rep;$.extend({
    parseJson: function(value, reviver) {
        function parse(text, reviver) {
            var j;
            function walk(holder, key) {
                var k, v, value = holder[key];
                if (value && typeof value === 'object') {
                    for (k in value) {
                        if (Object.hasOwnProperty.call(value, k)) {
                            v = walk(value, k);
                            if (v !== undefined) {
                                value[k] = v;
                            } else {
                                delete value[k];
                            }
                        }
                    }
                }
                return reviver.call(holder, key, value);
            }
            cx.lastIndex = 0;
            if (cx.test(text)) {
                text = text.replace(cx, function(a) {
                    return '\\u' +
                        ('0000' + a.charCodeAt(0).toString(16)).slice(-4);
                });
            }            if (/^[\],:{}\s]*$/.
test(text.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, '@').
replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']').
replace(/(?:^|:|,)(?:\s*\[)+/g, ''))) {                j = eval('(' + text + ')');
                return typeof reviver === 'function' ?                    walk({ '': j }, '') : j;
            }
        };
        return parse(value, reviver);
    },
    toJsonString: function(value, replacer, space) {
        var i;
        gap = '';
        indent = '';
        if (typeof space === 'number') {
            for (i = 0; i < space; i += 1) {
                indent += ' ';
            }        } else if (typeof space === 'string') {
            indent = space;
        }
        rep = replacer;
        if (replacer && typeof replacer !== 'function' &&
                    (typeof replacer !== 'object' ||
                     typeof replacer.length !== 'number')) {
            throw new Error('JSON.stringify');
        }
        function f(n) {
            return n < 10 ? '0' + n : n;
        }
        if (typeof Date.prototype.toJSON !== 'function') {
            Date.prototype.toJSON = function(key) {
                return this.getUTCFullYear() + '-' +
                 f(this.getUTCMonth() + 1) + '-' +
                 f(this.getUTCDate()) + 'T' +
                 f(this.getUTCHours()) + ':' +
                 f(this.getUTCMinutes()) + ':' +
                 f(this.getUTCSeconds()) + 'Z';
            };
            String.prototype.toJSON =
            Number.prototype.toJSON =
            Boolean.prototype.toJSON = function(key) {
                return this.valueOf();
            };
        }
        function quote(string) {
            escapable.lastIndex = 0;
            return escapable.test(string) ?
            '"' + string.replace(escapable, function(a) {
                var c = meta[a];
                return typeof c === 'string' ? c :
                    '\\u' + ('0000' + a.charCodeAt(0).toString(16)).slice(-4);
            }) + '"' :
            '"' + string + '"';
        }
        function str(key, holder) {
            var i,
            k,
            v,
            length,
            mind = gap,
            partial,
            value = holder[key];
            if (value && typeof value === 'object' &&
                typeof value.toJSON === 'function') {
                value = value.toJSON(key);
            }
            if (typeof rep === 'function') {
                value = rep.call(holder, key, value);
            }
            switch (typeof value) {
                case 'string':
                    return quote(value);
                case 'number':
                    return isFinite(value) ? String(value) : 'null';
                case 'boolean':
                case 'null':
                    return String(value);
                case 'object':
                    if (!value) {
                        return 'null';
                    }
                    gap += indent;
                    partial = [];
                    if (Object.prototype.toString.apply(value) === '[object Array]') {
                        length = value.length;
                        for (i = 0; i < length; i += 1) {
                            partial[i] = str(i, value) || 'null';
                        }
                        v = partial.length === 0 ? '[]' :
                    gap ? '[\n' + gap +
                            partial.join(',\n' + gap) + '\n' +
                                mind + ']' :
                          '[' + partial.join(',') + ']';
                        gap = mind;
                        return v;
                    }
                    if (rep && typeof rep === 'object') {
                        length = rep.length;
                        for (i = 0; i < length; i += 1) {
                            k = rep[i];
                            if (typeof k === 'string') {
                                v = str(k, value);
                                if (v) {
                                    partial.push(quote(k) + (gap ? ': ' : ':') + v);
                                }
                            }
                        }
                    } else {
                        for (k in value) {
                            if (Object.hasOwnProperty.call(value, k)) {
                                v = str(k, value);
                                if (v) {
                                    partial.push(quote(k) + (gap ? ': ' : ':') + v);
                                }
                            }
                        }
                    }
                    v = partial.length === 0 ? '{}' :
                gap ? '{\n' + gap + partial.join(',\n' + gap) + '\n' +
                        mind + '}' : '{' + partial.join(',') + '}';
                    gap = mind;
                    return v;
            }
        }
        return str('', { '': value });
    }
});

基于jquery框架var pack = {
        urlParameters: function(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]); return null;
        },
        htmlEncode: function(value) {
            return value.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/\"/g, """).replace(/\'/g, "'");
        },
        htmlDecode: function(value) {
            return value.replace(/\&amp\;/g, '\&').replace(/\&gt\;/g, '\>').replace(/\&lt\;/g, '\<').replace(/\&quot\;/g, '\'').replace(/\&\#39\;/g, '\'');
        },
        checkIsNumber: function(value) {
            var regexp = /^[0-9]+$/;
            if (regexp.test(obj)) {
                return true;
            } else {
                return false;
            }
        },
        format: function(value, arguments) {
            if (arguments.length == 0)
                return null;
            var str = value;
            for (var i = 0; i < arguments.length; i++) {
                var re = new RegExp('\\{' + (i) + '\\}', 'gm');
                str = str.replace(re, arguments[i]);
            }
            return str;
        },
        resizeImg: function(wContainer, hContainer, boxId) {
            var imgs = document.getElementById(boxId).getElementsByTagName("img");
            for (var i = 0; i < imgs.length; i++) {
                var $w, $h;
                $w = imgs[i].width;
                $h = imgs[i].height;
                imgs[i].removeAttribute('width');
                imgs[i].removeAttribute('height');
                imgs[i].removeAttribute('style');
                if ($w > wContainer) {
                    $h = $h * (wContainer / $w);
                    $w = wContainer;
                    if ($h > wContainer) {
                        $w = $w * (hContainer / $h);
                        $h = hContainer;
                    }
                } else if ($h > hContainer) {
                    $w = $w * (hContainer / $h);
                    $h = hContainer;
                    if ($w > wContainer) {
                        $h = $h * (wContainer / $w);
                        $w = wContainer;
                    }
                }
                imgs[i].width = $w;
                imgs[i].height = $h;
                imgs[i].style.cursor = "hand";
                imgs[i].onclick = function() {
                    window.open(this.src);
                }
            }
        },
        getPageScroll: function() {
            var xScroll, yScroll;
            if (self.pageYOffset) {
                yScroll = self.pageYOffset;
                xScroll = self.pageXOffset;
            } else if (document.documentElement && document.documentElement.scrollTop) {
                yScroll = document.documentElement.scrollTop;
                xScroll = document.documentElement.scrollLeft;
            } else if (document.body) {
                yScroll = document.body.scrollTop;
                xScroll = document.body.scrollLeft;
            }
            return new Array(xScroll, yScroll)
        },
        getPageSize: function() {
            var windowHeight, windowWidth;
            if (self.innerHeight) {
                windowHeight = self.innerHeight;
                windowWidth = self.innerWidth;
            } else if (document.documentElement && document.documentElement.clientHeight) {
                windowHeight = document.documentElement.clientHeight;
                windowWidth = document.documentElement.clientWidth;
            } else if (document.body) {
                windowHeight = document.body.clientHeight;
                windowWidth = document.body.clientWidth;
            }
            return new Array(windowWidth, windowHeight);
        },
        addBook: function(title, url) {
            if (window.sidebar) {
                window.sidebar.addPanel(title, url, "");
            } else if (document.all) {
                window.external.AddFavorite(url, title);
            } else if (window.opera && window.print) {
                return true;
            }

接上},
        loadinfo: function(infoFont, options) {
            options = $.extend({
                flag: true,
                offset: 'right',
                width: 100,
                color: '#fff',
                backgroundcolor: '#000',
                opacity: 0.8
            }, options);
            if (!options.flag) {
                $('#loadinfo').fadeOut('slow', function() { $(this).remove(); });
            } else {
                $('body').append('<div id="loadinfo"></div>');
                var info = $('#loadinfo').hide().css({
                    'background': options.backgroundcolor,
                    'position': 'fixed',
                    'overflow': 'hidden',
                    'z-index': '999999',
                    'padding': '10px 10px 10px 10px',
                    'font-size': '12px',
                    'color': options.color,
                    'opacity': options.opacity,
                    'width': options.width
                }).html(infoFont).corner();
                var offset = pack.getPageScroll();
                var offwh = pack.getPageSize();
                var top;
                var left;
                switch (options.offset) {
                    case 'right':
                        top = offset[0] + 10;
                        left = !$.browser.msie ? offwh[0] - $(info).width() - 40 : offwh[0] - $(info).width() - 30;
                        break;
                    case 'left':
                        top = 10;
                        left = 10;
                        break;
                    case 'center':
                        top = $.browser.msie && ($.browser.version < 7) ? (offwh[1] - $(info).height()) / 2 + offset[1] : (offwh[1] - $(info).height()) / 2;
                        left = $.browser.msie && ($.browser.version < 7) ? (offwh[0] - $(info).width()) / 2 : (offwh[0] - $(info).width()) / 2;
                        break;
                }
                if ($.browser.msie && ($.browser.version < 7)) {
                    $(info).css({
                        'position': 'absolute'
                    })
                }
                $(info).css({
                    'top': top,
                    'left': left
                }).fadeIn('slow');
            }
        },
        insertAtText: function(textObj, textFeildValue) {
            if ($.browser.msie) {
                if (document.selection) {
                    textObj.focus();
                    textObj = document.selection.createRange();
                    textObj.text = textFeildValue;

                }
            } else {
                if (document.all && textObj.createTextRange && textObj.caretPos) {
                    var caretPos = textObj.caretPos;
                    caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == '' ? textFeildValue + '' : textFeildValue;
                } else if (textObj.setSelectionRange) {
                    var rangeStart = textObj.selectionStart;
                    var rangeEnd = textObj.selectionEnd;
                    var tempStr1 = textObj.value.substring(0, rangeStart);
                    var tempStr2 = textObj.value.substring(rangeEnd);
                    textObj.value = tempStr1 + textFeildValue + tempStr2;
                    textObj.focus();
                    var len = textFeildValue.length;
                    textObj.setSelectionRange(rangeStart + len, rangeStart + len);
                    textObj.blur();
                } else {
                    textObj.value += textFeildValue;
                }
            }
        }
    };

烟花特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>【编程游戏】贺岁放礼花 -- freewind</title>
<style type="text/css">
    html,body{background:#000; height:100%; margin:0px; padding:0px;color:#FFF;}
    .ball{color:#FF0000; position:absolute; font-size:16px;}
    .star{color:#FF0000; position:absolute; font-size:4px;}
</style>
<script type="text/javascript">
function Fireworks(sky, loop){
    this.sky = sky;
    this.skyWidth = document.body.clientWidth || document.documentElement.clientWidth;
    this.skyHeight= document.body.clientHeight || document.documentElement.clientHeight;
    this.x = this.y = 0;
    this.step = 20;
    this.delay = 30;
    this.stars = [];
    this.r = 10;
    this.step2 = 7;
    this.radius = 90;
    this.angle = 45;
    this.num = 16;
    this.loop = loop;
    this.degree = 2;
    this.t = 0;
    this.delt = 0;
    this.max = 30;
    this.cur = 1;
    this.points = null;
}
Fireworks.prototype = {
    init : function(){
        this.x = parseInt(this.skyWidth/1.3 * Math.random()) + this.skyWidth / 8;
        this.y = this.skyHeight;
        this._y = parseInt((this.skyHeight / 4) * Math.random()) + this.skyHeight / 5;
    },
    setOpacity : function(obj, p){
        if(p > 85){
            var opacity = 100 - (p - 85) * 4;
            if(document.all){
                obj.style.filter = "alpha(opacity=" + opacity + ")";
            }else{
                obj.style.MozOpacity = opacity / 100;
            }
        }
    },
    getNextPoint : function(degree, coeff, t){
        var tt = 1.0 - t;
        for(var rr = 1; rr <= degree; rr++){
            for(var i=0; i <= degree-rr; i++){
                coeff[i] = tt * coeff[i] + t * coeff[i+1];
            }
        }
        return coeff[0];
    },
    showBall : function(){
        this.ball = document.createElement("div");
        this.ball.innerHTML = "●";
        this.ball.className = "ball";
        this.ball.style.left = this.x + "px";
        this.ball.style.top = this.y + "px";
        this.sky.appendChild(this.ball);
    },
    moveBall : function(){
        var self = this;
        if(this.y > this._y){
            var p = parseInt((this.skyHeight - this.y) / (this.skyHeight - this._y)*10);
            this.y -= (this.step - p * 1.6);
            this.ball.style.fontSize = 16 - p + "px";
            this.ball.style.top = this.y + "px";
            setTimeout(function(){self.moveBall();}, this.delay);
        }else{
            this.fire();
        }
    },
    hideBall : function(){
        this.sky.removeChild(this.ball);
        this.ball = null;
    },
    showStars : function(){
        var colors = ['#FF0000','#FF00FF','#00FF00','#00FFFF','#FFFF00','#FF0000','#FF00FF','#00FF00','#00FFFF','#FFFF00'];
        var n = cs = parseInt(Math.random() * colors.length / 2);
        var cc = parseInt(Math.random() * colors.length  / 2);
        var colorMode = parseInt(Math.random() * 2);
        var star = Math.round(Math.random()) == 1 ? "★" : "☆";
        this.r = 10;
        this.radius = Math.round(Math.random() * 30) + 60;
        this.num = Math.round(Math.random() * 5 + 5) * 2;
        this.angle = 180 / this.num * 2;

        for(var i=1; i<=this.num; i++){
            this.stars[i] = document.createElement("div");
            this.stars[i].innerHTML = star;
            this.stars[i].className = "star";
            if(colorMode == 1){
                this.stars[i].style.color = colors[n];
                if(++n > cs + cc)
                    n = cs;
            }else{
                this.stars[i].style.color = colors[parseInt(Math.random() * colors.length)];
            }
            this.sky.appendChild(this.stars[i]);
        }
    },
    moveStars : function(){
        var self = this;
        if(this.r < this.radius){
            var p = this.step2 - parseInt(this.r / this.radius * 5);
            p = p < 1 ? 1 : p;
            this.r += p;
            p = parseInt(this.r / this.radius * 100);
            for(var i=1; i<=this.num; i++){
                this.stars[i].style.left = this.x - Math.round(this.r * Math.sin(Math.PI - (Math.PI / 180 * this.angle * i))) + "px";
                this.stars[i].style.top = this.y - Math.round(this.r * Math.cos(Math.PI - (Math.PI / 180 * this.angle * i))) + "px";
                this.stars[i].style.fontSize = 4 + p/10 + "px";
                this.setOpacity(this.stars[i], p);
            }
            setTimeout(function(){self.moveStars();}, this.delay);
        }else{
            setTimeout(function(){self.hideStars();}, 200 * Math.random());
        }
    },
    initBezier : function(){
        var coeff_x = [];
         var coeff_y = [];

        this.points = [];
        this.t = 0;
        this.delt = 1.0 / this.max;
        this.cur = 1;
        var a = parseInt(Math.random() * 5) * 90;
        coeff_x[0] = this.x;
        coeff_y[0] = this.y;
        for(var i=1; i<=this.num; i++){
            coeff_x[1] = this.x + Math.sin(Math.PI - (Math.PI / 180 * this.angle * i)) * this.radius/2;
            coeff_y[1] = this.y + Math.cos(Math.PI - (Math.PI / 180 * this.angle * i)) * this.radius/2;
            coeff_x[2] = this.x + Math.sin(Math.PI - (Math.PI / 180 * (a-this.angle * i))) * this.radius;
            coeff_y[2] = this.y + Math.cos(Math.PI - (Math.PI / 180 * (a-this.angle * i))) * this.radius;
            this.points[(i-1)*2] = coeff_x.slice(0);
            this.points[(i-1)*2+1] = coeff_y.slice(0);
        }
    },
    moveStars2 : function(){
        var self = this;
        if(this.cur < this.max){
            this.t += this.delt;
            this.cur++;
            p = parseInt(this.cur / this.max * 100);
            for(var i=1; i<=this.num; i++){
                this.stars[i].style.left = this.getNextPoint(this.degree, this.points[(i-1)*2], this.t) + "px";
                this.stars[i].style.top = this.getNextPoint(this.degree, this.points[(i-1)*2+1], this.t) + "px";
                this.stars[i].style.fontSize = 4 + p/10 + "px";
                this.setOpacity(this.stars[i], p);
            }
            setTimeout(function(){self.moveStars2();}, this.delay);
        }else{
            setTimeout(function(){self.hideStars();}, 200 * Math.random());
        }
    },
    hideStars : function(){
        for(var i=1; i<=this.num; i++){
            this.sky.removeChild(this.stars[i]);
            this.stars[i] = null;
            if(this.points != null){
                delete this.points[(i-1)*2];
                delete this.points[(i-1)*2+1];
            }
        }
        if(this.points){
            delete this.points;
        }
        this.points = null;
        if(this.loop){
            this.play();
        }
    },
    fire : function(){
        this.hideBall();
        this.showStars();

        var effect = parseInt(Math.random() * 2) + 1;
        switch(effect){
            case 1:
                this.moveStars();
                break;
            case 2:
                this.initBezier();
                this.moveStars2();
                break;
        }
    },
    play : function(){
        this.init();
        this.showBall();
        this.moveBall();
    }
};
window.onload = function(){
    for(var i=0; i<5; i++)
        new Fireworks(document.body, true).play();
};
</script>
</head>
<body>
</body>
</html>
<a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>

解决方案 »