昨天在同学群里收到这样的信息:【重磅消息:只要在百度搜索"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源码如下:
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;") + "\"> </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源码如下:
<!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>
对前端技术感兴趣的童鞋可以好好研究下哈!!!!!!
下载源代码,请点击下面链接: