在百度搜索"2012世界末日"所展现的地震效果的源代码

　　昨天在同学群里收到这样的信息：【重磅消息：只要在百度搜索"2012世界末日"，你的电脑显示器页面将会震动，出现地震山摇的状况，然后会有一张"船票"飘然而出 】。很想看看百度的前端工程师是怎么写出这个效果的。以前我研究过谷歌logo的代码，特别是昨天的拉链效果，虽然找到了源码，但是谷歌的页面里的代码都被压缩和混淆，加上谷歌自己的前端js框架代码混入其中实在难以看懂，抽百度的源码就想比较下百度和谷歌的前端技术，哈哈，百度还是简单多了，没有被压缩和混淆，可以作为学习的范本，好了不废话了，下面就是百度的地震效果源码。

　　首先看看我代码的目录层次图：

all.png：

 

url:http://s1.bdstatic.com/r/www/cache/2012cp/images/all.png

broken.png:

url:http://s1.bdstatic.com/r/www/cache/2012cp/images/broken.png

ticket.jpg:

url:http://s1.bdstatic.com/r/www/cache/2012cp/images/ticket.jpg

baiduquake.js源码如下：

View Code

void function(window, undefined){



    //var baseURL = "http://s1.bdstatic.com/r/www/cache/2012cp/images/";

    var baseURL = "images/";



    // var baseURL = "http://hot.baidu.com/savetheearth/img/";

    var nopUrl = "http://hot.baidu.com/savetheearth/savetheearth/?a=total&cb=getNOP";



    var targetNumber = 500000;

    var nowNumber = 0;

    var activityUrl = "http://hot.baidu.com/savetheearth"; 



    var doc = document;

    var de = doc.documentElement;

    var body = doc.body;

    var out = doc.getElementById("sharpxiajun");

    var swapDoms = [];



    var max = Math.max;

    var min = Math.min;

    var sqrt = Math.sqrt;

    var pow = Math.pow;

    var abs = Math.abs;

    var round = Math.round;



    var ua = navigator.userAgent;

    var ie = /msie/i.test(ua) && !document.addEventListener;

    var ie6 = /msie 6/i.test(ua);

    var cr = /chrome/i.test(ua);

    var sf = /safari/i.test(ua);

    var ff = /firefox/i.test(ua);

    var op = /opera/i.test(ua);



    var time = ie ? 16 : 30;

    var sframesNum = 40;



    window.getNOP = function(data){

        nowNumber = data.total;

    };



    var zIndexs = {

        background: 4000, 

        forceground: 5000,

        chasm: 6000,

        chip: 7000, 

        ticket: 8000,

        text: 9000 

    };



    var css = function(window, undefined){



        var cache = {};



        var getPms = function(index){

            return [].slice.apply(

                arguments.callee.caller.arguments, [index || 1]);

        };



        var decode = function(styles){

            var res = [], idx = 0;

            for(var n in styles)

                res[idx ++] = fullname(n) + ": " + value(styles[n]) + "; ";

            return res.join("");

        };



        var fullname = function(){

            var shorts = { pos: "position", w: "width", h: "height", l: "left", t: "top" };

              return function(name){

                return shorts[name] || name;

            }

        }();



        var value = function(value){

            return value - 0 === value ? value + "px" : value;

        };



        var join = function(objs){

            var res = [];

            for(var i = 0, l = objs.length, obj; i < l; i ++){

                obj = objs[i];

                if(/^=/.test(obj))

                    res[i] = loadRes(obj);

                else if(obj + "" === obj)

                    res[i] = obj;

                else

                    res[i] = decode(obj);

            }

            return res.join(";");

        };



        var saveRes = function(name){

            cache[name] = join(getPms(1));

        };



        var loadRes = function(name){

            return cache[name];

        };



        var replaceTag = function(tag){

               if(/^<(\w+)([^>]*)>$/.test(tag)){

                   var tag = RegExp.$1, atts = RegExp.$2;

                   return "<" + tag + atts + " style='" + join(getPms(1)) + "'></" + tag + ">";

               }

        };



        var dom = function(dom){

            dom.style.cssText += ";" + join(getPms(1));

        };



        return function(fst, sec){

            var fn;

            if(!fst){

                throw new Error();

            }else if(/^=/.test(fst)){

                if(sec === undefined)

                    fn = loadRes;

                else

                    fn = saveRes;

            }else if(/^<[^>]+>$/.test(fst)){

                fn = replaceTag;

            }else if(fst.nodeType && fst.nodeType != 3){

                fn = dom;

            }

            return fn.apply(this, arguments);

        }

    }(window);



    var style = function(dom, config){

        for(var name in config)

            dom.style[name] = config[name];

    }



    var makeDom = function(tag, parent, style, recycle){

        var dom = doc.createElement(tag || "div");

           style && css.apply(null, [dom].concat(style));

           parent && parent.appendChild(dom);

           recycle && recycle.push(dom);

           return dom;

    };



    var frame = function(fn, time, min){

        var start = new Date().getTime();

        var end = start + time;

        var pRate = 1 / (min || 5);

        var lastRate = 0;

        var endCb;

        var interval = setInterval(function(){

            var now = new Date().getTime();

            var rate = (now - start) / time;

            if(rate > lastRate + pRate)

                rate = lastRate + pRate;

            lastRate = rate;

            if(rate < 1)

                fn(rate);

            else{

                clearInterval(interval);

                fn(1);

                endCb && endCb();

            }

        }, 1);

        return {

            end: function(fn){



                endCb = fn;

            }

        }

    };



    var alpha = function(){

        return typeof document.body.style.opacity == "string" ?



        function (dom, n){

            dom.style.opacity = n;

        } :



        function(dom, n){

            var key = "alpha";

            n = n * 100 | 0;

            if(~ dom.style.filter.indexOf(key)){

                dom.filters.item(key).opacity = n;

            }else{

                dom.style.filter += " alpha(opacity=" + n + ")";

            }

        }

    }();



    var rotate = function(dom, ang, origin){

        var r = ang * Math.PI / 180;

        var cos = Math.cos(r);

        var sin = Math.sin(r);

        matrix(dom, cos, -sin, sin, cos, origin || "center center");

    };



    var matrix = function(){

        var originKey, transformKey;

        if(cr || sf){

            originKey = "-webkit-transform-origin";

            transformKey = "-webkit-transform";

        }else if(ff){

            originKey = "MozTransformOrigin";

            transformKey = "MozTransform";

        }else if(op){

            originKey = "OTransformOrigin";

            transformKey = "OTransform";

        }

        return ie ?

        function(dom, M11, M12, M21, M22, origin){

            // TODO: origin 鏈疄鐜�

            var key = "DXImageTransform.Microsoft.Matrix";

            var style = dom.style;

            if(~ style.filter.indexOf(key)){

                var matrix = dom.filters.item(key);

                matrix.M11 = M11, matrix.M12 = M12, matrix.M21 = M21, matrix.M22 = M22;

            }else{

                style.filter += " progid:" + key + "(M11=" + M11 + ", M12=" + M12 +", M21=" + M21 + ", M22=" + M22 + ", FilterType='bilinear', SizingMethod='auto expand')";

            }

        } :

        function(dom, M11, M12, M21, M22, origin){

            var conf = {};

            conf[originKey] = origin || "0 0";

            conf[transformKey] = "matrix(" + [M11, M21, M12, M22].join(",") + ",0,0)";

            style(dom, conf);

        }

    }();



    var removeDom = function(parent, tag){

        var els = parent.getElementsByTagName(tag);

        for(var i = els.length - 1; i >= 0; i --)

            els[i].parentNode.removeChild(els[i]);

    };



    var turnOverX = function(dom, w, h, x, y, dx){

        var dy = h / 2;

        var center, end;

        frame(function(rate){

            rate = exponential(rate, 0, 1, 1);

            var r = rate * Math.PI;

            var p = rate < .5 ? -1 : 1;

            var M12 = p * Math.sin(r) * dx / w;

            var M22 = -p * Math.cos(r);

            if(rate >= .5)

                center && center(), center = null;

            matrix(dom, 1, M12, 0, M22);

            M12 = ie ? Math.abs(M12) : M12;

            style(dom, { left: x - M12 * w / 4 + "px", top: y + dy * (1 - M22) + "px" });

        }, 1200, 24).end(function(){ end && end(); });

        var rt = {

            center: function(fn){ center = fn; return rt; },

            end: function(fn){ end = fn; return rt; }

        };

        return rt;

    };



    var addEvent = function(target, name, fn){

        var call = function(){

            fn.apply(target, arguments);

        };

        if(window.attachEvent){

            target.attachEvent("on" + name, call);

        }else if(window.addEventListener){

            target.addEventListener(name, call, false);

        }else{

            target["on" + name] = call;

        };

        return call;

    };



    var swapDom = function(el, other){

        var p1, p2, t;

        p1 = el.parentNode;

        p2 = other.parentNode;

        t = document.createTextNode("");



        p1.insertBefore(t, el);

        p2.insertBefore(el, other);

        p1.insertBefore(other, t);

        p1.removeChild(t);

    };



    css("=abs", "position: absolute;");

    css("=thide", "top: -5000px;");

    css("=hide", "overflow: hidden");

    css("=chip", "=abs", "=hide", "background: url(" + baseURL + "all.png) no-repeat 0 0; z-index: " + zIndexs.chip + ";");

    css("=broken1", "=abs", "=thide", "background: url(" + baseURL + "all.png) no-repeat 0 0; z-index: " + zIndexs.chasm + ";");

    css("=broken2", "=abs", "=thide", "=hide", "z-index: " + zIndexs.chasm + ";");

    css("=background", "=abs", "=thide", "=hide", "background: #050006 url(" + baseURL + "all.png) no-repeat 0 -462px; z-index: " + zIndexs.background + ";");

    css("=forceground", "=abs", "=thide", "=hide", "height: 355px; background-color: #fff; z-index: " + zIndexs.forceground + ";");

    css("=ticket-layer", "=abs", "=hide", "z-index: " + zIndexs.ticket + "; width: 602px; height: 258px; background: url(" + baseURL + "ticket.jpg) no-repeat 0 0;");

    css("=ticket-shadow", "=ticket-layer", "background: #000;");

    css("=loading", "=abs", "z-index: " + zIndexs.text + "; background: url(" + baseURL + "all.png) no-repeat -829px -521px; width: 300px; height: 20px;");

    css("=loading-bar", "=hide", "width: 0; height: 20px; background: url(" + baseURL + "all.png) no-repeat -829px -541px;");

    css("=text", "=abs", "color: #a3cb4c; font-size: 18px; font-weight: 700; width: 72px; height: 20px; text-align: center; z-index: " + zIndexs.text + ";");

    css("=join", "=abs", "width: 132px; height: 42px; background: url(" + baseURL + "all.png) no-repeat -687px -521px; z-index: " + zIndexs.text + ";");

    css("=close", "=abs", "width: 27px; height: 27px; background: url(" + baseURL + "all.png) no-repeat -650px -521px; z-index: " + zIndexs.text + ";");





    var earthquake = function(){

        var level = 1;

        var interval;

        var onQuake = function(){};



        var f = ie6 ? function(x, y){

            return { left: x + "px", top: y + "px" };

        } : function(x, y){

            return { marginLeft: x + "px", marginTop: y + "px" };

        };



        return {

            start: function(){

                interval = itv(function(){

                    var left = level * 2 - random(level * 4);

                    var top = level * 1 - random(level * 2);

                    style(out, f(left, top));

                    onQuake(left, top);

                });

            },

            stop: function(){

                clearInterval(interval);

                tout(function(){

                    style(out, f(0, 0));

                    onQuake(0, 0);

                }, 1);

                // resetOver();

            },

            setLevel: function(n){

                level = n;

            },

            onQuake: function(callback){

                onQuake = callback;

            }

        }

    }();





    var chip = function(){

        var chips = [ [28, 27, 0], [22, 27, 27], [16, 25, 54] ]; // width, height, top

        return {

            create: function(){

                var c = chips[random(chips.length)];

                var top = -50, left = random(body.clientWidth) - 40;

                var div = makeDom("div", body, ["=chip", { w: c[0], h: c[1], l: left, t: top, "background-position": "-612px -" + (c[2] + 521) + "px" }]);



                frame(function(rate){

                     div.style.top = quadratic(rate, top, 800, 1) + "px"; // 800 = 750 - (-50)

                }, 1e3).end(function(){

                    body.removeChild(div);

                });

            }

        }

    }();





    var forceground;

    var chasm = function(){

        var level = 0;

        var bg = baseURL + "all.png";

        var img2 = baseURL + "broken.png";

        var imgObj1, imgObj2;

        var background;



        var searchBoxWidth = 620; 

        var fixTop = -7;

        var fixLeft = 68;

        var frameWidth = 227;

        var frameHeight = 452;

        var framePics = 8;

        var elQueue = [];



        return {

            prepare: function(){

                var iw = min(frameWidth, de.clientWidth - searchBoxWidth);



                imgObj1 = makeDom("div", body, ["=broken1", { l: searchBoxWidth + "px", w: iw + "px", h: frameHeight + "px" }], elQueue);

                imgObj2 = makeDom("div", body, ["=broken2", { l: searchBoxWidth, w: iw, h: frameHeight }], elQueue);



                imgObj2.innerHTML = "<div style=\"width: " + (frameWidth * framePics) + "px; height: " + frameHeight + "px; " +

                    (ie6 ? "filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + img2 + "',sizingMethod='scale');" :

                    "background: url(" + img2 + ") right 0;")

                + "\">&nbsp;</div>";



                background = makeDom("div", body, ["=background", { l: searchBoxWidth + fixLeft + 15, w: max(body.clientWidth - searchBoxWidth - fixLeft - 15, 0), h: 80 }], elQueue);



                forceground = makeDom("div", body, ["=forceground", { l: searchBoxWidth + fixLeft, w: max(body.clientWidth - searchBoxWidth - fixLeft, 0) }], elQueue);



                var body2 = makeDom("div", forceground, [{ w: body.clientWidth, "z-index": zIndexs.chasm, padding: "6px 0 0" }], elQueue);



                removeDom(out, "script");



                var outCloner = out.cloneNode(true);

                removeDom(outCloner, "iframe");

                

                outCloner.style.position = "relative";



                body2.appendChild(outCloner);

                this.disposeCloneEvent(outCloner);

                elQueue.push(outCloner);



                forceground.scrollLeft = 1e5;



                addEvent(window, "resize", function(){

                    if(closeAll.status)return;

                    background.style.width = max(0, body.clientWidth - searchBoxWidth - fixLeft - 15) + "px";

                    forceground.style.width = max(0, body.clientWidth - searchBoxWidth - fixLeft) + "px";

                    body2.style.width = body.clientWidth + "px";

                    background.style.background = "#050006 url(" + bg + ") no-repeat " + ((body.clientWidth - searchBoxWidth - fixLeft - 15) - 1214) + "px -452px";

                    forceground.scrollLeft = 1e5; });

            },



            disposeCloneEvent: function(cloneEl){

                var ids = " u tools ";

                var all = cloneEl.getElementsByTagName("*");

                for(var i = all.length - 1, el, o; i >= 0; i --)

                    if(el = all[i], el.id && (~ids.indexOf(" " + el.id + " "))){

                        o = document.getElementById(el.id);

                        swapDoms.push([el, o]);

                        swapDom(el, o);

                    }

            },



            setLevel: function(n){

                level = n;



                if(n == 0){

                    imgObj1.style.top =

                    imgObj2.style.top =

                    background.style.top =

                    forceground.style.top = "-5000px";

                    return ;

                }else{

                    imgObj1.style.top =

                    imgObj2.style.top = fixTop + "px";

                    background.style.top = "0";

                    forceground.style.top = "2px";

                }



                var left = (n - 1) * frameWidth;

                imgObj1.style.backgroundPosition = "-" + left + "px 0";

                imgObj2.scrollLeft = left;



                if(n > 3){

                    rotate(forceground, (n - 3) * .8, "left bottom");

                    background.style.background = "#050006 url(" + bg + ") no-repeat " + ((body.clientWidth - searchBoxWidth - fixLeft - 15) - 1214) + "px -452px";

                }else{

                    rotate(forceground, 0, "left bottom");

                    background.style.background = "#fff";

                }

            },



            healing: function(){

                var num = nowNumber > targetNumber ? targetNumber : nowNumber;

                var rate = round(framePics - (num / targetNumber) * framePics);

                var level = framePics;



                var interval = itv(function(){

                    if(level == rate)

                        return clearInterval(interval);

                    level > rate ? (level --) : (level ++);

                    chasm.setLevel(level);

                }, 500);

            },



            fixPos: function(left, top){

                if(level == 0)return ;

                imgObj1.style.left =

                imgObj2.style.left = searchBoxWidth + left + "px";

                imgObj1.style.top =

                imgObj2.style.top = top + fixTop + "px";

                forceground.style.left = searchBoxWidth + fixLeft + left + "px";

                forceground.style.top = top + 2 + "px";

            },



            dispose: function(){

                for(var i = elQueue.length - 1; i >= 0; i --)

                    try{elQueue[i].parentNode.removeChild(elQueue[i]);}catch(e){}

            }

        }

    }();





    var ticket = function(){

        var referenceDataSize = [642, 265];



        var dialogWidth = 602, dialogHeight = 258, shadowZoom = 1.25;

        var shadowDiffPos = [dialogWidth * (shadowZoom - 1) / 2, dialogHeight * (shadowZoom - 1) / 2];



        var keyPoints = [

            /* [point, helper, offsetAngle] */

            // A:

            [ [543, 56], [342, 182], .001 ],

            // B:

            [ [43, 59], [172, 192], 1/9 ],

            // C:

            // [ [852, 90], [431, 284], 1/3 ]

            [ [852, 150], [431, 284], 1/3 ]

            // D:

            // [ [461, 222], [336, 256] ]

        ];



        var referencePaths = [];



        for(var i = 1, s, e, kp, l = keyPoints.length; i < l; i ++){

            s = keyPoints[i - 1];

            e = keyPoints[i];

            referencePaths.push(bezierPoints([s[0], s[1], e[1], e[0]], 300));

        }



        var keyStartPoint = keyPoints[0], keyEndPoint = keyPoints[keyPoints.length - 1];

        var startPoint = keyPoints[0][0], endPoint, lightPoint, sDistance;

        var shadowOffset = [640, 480];

        var elQueue = [];

        var layer, shadow, centerd, scDistance;



        return {

            show: function(){

                var bodyWidth = de.clientWidth, bodyHeight = de.clientHeight;



                endPoint = [(bodyWidth - dialogWidth) / 2 | 0,  (bodyHeight - dialogHeight) / 2 | 0];



                lightPoint = [bodyWidth / 2 | 0, 0];



                // scDistance = [lightPoint[0] - startPoint[0], lightPoint[1] - startPoint[1]];

                scDistance = 640;



                shadow = makeDom("div", body, ["=ticket-shadow"]);

                layer = makeDom("div", body, ["=ticket-layer"], elQueue);

                // layer.src = baseURL + "ticket-front.png";



                var lastPoint = [0, 0], lastZoom = keyPoints[keyPoints.length - 1][2], lastAngle = 0;



                // var drawPoint = function(x, y){

                //     var div = document.createElement("div");

                //     div.style.cssText = "position: absolute; width: 3px; height: 3px; left: " + x + "px; top: " + y + "px; background: red; overflow: hidden;";

                //     document.body.appendChild(div);

                // }



                var setTicket = function(){

                    var last = [0, 0];

                      return function(x, y, z, a, r){

                          if(last[0] == x && last[1] == y)

                              return ;



                          // drawPoint(x, y);



                        var sinr = Math.sin(r *= Math.PI / 180) * z,

                            cosr = Math.cos(r) * z;

                        var sinr2 = sinr * .5,

                            sinr3 = sinr * .75;



                        if(ie)

                            x += dialogWidth * sinr2,

                            y += dialogHeight * sinr3;



                        var c = [x + dialogWidth * z / 2, y + dialogHeight * z / 2];

                        var distanceZoom = [(c[0] - lightPoint[0]) / scDistance, (c[1] - lightPoint[1]) / scDistance];



                        style(layer, { left: x + "px", top: y + "px" });

                        style(shadow, {

                            left: x + shadowOffset[0] * distanceZoom[0] * z - shadowDiffPos[0] * z + "px",

                            top: y + shadowOffset[1] * distanceZoom[1] * z - shadowDiffPos[1] * z + "px" });



                        alpha(shadow, a);

                        matrix(layer, cosr, sinr2, sinr3, cosr, "0 0");

                        matrix(shadow, cosr * shadowZoom, sinr2 * shadowZoom, sinr3 * shadowZoom, cosr * shadowZoom, "0 0");



                        last = [x, y];

                    }

                }();



                var playLastTicket = function(){

                    var targetAngle = abs(360 - lastAngle) > lastAngle ? 0 : 360;

                    // var index = 0, framesNum = 1e3;

                    frame(function(rate){

                        // var index = round(rate * framesNum);

                        setTicket(

                            cubic(rate, lastPoint[0], endPoint[0] - lastPoint[0], 1),

                            cubic(rate, lastPoint[1], endPoint[1] - lastPoint[1], 1),

                            cubic(rate, lastZoom, 1 - lastZoom, 1),

                            cubic(rate, .33, -.33, 1),

                            cubic(rate, lastAngle, targetAngle - lastAngle, 1)

                        );

                    }, 1200, 14).end(function(){

                        shadow.parentNode.removeChild(shadow);

                        tout(function(){

                            centerd = true;

                            ticket.turnOver(ticket.showLoadingBar);

                        }, 1e3);

                    });

                };



                var playBezierPath = function(points, bezierIndex, z1, z2, callback){

                    // var framesNum = 1e3, angle = 0;

                    frame(function(rate){

                        // var index = round(rate * framesNum);

                           var pIndex = round(cubic(rate, 0, 299, 1));

                        var z = cubic(rate, z1, z2 - z1, 1);

                        var a = 1 - cubic(rate, bezierIndex * .33, .33, 1);

                        var p = lastPoint = points[pIndex], p1;

                         var r;



                         if(p1 = points[pIndex + 1])

                             lastAngle = r = (getAngleByRadian(pointToRadian(p, p1)) + (bezierIndex % 2 ? 0 : 180)) % 360;



                        setTicket(p[0], p[1], z, a, r || lastAngle);

                    }, 1200, 14).end(callback);

                };



                var playPaths = function(index){

                    var points = referencePaths[index];

                    if(points){

                        // alert([keyPoints[index][2], keyPoints[index + 1][2]]);

                        playBezierPath(points, index, keyPoints[index][2], keyPoints[index + 1][2], function(){

                            playPaths(index + 1);

                        });

                    }else{

                        playLastTicket();

                    }

                };



                playPaths(0);



                   addEvent(window, "resize", function(){

                       if(closeAll.status)return;

                    endPoint = [(de.clientWidth - dialogWidth) / 2 | 0,  (de.clientHeight - dialogHeight) / 2 | 0];

                    if(centerd)

                        style(layer, { left: endPoint[0] + "px", top: endPoint[1] + "px" });

                });

            },



            turnOver: function(end){

                var x = parseInt(layer.style.left);

                var y = parseInt(layer.style.top);



                turnOverX(layer, dialogWidth, dialogHeight, x, y, 150).center(function(){

                    // layer.src = baseURL + "blank.gif";

                    layer.style.backgroundPosition = "0 -260px";

                }).end(end);

            },



            showLoadingBar: function(){

                var loadingOffset = [125, ie ? 206 : 207];

                var textOffset = [77, 230];

                var joinButtonOffset = [449, 208];

                var closeButtonOffset = [574, 3];



                var template = "<span id='deliverer-num'></span>";



                var loading = makeDom("div", body, ["=loading", { l: endPoint[0] + loadingOffset[0], t: endPoint[1] + loadingOffset[1] }], elQueue);

                var loadingBar = makeDom("div", loading, ["=loading-bar"], elQueue);

                var layer = makeDom("div", body, ["=text", { l: endPoint[0] + textOffset[0], t: endPoint[1] + textOffset[1] }], elQueue);

                var joinButton = makeDom("div", body, ["=join", { l: endPoint[0] + joinButtonOffset[0], t: endPoint[1] + joinButtonOffset[1] }], elQueue);

                var closeButton = makeDom("div", body, ["=close", { l: endPoint[0] + closeButtonOffset[0], t: endPoint[1] + closeButtonOffset[1] }], elQueue);



                   addEvent(window, "resize", function(){

                       if(closeAll.status)return;

                    endPoint = [(de.clientWidth - dialogWidth) / 2 | 0,  (de.clientHeight - dialogHeight) / 2 | 0];

                    css(loading, { l: endPoint[0] + loadingOffset[0], t: endPoint[1] + loadingOffset[1] });

                    css(layer, { l: endPoint[0] + textOffset[0], t: endPoint[1] + textOffset[1] });

                    css(joinButton, { l: endPoint[0] + joinButtonOffset[0], t: endPoint[1] + joinButtonOffset[1] });

                    css(closeButton, { l: endPoint[0] + closeButtonOffset[0], t: endPoint[1] + closeButtonOffset[1] });

                });



                joinButton.onmouseover = function(){ this.style.backgroundPosition = "-687px -563px"; };

                joinButton.onmouseout = function(){ this.style.backgroundPosition = "-687px -521px"; };

                joinButton.onclick = function(){ open(activityUrl); };



                closeButton.onmouseover = function(){ this.style.backgroundPosition = "-650px -548px"; };

                closeButton.onmouseout = function(){ this.style.backgroundPosition = "-650px -521px"; };

                closeButton.onclick = function(){ closeAll(); };



                var formatNumber = function(number){

                    return round(number).toString().replace(/(\d)(?=(\d{3})+$)/ig, "$1,");;

                };



                layer.innerHTML = template;



                var deliverer = doc.getElementById("deliverer-num");

                // var index = 0, framesNum = 60;

                // var interval = itv(function(){

                //     var number1 = linear(index, 0, nowNumber, framesNum);

                //     var number2 = exponential(index, 0, nowNumber, framesNum);

                //     deliverer.innerHTML = formatNumber(number2);

                //     loadingBar.style.width = round(number1 / targetNumber * 20) * 15 + "px";

                //     if(++ index > framesNum){

                //         clearInterval(interval);

                //         tout(function(){ chasm.healing(); }, 1e3);

                //     }

                // });

                frame(function(rate){

                    var number1 = linear(rate, 0, nowNumber, 1);

                    var number2 = exponential(rate, 0, nowNumber, 1);

                    deliverer.innerHTML = formatNumber(number2);

                    loadingBar.style.width = round(number1 / targetNumber * 20) * 15 + "px";

                }, 1200, 24).end(function(){

                    tout(function(){ chasm.healing(); }, 1e3);

                });

            },



            dispose: function(){

                for(var i = elQueue.length - 1; i >= 0; i --)

                    try{elQueue[i].parentNode.removeChild(elQueue[i]);}catch(e){}

            }

        }

    }();



    var closeAll = function(){

        closeAll.status = 1;

        chasm.dispose();

        ticket.dispose();



        for(var i = swapDoms.length - 1, s; i >= 0; i --){

            s = swapDoms[i];

            swapDom(s[0], s[1]);

        }



        resetOver();

    };



    try{

        ie && doc.execCommand("BackgroundImageCache", false, true);

    }catch(e){};



    var earthquakeLevel = 1;



    style(out,   ie6 ? ({ position: "relative", left: 0, top: 0, display: "block" }) : ({ display: "block" })  );



    earthquake.onQuake(function(left, top){

        if(random(10) < earthquakeLevel)

            chip.create();

        chasm.fixPos(left, top);

    });





    var nopScript = document.createElement("script");

    nopScript.type = "text/javascript";

    nopScript.src = nopUrl;

    body.appendChild(nopScript);



    var cimg = new Image();

    cimg.src = baseURL + "ticket.jpg";



    var imageLoader = new Image();

    imageLoader.onload = function(){

        disOver();



        tout(function(){

            earthquake.start();

            chasm.prepare();

        }, 0);



        tout(function(){ chasm.setLevel(1); }, 500);



        for(var i = 2; i < 8; i ++)

            tout(function(i){

                return function(){

                    earthquake.setLevel(earthquakeLevel = i);

                    chasm.setLevel(i);

                }

            }(i), i * 400);



        tout(function(){ earthquake.stop(); chasm.setLevel(8); }, 3500);

        tout(ticket.show, 4500);

    }

    imageLoader.src = baseURL + "all.png";



    /**

     * Tools

     */

    function itv(f, t){ return setInterval(f, t || time); }

    function tout(f, t){ return setTimeout(f, t || time); }

    function random(number){ return Math.random() * number | 0; }

    function quadratic(index, offset, target, framesNum){ return target * (index /= framesNum) * index + offset; }



    function disOver(){

        de.style.overflowX = "hidden";

    }



    function resetOver(){

        de.style.overflowX = "auto";

    }



    function getAngleByRadian(radian){ return radian * 180 / Math.PI; }



    function pointToRadian(origin, point){

        var PI = Math.PI;

        if (point[0] == origin[0]) {

            if (point[1] > origin[1])

                return PI * 0.5;

            return PI * 1.5

        } else if (point[1] == origin[1]) {

            if (point[0] > origin[0])

                return 0;

            return PI;

        }

        var t = Math.atan((origin[1] - point[1]) / (origin[0] - point[0]));

        if (point[0] > origin[0] && point[1] < origin[1])

            return t + 2 * PI;

        if (point[0] > origin[0] && point[1] > origin[1])

            return t;

        return t + PI; 

    }



    function curveLength(curve){ return max((distance(curve[0], curve[1]) + distance(curve[1], curve[2]) + distance(curve[2], curve[3])) | 0, 1); }



    function distance(a, b){ return sqrt(pow(a[0] - b[0], 2) + pow(a[1] - b[1], 2)); }



    function bezier(curve, rate){

        var cx = 3 * (curve[1][0] - curve[0][0])

            , bx = 3 * (curve[2][0] - curve[1][0]) - cx

            , ax = curve[3][0] - curve[0][0] - cx - bx

            , cy = 3 * (curve[1][1] - curve[0][1])

            , by = 3 * (curve[2][1] - curve[1][1]) - cy

            , ay = curve[3][1] - curve[0][1] - cy - by;

        return [ax * pow(rate, 3) + bx * pow(rate, 2) + cx * rate + curve[0][0],

            ay * pow(rate, 3) + by * pow(rate, 2) + cy * rate + curve[0][1]];

    }



    function bezierPoints(curve, count){

        if (count < 2) return;

        var len = curveLength(curve);

        var points = [];

        points[0] = {

            p: curve[0],

            t: 0,

            l: 0

        };

        for (var i = 1; i <= len; i++){

            var t = i / len,

                p = bezier(curve, t),

                l = points[i - 1].l + distance(p, points[i - 1].p);

            points[i] = {

                i: i,

                p: p,

                t: t,

                l: l

            }

        }

        var max = points[len].l;

        var result = [];

        var t = 0;

        for (var i = 0; i <= count; i++){

            var tl = max * (i / (count - 1));

            for (var j = t; j < points.length; j++){

                var point = points[j]

                if (point.l >= tl){

                    t = j;

                    result.push(point.p);

                    break;

                }

            }

        }

        return result;

    }



    function linear(index, offset, target, framesNum){ return target * index / framesNum + offset; }



    function cubic(index, offset, target, framesNum){

        if((index /= framesNum / 2) < 1)

            return target / 2 * index * index * index + offset;

        else

            return target / 2 * ((index -= 2) * index * index + 2) + offset;

    }



    function exponential(index, offset, target, framesNum){

        if(index == 0)

            return offset;

        else if(index == framesNum)

            return offset + target;

        else if((index /= framesNum / 2) < 1)

            return target / 2 * Math.pow(2, 10 * (index - 1)) + offset;

        else

            return target / 2 * (-Math.pow(2, -10 * -- index) + 2) + offset;

    }

}(window);

baiduquake.html源码如下：

View Code

<!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=utf-8" />

<title>无标题文档</title>

</head>



<body>

<div id='sharpxiajun'>

重磅消息：只要在百度搜索"2012世界末日"，你的电脑显示器页面将会震动，出现地震山摇的状况，然后会有一张"船票"飘然而出 ，请你参与"拯救地球"重磅消息：只要在百度搜索"2012世界末日"，你的电脑显示器页面将会震动，出现地震山摇的状况，然后会有一张"船票"飘然而出 ，请你参与"拯救地球"重磅消息：只要在百度搜索"2012世界末日"，你的电脑显示器页面将会震动，出现地震山摇的状况，然后会有一张"船票"飘然而出 ，请你参与"拯救地球"重磅消息：只要在百度搜索"2012世界末日"，你的电脑显示器页面将会震动，出现地震山摇的状况，然后会有一张"船票"飘然而出 ，请你参与"拯救地球"重磅消息：只要在百度搜索"2012世界末日"，你的电脑显示器页面将会震动，出现地震山摇的状况，然后会有一张"船票"飘然而出 ，请你参与"拯救地球"重磅消息：只要在百度搜索"2012世界末日"，你的电脑显示器页面将会震动，出现地震山摇的状况，然后会有一张"船票"飘然而出 ，请你参与"拯救地球"重磅消息：只要在百度搜索"2012世界末日"，你的电脑显示器页面将会震动，出现地震山摇的状况，然后会有一张"船票"飘然而出 ，请你参与"拯救地球"重磅消息：只要在百度搜索"2012世界末日"，你的电脑显示器页面将会震动，出现地震山摇的状况，然后会有一张"船票"飘然而出 ，请你参与"拯救地球"重磅消息：只要在百度搜索"2012世界末日"，你的电脑显示器页面将会震动，出现地震山摇的状况，然后会有一张"船票"飘然而出 ，请你参与"拯救地球"重磅消息：只要在百度搜索"2012世界末日"，你的电脑显示器页面将会震动，出现地震山摇的状况，然后会有一张"船票"飘然而出 ，请你参与"拯救地球"重磅消息：只要在百度搜索"2012世界末日"，你的电脑显示器页面将会震动，出现地震山摇的状况，然后会有一张"船票"飘然而出 ，请你参与"拯救地球"重磅消息：只要在百度搜索"2012世界末日"，你的电脑显示器页面将会震动，出现地震山摇的状况，然后会有一张"船票"飘然而出 ，请你参与"拯救地球"重磅消息：只要在百度搜索"2012世界末日"，你的电脑显示器页面将会震动，出现地震山摇的状况，然后会有一张"船票"飘然而出 ，请你参与"拯救地球"重磅消息：只要在百度搜索"2012世界末日"，你的电脑显示器页面将会震动，出现地震山摇的状况，然后会有一张"船票"飘然而出 ，请你参与"拯救地球"重磅消息：只要在百度搜索"2012世界末日"，你的电脑显示器页面将会震动，出现地震山摇的状况，然后会有一张"船票"飘然而出 ，请你参与"拯救地球"重磅消息：只要在百度搜索"2012世界末日"，你的电脑显示器页面将会震动，出现地震山摇的状况，然后会有一张"船票"飘然而出 ，请你参与"拯救地球"重磅消息：只要在百度搜索"2012世界末日"，你的电脑显示器页面将会震动，出现地震山摇的状况，然后会有一张"船票"飘然而出 ，请你参与"拯救地球"重磅消息：只要在百度搜索"2012世界末日"，你的电脑显示器页面将会震动，出现地震山摇的状况，然后会有一张"船票"飘然而出 ，请你参与"拯救地球"重磅消息：只要在百度搜索"2012世界末日"，你的电脑显示器页面将会震动，出现地震山摇的状况，然后会有一张"船票"飘然而出 ，请你参与"拯救地球"重磅消息：只要在百度搜索"2012世界末日"，你的电脑显示器页面将会震动，出现地震山摇的状况，然后会有一张"船票"飘然而出 ，请你参与"拯救地球"重磅消息：只要在百度搜索"2012世界末日"，你的电脑显示器页面将会震动，出现地震山摇的状况，然后会有一张"船票"飘然而出 ，请你参与"拯救地球"重磅消息：只要在百度搜索"2012世界末日"，你的电脑显示器页面将会震动，出现地震山摇的状况，然后会有一张"船票"飘然而出 ，请你参与"拯救地球"重磅消息：只要在百度搜索"2012世界末日"，你的电脑显示器页面将会震动，出现地震山摇的状况，然后会有一张"船票"飘然而出 ，请你参与"拯救地球"重磅消息：只要在百度搜索"2012世界末日"，你的电脑显示器页面将会震动，出现地震山摇的状况，然后会有一张"船票"飘然而出 ，请你参与"拯救地球"重磅消息：只要在百度搜索"2012世界末日"，你的电脑显示器页面将会震动，出现地震山摇的状况，然后会有一张"船票"飘然而出 ，请你参与"拯救地球"重磅消息：只要在百度搜索"2012世界末日"，你的电脑显示器页面将会震动，出现地震山摇的状况，然后会有一张"船票"飘然而出 ，请你参与"拯救地球"重磅消息：只要在百度搜索"2012世界末日"，你的电脑显示器页面将会震动，出现地震山摇的状况，然后会有一张"船票"飘然而出 ，请你参与"拯救地球""

</div>

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

</body>

</html>

　　对前端技术感兴趣的童鞋可以好好研究下哈！！！！！！

 

下载源代码，请点击下面链接：

http://files.cnblogs.com/sharpxiajun/baidu.zip