收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 5510|回复: 30

百度“2012世界末日”效果

  [复制链接]
发表于 2012-4-21 18:44:50 | 显示全部楼层 |阅读模式
本帖最后由 pxh0829 于 2012-4-21 18:46 编辑

 提示:您可以先修改部分代码再运行



http://www.baidu.com/s?wd=2012%E4%B8%96%E7%95%8C%E6%9C%AB%E6%97%A5
发表于 2012-5-4 10:48:23 | 显示全部楼层
附上末日菜单效果的JS源码
  1. /**
  2. * 2012 彩蛋效果源码
  3. * author: dron
  4. * date: 2012-3-10
  5. */

  6. void function(window, undefined){

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

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

  11.         var targetNumber = 500000;
  12.         var nowNumber = 0;
  13.         var activityUrl = "http://hot.baidu.com/savetheearth"; // 活动页地址

  14.         var doc = document;
  15.         var de = doc.documentElement;
  16.         var body = doc.body;
  17.         var out = doc.getElementById("out");
  18.         var swapDoms = [];

  19.         var max = Math.max;
  20.         var min = Math.min;
  21.         var sqrt = Math.sqrt;
  22.         var pow = Math.pow;
  23.         var abs = Math.abs;
  24.         var round = Math.round;

  25.         var ua = navigator.userAgent;
  26.         var ie = /msie/i.test(ua) && !document.addEventListener;
  27.         var ie6 = /msie 6/i.test(ua);
  28.         var cr = /chrome/i.test(ua);
  29.         var sf = /safari/i.test(ua);
  30.         var ff = /firefox/i.test(ua);
  31.         var op = /opera/i.test(ua);

  32.         var time = ie ? 16 : 30;
  33.         var sframesNum = 40;

  34.         window.getNOP = function(data){
  35.             nowNumber = data.total;
  36.         };

  37.         var zIndexs = {
  38.                 background: 4000, // 背景层
  39.                 forceground: 5000, // 前景层
  40.                 chasm: 6000, // 裂痕
  41.                 chip: 7000, // 碎石
  42.                 ticket: 8000, // 船票
  43.                 text: 9000 // 文字
  44.         };

  45.         var css = function(window, undefined){

  46.                 var cache = {};

  47.                 var getPms = function(index){
  48.                     return [].slice.apply(
  49.                             arguments.callee.caller.arguments, [index || 1]);
  50.                 };

  51.                 var decode = function(styles){
  52.                     var res = [], idx = 0;
  53.                     for(var n in styles)
  54.                         res[idx ++] = fullname(n) + ": " + value(styles[n]) + "; ";
  55.                     return res.join("");
  56.                 };

  57.                 var fullname = function(){
  58.                         var shorts = { pos: "position", w: "width", h: "height", l: "left", t: "top" };
  59.                           return function(name){
  60.                             return shorts[name] || name;
  61.                         }
  62.                 }();

  63.                 var value = function(value){
  64.                         return value - 0 === value ? value + "px" : value;
  65.                 };

  66.                 var join = function(objs){
  67.                         var res = [];
  68.                         for(var i = 0, l = objs.length, obj; i < l; i ++){
  69.                                 obj = objs[i];
  70.                             if(/^=/.test(obj))
  71.                                     res[i] = loadRes(obj);
  72.                             else if(obj + "" === obj)
  73.                                     res[i] = obj;
  74.                             else
  75.                                 res[i] = decode(obj);
  76.                         }
  77.                         return res.join(";");
  78.                 };

  79.                 var saveRes = function(name){
  80.                         cache[name] = join(getPms(1));
  81.                 };

  82.                 var loadRes = function(name){
  83.                     return cache[name];
  84.                 };

  85.                 var replaceTag = function(tag){
  86.                            if(/^<(\w+)([^>]*)>$/.test(tag)){
  87.                                    var tag = RegExp.$1, atts = RegExp.$2;
  88.                                    return "<" + tag + atts + " style='" + join(getPms(1)) + "'></" + tag + ">";
  89.                            }
  90.                 };

  91.                 var dom = function(dom){
  92.                     dom.style.cssText += ";" + join(getPms(1));
  93.                 };

  94.                 return function(fst, sec){
  95.                         var fn;
  96.                         if(!fst){
  97.                             throw new Error();
  98.                         }else if(/^=/.test(fst)){
  99.                         if(sec === undefined)
  100.                             fn = loadRes;
  101.                         else
  102.                                 fn = saveRes;
  103.                     }else if(/^<[^>]+>$/.test(fst)){
  104.                             fn = replaceTag;
  105.                     }else if(fst.nodeType && fst.nodeType != 3){
  106.                             fn = dom;
  107.                     }
  108.                     return fn.apply(this, arguments);
  109.                 }
  110.         }(window);

  111.         var style = function(dom, config){
  112.                 for(var name in config)
  113.                         dom.style[name] = config[name];
  114.         }

  115.         var makeDom = function(tag, parent, style, recycle){
  116.             var dom = doc.createElement(tag || "div");
  117.                    style && css.apply(null, [dom].concat(style));
  118.                    parent && parent.appendChild(dom);
  119.                    recycle && recycle.push(dom);
  120.                    return dom;
  121.         };

  122.         var frame = function(fn, time, min){
  123.                 var start = new Date().getTime();
  124.                 var end = start + time;
  125.                 var pRate = 1 / (min || 5);
  126.                 var lastRate = 0;
  127.                 var endCb;
  128.             var interval = setInterval(function(){
  129.                 var now = new Date().getTime();
  130.                 var rate = (now - start) / time;
  131.                 if(rate > lastRate + pRate)
  132.                     rate = lastRate + pRate;
  133.                 lastRate = rate;
  134.                 if(rate < 1)
  135.                     fn(rate);
  136.                 else{
  137.                         clearInterval(interval);
  138.                     fn(1);
  139.                     endCb && endCb();
  140.                 }
  141.             }, 1);
  142.             return {
  143.                     end: function(fn){
  144.                         endCb = fn;
  145.                     }
  146.             }
  147.         };

  148.         var alpha = function(){
  149.                 return typeof document.body.style.opacity == "string" ?

  150.                 function (dom, n){
  151.                     dom.style.opacity = n;
  152.                 } :

  153.                 function(dom, n){
  154.                         var key = "alpha";
  155.                         n = n * 100 | 0;
  156.                         if(~ dom.style.filter.indexOf(key)){
  157.                                 dom.filters.item(key).opacity = n;
  158.                         }else{
  159.                                 dom.style.filter += " alpha(opacity=" + n + ")";
  160.                         }
  161.                 }
  162.         }();

  163.         var rotate = function(dom, ang, origin){
  164.                 var r = ang * Math.PI / 180;
  165.                 var cos = Math.cos(r);
  166.                 var sin = Math.sin(r);
  167.                 matrix(dom, cos, -sin, sin, cos, origin || "center center");
  168.         };

  169.         var matrix = function(){
  170.                 var originKey, transformKey;
  171.                 if(cr || sf){
  172.                     originKey = "-webkit-transform-origin";
  173.                     transformKey = "-webkit-transform";
  174.                 }else if(ff){
  175.                         originKey = "MozTransformOrigin";
  176.                         transformKey = "MozTransform";
  177.                 }else if(op){
  178.                         originKey = "OTransformOrigin";
  179.                         transformKey = "OTransform";
  180.                 }
  181.                 return ie ?
  182.                 function(dom, M11, M12, M21, M22, origin){
  183.                         // TODO: origin 未实现
  184.                         var key = "DXImageTransform.Microsoft.Matrix";
  185.                         var style = dom.style;
  186.                         if(~ style.filter.indexOf(key)){
  187.                                 var matrix = dom.filters.item(key);
  188.                                 matrix.M11 = M11, matrix.M12 = M12, matrix.M21 = M21, matrix.M22 = M22;
  189.                         }else{
  190.                                 style.filter += " progid:" + key + "(M11=" + M11 + ", M12=" + M12 +", M21=" + M21 + ", M22=" + M22 + ", FilterType='bilinear', SizingMethod='auto expand')";
  191.                         }
  192.                 } :
  193.                 function(dom, M11, M12, M21, M22, origin){
  194.                         var conf = {};
  195.                         conf[originKey] = origin || "0 0";
  196.                         conf[transformKey] = "matrix(" + [M11, M21, M12, M22].join(",") + ",0,0)";
  197.                     style(dom, conf);
  198.                 }
  199.         }();

  200.         var removeDom = function(parent, tag){
  201.                 var els = parent.getElementsByTagName(tag);
  202.                 for(var i = els.length - 1; i >= 0; i --)
  203.                         els[i].parentNode.removeChild(els[i]);
  204.         };

  205.         var turnOverX = function(dom, w, h, x, y, dx){
  206.                 var dy = h / 2;
  207.                 var center, end;
  208.                 frame(function(rate){
  209.                         rate = exponential(rate, 0, 1, 1);
  210.                         var r = rate * Math.PI;
  211.                         var p = rate < .5 ? -1 : 1;
  212.                         var M12 = p * Math.sin(r) * dx / w;
  213.                         var M22 = -p * Math.cos(r);
  214.                         if(rate >= .5)
  215.                             center && center(), center = null;
  216.                         matrix(dom, 1, M12, 0, M22);
  217.                         M12 = ie ? Math.abs(M12) : M12;
  218.                         style(dom, { left: x - M12 * w / 4 + "px", top: y + dy * (1 - M22) + "px" });
  219.                 }, 1200, 24).end(function(){ end && end(); });
  220.                 var rt = {
  221.                         center: function(fn){ center = fn; return rt; },
  222.                         end: function(fn){ end = fn; return rt; }
  223.                 };
  224.                 return rt;
  225.         };

  226.         var addEvent = function(target, name, fn){
  227.                 var call = function(){
  228.                         fn.apply(target, arguments);
  229.                 };
  230.                 if(window.attachEvent){
  231.                         target.attachEvent("on" + name, call);
  232.                 }else if(window.addEventListener){
  233.                         target.addEventListener(name, call, false);
  234.                 }else{
  235.                         target["on" + name] = call;
  236.                 };
  237.                 return call;
  238.         };

  239.         var swapDom = function(el, other){
  240.                 var p1, p2, t;
  241.                 p1 = el.parentNode;
  242.                 p2 = other.parentNode;
  243.                 t = document.createTextNode("");

  244.                 p1.insertBefore(t, el);
  245.                 p2.insertBefore(el, other);
  246.                 p1.insertBefore(other, t);
  247.                 p1.removeChild(t);
  248.         };

  249.         css("=abs", "position: absolute;");
  250.         css("=thide", "top: -5000px;");
  251.         css("=hide", "overflow: hidden");
  252.         css("=chip", "=abs", "=hide", "background: url(" + baseURL + "all.png) no-repeat 0 0; z-index: " + zIndexs.chip + ";");
  253.         css("=broken1", "=abs", "=thide", "background: url(" + baseURL + "all.png) no-repeat 0 0; z-index: " + zIndexs.chasm + ";");
  254.         css("=broken2", "=abs", "=thide", "=hide", "z-index: " + zIndexs.chasm + ";");
  255.         css("=background", "=abs", "=thide", "=hide", "background: #050006 url(" + baseURL + "all.png) no-repeat 0 -462px; z-index: " + zIndexs.background + ";");
  256.         css("=forceground", "=abs", "=thide", "=hide", "height: 355px; background-color: #fff; z-index: " + zIndexs.forceground + ";");
  257.         css("=ticket-layer", "=abs", "=hide", "z-index: " + zIndexs.ticket + "; width: 602px; height: 258px; background: url(" + baseURL + "ticket.jpg) no-repeat 0 0;");
  258.         css("=ticket-shadow", "=ticket-layer", "background: #000;");
  259.         css("=loading", "=abs", "z-index: " + zIndexs.text + "; background: url(" + baseURL + "all.png) no-repeat -829px -521px; width: 300px; height: 20px;");
  260.         css("=loading-bar", "=hide", "width: 0; height: 20px; background: url(" + baseURL + "all.png) no-repeat -829px -541px;");
  261.         css("=text", "=abs", "color: #a3cb4c; font-size: 18px; font-weight: 700; width: 72px; height: 20px; text-align: center; z-index: " + zIndexs.text + ";");
  262.         css("=join", "=abs", "width: 132px; height: 42px; background: url(" + baseURL + "all.png) no-repeat -687px -521px; z-index: " + zIndexs.text + ";");
  263.         css("=close", "=abs", "width: 27px; height: 27px; background: url(" + baseURL + "all.png) no-repeat -650px -521px; z-index: " + zIndexs.text + ";");

  264.         /**
  265.          * 地震
  266.          */
  267.         var earthquake = function(){
  268.                 var level = 1;
  269.                 var interval;
  270.                 var onQuake = function(){};

  271.                 var f = ie6 ? function(x, y){
  272.                     return { left: x + "px", top: y + "px" };
  273.                 } : function(x, y){
  274.                     return { marginLeft: x + "px", marginTop: y + "px" };
  275.                 };

  276.                 return {
  277.                         start: function(){
  278.                             interval = itv(function(){
  279.                                 var left = level * 2 - random(level * 4);
  280.                                         var top = level * 1 - random(level * 2);
  281.                                         style(out, f(left, top));
  282.                                         onQuake(left, top);
  283.                             });
  284.                         },
  285.                         stop: function(){
  286.                             clearInterval(interval);
  287.                             tout(function(){
  288.                                 style(out, f(0, 0));
  289.                                         onQuake(0, 0);
  290.                             }, 1);
  291.                             // resetOver();
  292.                         },
  293.                         setLevel: function(n){
  294.                             level = n;
  295.                         },
  296.                         onQuake: function(callback){
  297.                             onQuake = callback;
  298.                         }
  299.                 }
  300.         }();

  301.         /**
  302.          * 掉落碎石
  303.          */
  304.         var chip = function(){
  305.                 var chips = [ [28, 27, 0], [22, 27, 27], [16, 25, 54] ]; // width, height, top
  306.             return {
  307.                     create: function(){
  308.                         var c = chips[random(chips.length)];
  309.                         var top = -50, left = random(body.clientWidth) - 40;
  310.                         var div = makeDom("div", body, ["=chip", { w: c[0], h: c[1], l: left, t: top, "background-position": "-612px -" + (c[2] + 521) + "px" }]);

  311.                         frame(function(rate){
  312.                                      div.style.top = quadratic(rate, top, 800, 1) + "px"; // 800 = 750 - (-50)
  313.                         }, 1e3).end(function(){
  314.                             body.removeChild(div);
  315.                         });
  316.                     }
  317.             }
  318.         }();

  319.         /**
  320.          * 裂痕
  321.          */
  322.         var forceground;
  323.         var chasm = function(){
  324.                 var level = 0;
  325.                 var bg = baseURL + "all.png";
  326.                 var img2 = baseURL + "broken.png";
  327.                 var imgObj1, imgObj2;
  328.                 var background;

  329.                 var searchBoxWidth = 620; // 搜索框至少宽度
  330.                 var fixTop = -7;
  331.                 var fixLeft = 68;
  332.                 var frameWidth = 227;
  333.                 var frameHeight = 452;
  334.                 var framePics = 8;
  335.                 var elQueue = [];

  336.             return {
  337.                     prepare: function(){
  338.                             var iw = min(frameWidth, de.clientWidth - searchBoxWidth);

  339.                             // 创建裂缝 gif 层
  340.                         imgObj1 = makeDom("div", body, ["=broken1", { l: searchBoxWidth + "px", w: iw + "px", h: frameHeight + "px" }], elQueue);

  341.                         // 创建裂缝 png 层
  342.                         imgObj2 = makeDom("div", body, ["=broken2", { l: searchBoxWidth, w: iw, h: frameHeight }], elQueue);

  343.                         imgObj2.innerHTML = "<div style=\"width: " + (frameWidth * framePics) + "px; height: " + frameHeight + "px; " +
  344.                                 (ie6 ? "filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + img2 + "',sizingMethod='scale');" :
  345.                                 "background: url(" + img2 + ") right 0;")
  346.                         + "\">&nbsp;</div>";

  347.                         // 创建背景层
  348.                         background = makeDom("div", body, ["=background", { l: searchBoxWidth + fixLeft + 15, w: max(body.clientWidth - searchBoxWidth - fixLeft - 15, 0), h: 80 }], elQueue);

  349.                         // 创建前景层(用于旋转)
  350.                         forceground = makeDom("div", body, ["=forceground", { l: searchBoxWidth + fixLeft, w: max(body.clientWidth - searchBoxWidth - fixLeft, 0) }], elQueue);

  351.                         // 创建旋转层
  352.                         var body2 = makeDom("div", forceground, [{ w: body.clientWidth, "z-index": zIndexs.chasm, padding: "6px 0 0" }], elQueue);

  353.                         removeDom(out, "script");

  354.                         var outCloner = out.cloneNode(true);
  355.                         removeDom(outCloner, "iframe");
  356.                         
  357.                         outCloner.style.position = "relative";

  358.                         body2.appendChild(outCloner);
  359.                         this.disposeCloneEvent(outCloner);
  360.                         elQueue.push(outCloner);

  361.                         forceground.scrollLeft = 1e5;

  362.                         addEvent(window, "resize", function(){
  363.                                 if(closeAll.status)return;
  364.                             background.style.width = max(0, body.clientWidth - searchBoxWidth - fixLeft - 15) + "px";
  365.                             forceground.style.width = max(0, body.clientWidth - searchBoxWidth - fixLeft) + "px";
  366.                             body2.style.width = body.clientWidth + "px";
  367.                             background.style.background = "#050006 url(" + bg + ") no-repeat " + ((body.clientWidth - searchBoxWidth - fixLeft - 15) - 1214) + "px -452px";
  368.                             forceground.scrollLeft = 1e5; });
  369.                     },

  370.                     disposeCloneEvent: function(cloneEl){
  371.                             var ids = " u tools ";
  372.                         var all = cloneEl.getElementsByTagName("*");
  373.                         for(var i = all.length - 1, el, o; i >= 0; i --)
  374.                                 if(el = all[i], el.id && (~ids.indexOf(" " + el.id + " "))){
  375.                                         o = document.getElementById(el.id);
  376.                                         swapDoms.push([el, o]);
  377.                                         swapDom(el, o);
  378.                                 }
  379.                     },

  380.                     setLevel: function(n){
  381.                             level = n;

  382.                             if(n == 0){
  383.                                     imgObj1.style.top =
  384.                                     imgObj2.style.top =
  385.                                     background.style.top =
  386.                                     forceground.style.top = "-5000px";
  387.                                     return ;
  388.                             }else{
  389.                                     imgObj1.style.top =
  390.                                     imgObj2.style.top = fixTop + "px";
  391.                                     background.style.top = "0";
  392.                                     forceground.style.top = "2px";
  393.                             }

  394.                             var left = (n - 1) * frameWidth;
  395.                             imgObj1.style.backgroundPosition = "-" + left + "px 0";
  396.                             imgObj2.scrollLeft = left;

  397.                             if(n > 3){
  398.                                 rotate(forceground, (n - 3) * .8, "left bottom");
  399.                                 background.style.background = "#050006 url(" + bg + ") no-repeat " + ((body.clientWidth - searchBoxWidth - fixLeft - 15) - 1214) + "px -452px";
  400.                             }else{
  401.                                 rotate(forceground, 0, "left bottom");
  402.                                 background.style.background = "#fff";
  403.                             }
  404.                     },

  405.                     healing: function(){
  406.                             var num = nowNumber > targetNumber ? targetNumber : nowNumber;
  407.                         var rate = round(framePics - (num / targetNumber) * framePics);
  408.                         var level = framePics;

  409.                         var interval = itv(function(){
  410.                                 if(level == rate)
  411.                                 return clearInterval(interval);
  412.                             level > rate ? (level --) : (level ++);
  413.                             chasm.setLevel(level);
  414.                         }, 500);
  415.                     },

  416.                     fixPos: function(left, top){
  417.                         if(level == 0)return ;
  418.                         imgObj1.style.left =
  419.                         imgObj2.style.left = searchBoxWidth + left + "px";
  420.                         imgObj1.style.top =
  421.                         imgObj2.style.top = top + fixTop + "px";
  422.                         forceground.style.left = searchBoxWidth + fixLeft + left + "px";
  423.                         forceground.style.top = top + 2 + "px";
  424.                     },

  425.                     dispose: function(){
  426.                                 for(var i = elQueue.length - 1; i >= 0; i --)
  427.                                         try{elQueue[i].parentNode.removeChild(elQueue[i]);}catch(e){}
  428.                     }
  429.             }
  430.         }();

  431.         /**
  432.          * 彩票
  433.          */
  434.         var ticket = function(){
  435.                 // 参考数据尺寸
  436.             var referenceDataSize = [642, 265];

  437.             var dialogWidth = 602, dialogHeight = 258, shadowZoom = 1.25;
  438.                 var shadowDiffPos = [dialogWidth * (shadowZoom - 1) / 2, dialogHeight * (shadowZoom - 1) / 2];

  439.             var keyPoints = [
  440.                     /* [point, helper, offsetAngle] */
  441.                     // A:
  442.                     [ [543, 56], [342, 182], .001 ],
  443.                     // B:
  444.                     [ [43, 59], [172, 192], 1/9 ],
  445.                     // C:
  446.                     // [ [852, 90], [431, 284], 1/3 ]
  447.                     [ [852, 150], [431, 284], 1/3 ]
  448.                     // D:
  449.                     // [ [461, 222], [336, 256] ]
  450.             ];

  451.             // 参考数径段集
  452.             var referencePaths = [];

  453.             for(var i = 1, s, e, kp, l = keyPoints.length; i < l; i ++){
  454.                     s = keyPoints[i - 1];
  455.                     e = keyPoints[i];
  456.                     referencePaths.push(bezierPoints([s[0], s[1], e[1], e[0]], 300));
  457.             }

  458.             var keyStartPoint = keyPoints[0], keyEndPoint = keyPoints[keyPoints.length - 1];
  459.             var startPoint = keyPoints[0][0], endPoint, lightPoint, sDistance;
  460.             var shadowOffset = [640, 480];
  461.             var elQueue = [];
  462.             var layer, shadow, centerd, scDistance;

  463.             return {
  464.                     show: function(){
  465.                             var bodyWidth = de.clientWidth, bodyHeight = de.clientHeight;

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

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

  468.                         // scDistance = [lightPoint[0] - startPoint[0], lightPoint[1] - startPoint[1]];
  469.                         scDistance = 640;

  470.                         shadow = makeDom("div", body, ["=ticket-shadow"]);
  471.                         layer = makeDom("div", body, ["=ticket-layer"], elQueue);
  472.                         // layer.src = baseURL + "ticket-front.png";

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

  474.                         // var drawPoint = function(x, y){
  475.                         //     var div = document.createElement("div");
  476.                         //     div.style.cssText = "position: absolute; width: 3px; height: 3px; left: " + x + "px; top: " + y + "px; background: red; overflow: hidden;";
  477.                         //     document.body.appendChild(div);
  478.                         // }

  479.                         var setTicket = function(){
  480.                                 var last = [0, 0];
  481.                                   return function(x, y, z, a, r){
  482.                                           if(last[0] == x && last[1] == y)
  483.                                               return ;

  484.                                           // drawPoint(x, y);

  485.                                         var sinr = Math.sin(r *= Math.PI / 180) * z,
  486.                                             cosr = Math.cos(r) * z;
  487.                                     var sinr2 = sinr * .5,
  488.                                             sinr3 = sinr * .75;

  489.                                     if(ie)
  490.                                         x += dialogWidth * sinr2,
  491.                                         y += dialogHeight * sinr3;

  492.                                         var c = [x + dialogWidth * z / 2, y + dialogHeight * z / 2];
  493.                                     var distanceZoom = [(c[0] - lightPoint[0]) / scDistance, (c[1] - lightPoint[1]) / scDistance];

  494.                                     style(layer, { left: x + "px", top: y + "px" });
  495.                                     style(shadow, {
  496.                                             left: x + shadowOffset[0] * distanceZoom[0] * z - shadowDiffPos[0] * z + "px",
  497.                                             top: y + shadowOffset[1] * distanceZoom[1] * z - shadowDiffPos[1] * z + "px" });

  498.                                     alpha(shadow, a);
  499.                                     matrix(layer, cosr, sinr2, sinr3, cosr, "0 0");
  500.                                     matrix(shadow, cosr * shadowZoom, sinr2 * shadowZoom, sinr3 * shadowZoom, cosr * shadowZoom, "0 0");

  501.                                     last = [x, y];
  502.                                 }
  503.                         }();

  504.                         var playLastTicket = function(){
  505.                             var targetAngle = abs(360 - lastAngle) > lastAngle ? 0 : 360;
  506.                             // var index = 0, framesNum = 1e3;
  507.                             frame(function(rate){
  508.                                     // var index = round(rate * framesNum);
  509.                                     setTicket(
  510.                                             cubic(rate, lastPoint[0], endPoint[0] - lastPoint[0], 1),
  511.                                             cubic(rate, lastPoint[1], endPoint[1] - lastPoint[1], 1),
  512.                                             cubic(rate, lastZoom, 1 - lastZoom, 1),
  513.                                             cubic(rate, .33, -.33, 1),
  514.                                             cubic(rate, lastAngle, targetAngle - lastAngle, 1)
  515.                                     );
  516.                             }, 1200, 14).end(function(){
  517.                                 shadow.parentNode.removeChild(shadow);
  518.                                 tout(function(){
  519.                                         centerd = true;
  520.                                     ticket.turnOver(ticket.showLoadingBar);
  521.                                 }, 1e3);
  522.                             });
  523.                         };

  524.                         var playBezierPath = function(points, bezierIndex, z1, z2, callback){
  525.                                 // var framesNum = 1e3, angle = 0;
  526.                                 frame(function(rate){
  527.                                         // var index = round(rate * framesNum);
  528.                                            var pIndex = round(cubic(rate, 0, 299, 1));
  529.                                 var z = cubic(rate, z1, z2 - z1, 1);
  530.                                 var a = 1 - cubic(rate, bezierIndex * .33, .33, 1);
  531.                                 var p = lastPoint = points[pIndex], p1;
  532.                                      var r;

  533.                                      if(p1 = points[pIndex + 1])
  534.                                              lastAngle = r = (getAngleByRadian(pointToRadian(p, p1)) + (bezierIndex % 2 ? 0 : 180)) % 360;

  535.                             setTicket(p[0], p[1], z, a, r || lastAngle);
  536.                                 }, 1200, 14).end(callback);
  537.                         };

  538.                         var playPaths = function(index){
  539.                                 var points = referencePaths[index];
  540.                                 if(points){
  541.                                         // alert([keyPoints[index][2], keyPoints[index + 1][2]]);
  542.                                     playBezierPath(points, index, keyPoints[index][2], keyPoints[index + 1][2], function(){
  543.                                             playPaths(index + 1);
  544.                                         });
  545.                                 }else{
  546.                                     playLastTicket();
  547.                                 }
  548.                         };

  549.                         playPaths(0);

  550.                                addEvent(window, "resize", function(){
  551.                                        if(closeAll.status)return;
  552.                                 endPoint = [(de.clientWidth - dialogWidth) / 2 | 0,  (de.clientHeight - dialogHeight) / 2 | 0];
  553.                                 if(centerd)
  554.                                     style(layer, { left: endPoint[0] + "px", top: endPoint[1] + "px" });
  555.                         });
  556.                     },

  557.                     turnOver: function(end){
  558.                             var x = parseInt(layer.style.left);
  559.                             var y = parseInt(layer.style.top);

  560.                             turnOverX(layer, dialogWidth, dialogHeight, x, y, 150).center(function(){
  561.                                 // layer.src = baseURL + "blank.gif";
  562.                                 layer.style.backgroundPosition = "0 -260px";
  563.                             }).end(end);
  564.                     },

  565.                     showLoadingBar: function(){
  566.                             var loadingOffset = [125, ie ? 206 : 207];
  567.                         var textOffset = [77, 230];
  568.                         var joinButtonOffset = [449, 208];
  569.                         var closeButtonOffset = [574, 3];

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

  571.                         var loading = makeDom("div", body, ["=loading", { l: endPoint[0] + loadingOffset[0], t: endPoint[1] + loadingOffset[1] }], elQueue);
  572.                         var loadingBar = makeDom("div", loading, ["=loading-bar"], elQueue);
  573.                         var layer = makeDom("div", body, ["=text", { l: endPoint[0] + textOffset[0], t: endPoint[1] + textOffset[1] }], elQueue);
  574.                         var joinButton = makeDom("div", body, ["=join", { l: endPoint[0] + joinButtonOffset[0], t: endPoint[1] + joinButtonOffset[1] }], elQueue);
  575.                         var closeButton = makeDom("div", body, ["=close", { l: endPoint[0] + closeButtonOffset[0], t: endPoint[1] + closeButtonOffset[1] }], elQueue);

  576.                                addEvent(window, "resize", function(){
  577.                                        if(closeAll.status)return;
  578.                                 endPoint = [(de.clientWidth - dialogWidth) / 2 | 0,  (de.clientHeight - dialogHeight) / 2 | 0];
  579.                                 css(loading, { l: endPoint[0] + loadingOffset[0], t: endPoint[1] + loadingOffset[1] });
  580.                                 css(layer, { l: endPoint[0] + textOffset[0], t: endPoint[1] + textOffset[1] });
  581.                                 css(joinButton, { l: endPoint[0] + joinButtonOffset[0], t: endPoint[1] + joinButtonOffset[1] });
  582.                                 css(closeButton, { l: endPoint[0] + closeButtonOffset[0], t: endPoint[1] + closeButtonOffset[1] });
  583.                         });

  584.                         joinButton.onmouseover = function(){ this.style.backgroundPosition = "-687px -563px"; };
  585.                         joinButton.onmouseout = function(){ this.style.backgroundPosition = "-687px -521px"; };
  586.                         joinButton.onclick = function(){ open(activityUrl); };

  587.                         closeButton.onmouseover = function(){ this.style.backgroundPosition = "-650px -548px"; };
  588.                         closeButton.onmouseout = function(){ this.style.backgroundPosition = "-650px -521px"; };
  589.                         closeButton.onclick = function(){ closeAll(); };

  590.                         var formatNumber = function(number){
  591.                             return round(number).toString().replace(/(\d)(?=(\d{3})+$)/ig, "$1,");;
  592.                         };

  593.                         layer.innerHTML = template;

  594.                         var deliverer = doc.getElementById("deliverer-num");
  595.                         // var index = 0, framesNum = 60;
  596.                         // var interval = itv(function(){
  597.                         //     var number1 = linear(index, 0, nowNumber, framesNum);
  598.                         //     var number2 = exponential(index, 0, nowNumber, framesNum);
  599.                         //     deliverer.innerHTML = formatNumber(number2);
  600.                         //     loadingBar.style.width = round(number1 / targetNumber * 20) * 15 + "px";
  601.                         //     if(++ index > framesNum){
  602.                         //         clearInterval(interval);
  603.                         //         tout(function(){ chasm.healing(); }, 1e3);
  604.                         //     }
  605.                         // });
  606.                         frame(function(rate){
  607.                             var number1 = linear(rate, 0, nowNumber, 1);
  608.                             var number2 = exponential(rate, 0, nowNumber, 1);
  609.                             deliverer.innerHTML = formatNumber(number2);
  610.                             loadingBar.style.width = round(number1 / targetNumber * 20) * 15 + "px";
  611.                         }, 1200, 24).end(function(){
  612.                             tout(function(){ chasm.healing(); }, 1e3);
  613.                         });
  614.                     },

  615.                     dispose: function(){
  616.                                 for(var i = elQueue.length - 1; i >= 0; i --)
  617.                                         try{elQueue[i].parentNode.removeChild(elQueue[i]);}catch(e){}
  618.                     }
  619.             }
  620.         }();

  621.         // 关闭效果
  622.         var closeAll = function(){
  623.                 closeAll.status = 1;
  624.             chasm.dispose();
  625.             ticket.dispose();

  626.             for(var i = swapDoms.length - 1, s; i >= 0; i --){
  627.                     s = swapDoms[i];
  628.                     swapDom(s[0], s[1]);
  629.             }

  630.             resetOver();
  631.         };

  632.         /**
  633.          * 页面准备
  634.          */

  635.         try{
  636.                 ie && doc.execCommand("BackgroundImageCache", false, true);
  637.         }catch(e){};

  638.         var earthquakeLevel = 1;

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

  640.         earthquake.onQuake(function(left, top){
  641.                 // 地震的同时,掉落碎石
  642.             if(random(10) < earthquakeLevel)
  643.                     chip.create();
  644.             chasm.fixPos(left, top);
  645.         });

  646.         /**
  647.          * 主线业务
  648.          */

  649.         var nopScript = document.createElement("script");
  650.         nopScript.type = "text/javascript";
  651.         nopScript.src = nopUrl;
  652.         body.appendChild(nopScript);

  653.         var cimg = new Image();
  654.         cimg.src = baseURL + "ticket.jpg";

  655.         var imageLoader = new Image();
  656.         imageLoader.onload = function(){
  657.                 disOver();

  658.                 tout(function(){
  659.                         earthquake.start();
  660.                         chasm.prepare();
  661.                 }, 0);

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

  663.                 for(var i = 2; i < 8; i ++)
  664.                         tout(function(i){
  665.                             return function(){
  666.                                 earthquake.setLevel(earthquakeLevel = i);
  667.                                     chasm.setLevel(i);
  668.                             }
  669.                         }(i), i * 400);

  670.                 tout(function(){ earthquake.stop(); chasm.setLevel(8); }, 3500);
  671.                 tout(ticket.show, 4500);
  672.         }
  673.         imageLoader.src = baseURL + "all.png";

  674.         /**
  675.          * Tools
  676.          */
  677.         function itv(f, t){ return setInterval(f, t || time); }
  678.         function tout(f, t){ return setTimeout(f, t || time); }
  679.         function random(number){ return Math.random() * number | 0; }
  680.         function quadratic(index, offset, target, framesNum){ return target * (index /= framesNum) * index + offset; }

  681.         function disOver(){
  682.             de.style.overflowX = "hidden";
  683.         }

  684.         function resetOver(){
  685.             de.style.overflowX = "auto";
  686.         }

  687.         // 弧度转换为角度
  688.         function getAngleByRadian(radian){ return radian * 180 / Math.PI; }

  689.         // 根据 origin 计算 point 的方向,返回弧度值
  690.         function pointToRadian(origin, point){
  691.                 var PI = Math.PI;
  692.                 if (point[0] == origin[0]) {
  693.                         if (point[1] > origin[1])
  694.                                 return PI * 0.5;
  695.                         return PI * 1.5
  696.                 } else if (point[1] == origin[1]) {
  697.                         if (point[0] > origin[0])
  698.                                 return 0;
  699.                         return PI;
  700.                 }
  701.                 var t = Math.atan((origin[1] - point[1]) / (origin[0] - point[0]));
  702.                 if (point[0] > origin[0] && point[1] < origin[1])
  703.                         return t + 2 * PI;
  704.                 if (point[0] > origin[0] && point[1] > origin[1])
  705.                         return t;
  706.                 return t + PI; // 角度
  707.         }

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

  709.         /*
  710.          * 两点间距离
  711.          */
  712.         function distance(a, b){ return sqrt(pow(a[0] - b[0], 2) + pow(a[1] - b[1], 2)); }

  713.         function bezier(curve, rate){
  714.                 var cx = 3 * (curve[1][0] - curve[0][0])
  715.                         , bx = 3 * (curve[2][0] - curve[1][0]) - cx
  716.                         , ax = curve[3][0] - curve[0][0] - cx - bx
  717.                         , cy = 3 * (curve[1][1] - curve[0][1])
  718.                         , by = 3 * (curve[2][1] - curve[1][1]) - cy
  719.                         , ay = curve[3][1] - curve[0][1] - cy - by;
  720.                 return [ax * pow(rate, 3) + bx * pow(rate, 2) + cx * rate + curve[0][0],
  721.                         ay * pow(rate, 3) + by * pow(rate, 2) + cy * rate + curve[0][1]];
  722.         }

  723.         // 等距
  724.         function bezierPoints(curve, count){
  725.                 if (count < 2) return;
  726.                 var len = curveLength(curve);
  727.                 var points = [];
  728.                 // 计算曲线上点的信息
  729.                 points[0] = {
  730.                         p: curve[0],
  731.                         t: 0,
  732.                         l: 0
  733.                 };
  734.                 for (var i = 1; i <= len; i++){
  735.                         var t = i / len,
  736.                                 p = bezier(curve, t),
  737.                                 l = points[i - 1].l + distance(p, points[i - 1].p);
  738.                         points[i] = {
  739.                                 i: i,
  740.                                 p: p,
  741.                                 t: t,
  742.                                 l: l
  743.                         }
  744.                 }
  745.                 var max = points[len].l; // 曲线总长度
  746.                 var result = [];
  747.                 var t = 0;
  748.                 for (var i = 0; i <= count; i++){
  749.                         var tl = max * (i / (count - 1));
  750.                         for (var j = t; j < points.length; j++){
  751.                                 var point = points[j]
  752.                                 if (point.l >= tl){
  753.                                         t = j;
  754.                                         result.push(point.p);
  755.                                         break;
  756.                                 }
  757.                         }
  758.                 }
  759.                 return result;
  760.         }

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

  762.         function cubic(index, offset, target, framesNum){
  763.                 if((index /= framesNum / 2) < 1)
  764.                         return target / 2 * index * index * index + offset;
  765.                 else
  766.                         return target / 2 * ((index -= 2) * index * index + 2) + offset;
  767.         }

  768.         function exponential(index, offset, target, framesNum){
  769.                 if(index == 0)
  770.                         return offset;
  771.                 else if(index == framesNum)
  772.                         return offset + target;
  773.                 else if((index /= framesNum / 2) < 1)
  774.                         return target / 2 * Math.pow(2, 10 * (index - 1)) + offset;
  775.                 else
  776.                         return target / 2 * (-Math.pow(2, -10 * -- index) + 2) + offset;
  777.         }
  778. }(window);
