你的位置: iPc 首页 > 全部文章 > 创意新鲜 > 阅读文章
科学X网    Office    苹果中国    微软中国    VPS

这文章太扯淡简直碍你眼了?那就立刻炸飞它!

09
七月

网络浩瀚,文章无数。互联网就像个巨大的信息金矿,无数的网民混迹其中,寻找信息。但正所谓林子大了,什么鸟都有,再大的金矿里也不可能遍地黄金——在互联网上,必然存在着好的信息和坏的信息。而这个好与不好的标准,坏与不坏的定义,在大多数情况下,都将由电脑前的那个人——你,来判定……

网页文字炸弹

当你在网站上读到一篇你觉得很差劲的文章,该怎么办?骂娘?这可不太好,说不定会引起骂战。所谓“君子动手不动口”,近日,我们发现了一颗“文字炸弹”,用了它,你就能一泄心头之恨。

网页文字炸弹

这颗“炸弹”就藏身在 fontBomb 这个网站里。该网站运用了 Html 5、Javascript 以及 CSS 技术来实现这种效果。埋下炸弹后,随处点击鼠标,就会有 3 秒的倒数计时,接着,炸弹周围的文字就会被炸飞。进入该网站,你就可以立即体验这种神奇的效果。如果你想在其它网页埋设文字炸弹,也非常简单,只需根据提示,把橙色的“fontBomb”链接拖拽到你的书签栏,当你浏览其它网页时,点击该书签,炸弹就埋设下来了。

如果你觉得这篇新闻实在太逊,那么不用客气,马上用它把这篇文章炸飞吧!