复制代码
末日彩蛋效果JS源码.txt (29.4 KB, 下载次数: 184)
回复 支持 反对

使用道具 举报

发表于 2012-4-21 21:15:32 | 显示全部楼层
楼主,真是速度。代码还是未经过压缩的。给力。
回复 支持 反对

使用道具 举报

发表于 2012-4-21 22:23:21 | 显示全部楼层
哇 强悍啊  mark一下
回复 支持 反对

使用道具 举报

发表于 2012-4-21 23:43:15 | 显示全部楼层
速度真快就拿出来分享了
回复 支持 反对

使用道具 举报

发表于 2012-4-22 11:37:02 | 显示全部楼层
好震撼的活动啊
回复 支持 反对

使用道具 举报

发表于 2012-4-22 13:19:27 | 显示全部楼层
感谢分享
回复 支持 反对

使用道具 举报

发表于 2012-4-23 09:41:51 | 显示全部楼层
楼主真给力,谢谢分享。学习了
回复 支持 反对

使用道具 举报

发表于 2012-4-23 10:56:15 | 显示全部楼层
楼主太强了,代码没有压缩,学习了,谢谢分享
回复 支持 反对

使用道具 举报

发表于 2012-4-23 11:23:25 | 显示全部楼层
不错,感谢分享
回复 支持 反对

使用道具 举报

发表于 2012-4-23 13:12:17 | 显示全部楼层
谢谢分享,mark
回复 支持 反对

使用道具 举报

发表于 2012-4-23 21:21:17 | 显示全部楼层
是从百度页面挖出来的吗?
回复 支持 反对

使用道具 举报

发表于 2012-4-24 08:20:12 | 显示全部楼层
强悍的 膜拜 震撼
回复 支持 反对

使用道具 举报

发表于 2012-5-3 09:15:26 | 显示全部楼层
楼主好强!
回复 支持 反对

使用道具 举报

发表于 2012-5-3 09:20:33 | 显示全部楼层
好东东  谢谢 Lz 分享  
回复 支持 反对

使用道具 举报

发表于 2012-5-3 09:29:03 | 显示全部楼层
厉害的东东,牛逼的银们。
回复 支持 反对

使用道具 举报

发表于 2012-5-3 10:33:51 | 显示全部楼层
现在都喜欢跟gg玩这些效果。
回复 支持 反对

使用道具 举报

发表于 2012-5-3 11:17:28 | 显示全部楼层
不错不错,好强悍的效果
回复 支持 反对

使用道具 举报

发表于 2012-5-3 12:34:16 | 显示全部楼层
加分加分。
回复 支持 反对