关于本文
各种回音
  1. 说: 回复他/她

    哇哦,我的沙发~~~~~~

    • 说:

      都没看正文,就来抢沙发了——————————写于8小时前

    • 说:

      然后顺手就拿这篇文章实践,结果~~~~~
      幸好没波及到寻羽MM

    • 说:

      关于时间的那个问题,跟某X反映了。十分感谢……

  2. 说: 回复他/她

    收藏收藏,挺有意思。

  3. 说: 回复他/她

    我只看了图片

  4. 说: 回复他/她

    哈哈,今天才发现IPC最上面那个是图标~

  5. 说: 回复他/她

    一个不小心把ipc炸掉了 – -!

  6. 说: 回复他/她

    opera不行~IE行~

  7. 说: 回复他/她

    效果还行

  8. 说: 回复他/她

    关键代码


    (function() {
    var Bomb, Explosion, Particle, targetTime, vendor, w, _i, _len, _ref,
    __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };

    w = window;

    _ref = [‘ms’, ‘moz’, ‘webkit’, ‘o’];
    for (_i = 0, _len = _ref.length; _i 1.5) {
    this.velocityX -= 1.5;
    } else if (this.velocityX 1.5) {
    this.velocityY -= 1.5;
    } else if (this.velocityY 50) force = 50;
    rad = Math.asin(distYS / distanceWithBlast);
    forceY = Math.sin(rad) * force * (distY < 0 ? -1 : 1);
    forceX = Math.cos(rad) * force * (distX 1 || Math.abs(previousStateY – this.transformY) > 1 || Math.abs(previousRotation – this.transformRotation) > 1) && ((this.transformX > 1 || this.transformX 1 || this.transformY 0) {
    return setTimeout(this.countDown, 1000);
    } else {
    return this.explose();
    }
    };

    Bomb.prototype.explose = function() {
    this.bomb.innerHTML = ”;
    return this.state = ‘explose’;
    };

    Bomb.prototype.exploded = function() {
    this.state = ‘exploded’;
    this.bomb.innerHTML = ”;
    this.bomb.style[‘fontSize’] = ’12px’;
    return this.bomb.style[‘opacity’] = 0.05;
    };

    return Bomb;

    })();

    this.Bomb = Bomb;

    Explosion = (function() {

    function Explosion() {
    this.tick = __bind(this.tick, this);
    this.dropBomb = __bind(this.dropBomb, this);
    var char, confirmation, style, _ref2,
    _this = this;
    if (window.FONTBOMB_LOADED) return;
    window.FONTBOMB_LOADED = true;
    if (!window.FONTBOMB_HIDE_CONFIRMATION) confirmation = true;
    this.bombs = [];
    this.body = document.getElementsByTagName(“body”)[0];
    if ((_ref2 = this.body) != null) {
    _ref2.onclick = function(event) {
    return _this.dropBomb(event);
    };
    }
    this.body.addEventListener(“touchstart”, function(event) {
    return _this.touchEvent = event;
    });
    this.body.addEventListener(“touchmove”, function(event) {
    _this.touchMoveCount || (_this.touchMoveCount = 0);
    return _this.touchMoveCount++;
    });
    this.body.addEventListener(“touchend”, function(event) {
    if (_this.touchMoveCount < 3) _this.dropBomb(_this.touchEvent);
    return _this.touchMoveCount = 0;
    });
    this.explosifyNodes(this.body.childNodes);
    this.chars = (function() {
    var _j, _len2, _ref3, _results;
    _ref3 = document.getElementsByTagName('particle');
    _results = [];
    for (_j = 0, _len2 = _ref3.length; _j < _len2; _j++) {
    char = _ref3[_j];
    _results.push(new Particle(char, this.body));
    }
    return _results;
    }).call(this);
    this.tick();
    if (confirmation != null) {
    style = document.createElement('style');
    style.innerHTML = "div#fontBombConfirmation {\n position: absolute;\n top: -200px;\n left: 0px;\n right: 0px;\n bottom: none;\n width: 100%;\n padding: 18px;\n margin: 0px;\n background: #e8e8e8;\n text-align: center;\n font-size: 14px;\n line-height: 14px;\n font-family: verdana, sans-serif;\n color: #000;\n -webkit-transition: all 1s ease-in-out;\n -moz-transition: all 1s ease-in-out;\n -o-transition: all 1s ease-in-out;\n -ms-transition: all 1s ease-in-out;\n transition: all 1s ease-in-out;\n -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.20);\n -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.20);\n box-shadow: 0px 3px 3px rgba(0,0,0,0.20);\n z-index: 100000002;\n}\ndiv#fontBombConfirmation span {\n color: #fe3a1a;\n}\ndiv#fontBombConfirmation.show {\n top:0px;\n display:block;\n}";
    document.head.appendChild(style);
    this.confirmation = document.createElement("div");
    this.confirmation.id = 'fontBombConfirmation';
    this.confirmation.innerHTML = "fontBomb loaded! Click anywhere to destroy ” + (document.title.substring(0, 50));
    this.body.appendChild(this.confirmation);
    setTimeout(function() {
    return _this.confirmation.className = ‘show’;
    }, 10);
    setTimeout(function() {
    return _this.confirmation.className = ”;
    }, 5000);
    }
    }

    Explosion.prototype.explosifyNodes = function(nodes) {
    var node, _j, _len2, _results;
    _results = [];
    for (_j = 0, _len2 = nodes.length; _j < _len2; _j++) {
    node = nodes[_j];
    _results.push(this.explosifyNode(node));
    }
    return _results;
    };

    Explosion.prototype.explosifyNode = function(node) {
    var newNode;
    switch (node.nodeType) {
    case 1:
    return this.explosifyNodes(node.childNodes);
    case 3:
    if (!/^\s*$/.test(node.nodeValue)) {
    if (node.parentNode.childNodes.length === 1) {
    return node.parentNode.innerHTML = this.explosifyText(node.nodeValue);
    } else {
    newNode = document.createElement("particles");
    newNode.innerHTML = this.explosifyText(node.nodeValue);
    return node.parentNode.replaceChild(newNode, node);
    }
    }
    }
    };

    Explosion.prototype.explosifyText = function(string) {
    var char, chars, index;
    chars = (function() {
    var _len2, _ref2, _results;
    _ref2 = string.split('');
    _results = [];
    for (index = 0, _len2 = _ref2.length; index < _len2; index++) {
    char = _ref2[index];
    if (!/^\s*$/.test(char)) {
    _results.push("” + char + “”);
    } else {
    _results.push(‘ ‘);
    }
    }
    return _results;
    })();
    chars = chars.join(”);
    chars = (function() {
    var _len2, _ref2, _results;
    _ref2 = chars.split(‘ ‘);
    _results = [];
    for (index = 0, _len2 = _ref2.length; index < _len2; index++) {
    char = _ref2[index];
    if (!/^\s*$/.test(char)) {
    _results.push("” + char + “”);
    } else {
    _results.push(char);
    }
    }
    return _results;
    })();
    return chars.join(‘ ‘);
    };

    Explosion.prototype.dropBomb = function(event) {
    var pos;
    pos = window.findClickPos(event);
    return this.bombs.push(new Bomb(pos.x, pos.y));
    };

    Explosion.prototype.tick = function() {
    var bomb, char, _j, _k, _l, _len2, _len3, _len4, _ref2, _ref3, _ref4;
    _ref2 = this.bombs;
    for (_j = 0, _len2 = _ref2.length; _j < _len2; _j++) {
    bomb = _ref2[_j];
    if (bomb.state === 'explose') {
    bomb.exploded();
    this.blast = bomb.pos;
    }
    }
    if (this.blast != null) {
    _ref3 = this.chars;
    for (_k = 0, _len3 = _ref3.length; _k < _len3; _k++) {
    char = _ref3[_k];
    char.tick(this.blast);
    }
    this.blast = null;
    } else {
    _ref4 = this.chars;
    for (_l = 0, _len4 = _ref4.length; _l < _len4; _l++) {
    char = _ref4[_l];
    char.tick();
    }
    }
    return requestAnimationFrame(this.tick);
    };

    return Explosion;

    })();

    new Explosion();

    }).call(this);

  9. 说: 回复他/她

    我只是娱乐党

  10. 说: 回复他/她

    图片炸不了、

  11. 说: 回复他/她

    炸弹的图片从哪里找的啊,原文没有的啊,貌似是塞尔达传说里的吧,楼主是怎么联想到的啊

  12. 说: 回复他/她

    好吧,我承认我把这一页给炸的体无完肤了

  13. 说: 回复他/她

    太有意思啦~~

  14. 说: 回复他/她

    有点意思

  15. 说: 回复他/她

    好玩