使用道具 举报

发表于 2012-5-3 14:29:56 | 显示全部楼层
很厉害的效果   支持支持
回复 支持 反对

使用道具 举报

发表于 2012-5-3 15:01:07 | 显示全部楼层
这个不错 还是第一次看到
回复 支持 反对

使用道具 举报

发表于 2012-5-4 09:50:54 | 显示全部楼层
  酷 没的说了....
回复 支持 反对

使用道具 举报

发表于 2012-5-4 11:39:49 | 显示全部楼层
楼主强悍  ~~~~~~~~~~~~~
回复 支持 反对

使用道具 举报

发表于 2012-5-4 13:31:13 | 显示全部楼层
这个做的还真不错,呵呵·
回复 支持 反对

使用道具 举报

发表于 2012-5-4 14:17:45 | 显示全部楼层
谢谢  分享    学习了
回复 支持 反对

使用道具 举报

发表于 2012-5-9 17:00:10 | 显示全部楼层
嘿嘿  前几天刚刚在百度看到  神速啊
回复 支持 反对

使用道具 举报

发表于 2012-5-11 17:11:43 | 显示全部楼层
nealyo 发表于 2012-5-4 10:48
附上末日菜单效果的JS源码

这个js相当给力
回复 支持 反对

使用道具 举报

发表于 2012-5-11 20:10:44 | 显示全部楼层
好东西,俺也拷一份起来,谢谢分享
回复 支持 反对

使用道具 举报

发表于 2012-5-12 10:55:31 | 显示全部楼层
                     !!!
回复 支持 反对

使用道具 举报

发表于 2012-6-6 11:04:08 | 显示全部楼层


太强大了!   
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-9-25 12:33 , Processed in 0.140273 second(s), 12 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表