点击冒出文字泡泡

免责声明

不介绍具体的脚本代码, 因为我还不会写JavaScript, 只介绍一些代码上的改动, 从而实现一些自定义的功能. 初始代码系网上摘抄, 侵删.

---

背景

此脚本作为Chrome浏览器下插件Tampermonkey(油猴)的脚本. 是用JavaScript写的. 不知道油猴的请先百度一下, 这是一个有趣的平台

---

展示

先展示一下它的画面吧, 如图是在谷歌和百度页面上的连续点击. (点击一次只会冒出一个词哦)
注意看左边部分.

注意看中间部分(今天是国庆哦, 69年建国庆)

原始功能

我把这个功能叫做点击冒出文字泡泡, 这些泡泡在点击处出现, 然后上升, 然后渐渐消失不见. 我觉得还是挺有意思的, 特别是自定义了冒出的字之后.

原始的字为社会注意核心价值观, 旨在让我们在浏览网页时弹出价值观从而实现更好的自我精神升华, 在潜移默化中成为一个价值观正确的社会好儿童/少年/青年/中年/老年.

上面展示的两张图片是已经自定义了的. 详情请看下面介绍.

---

自定义功能

既然要玩当然得自定义了.

1. 自定义词语内容

博主把社会主义核心价值观全部都替换成了博主喜欢看的小说的一些人物, 设定之类的, 增添了浏览网页时的乐趣, 简直妙不可言. 大家也可以自定义.

设置词语的代码是这一块:

    var coreSocialistValues = ["\u59EC\u5C0F\u91CE", "\u767D\u53D1\u6284", "\u7FBD\u5C0F\u7136", "\u6613\u5C0F\u5189", "\u5415\u5C0F\u5C18", "\u8352\u5929\u5E1D",
                               "\u542C\u96EA\u697C", "\u9F99\u5C0F\u8944", "\u5929\u9A71","\u8FB0\u6708", "\u82CF\u664B\u5B89", "\u897F\u5C0F\u9759", "\u9F0E\u5251\u9601"],

这个数组的每个元素都是一个词语, 用Unicode编码的, 因此, 我们只要找到我们要替换的每个字的Unicode编码替换上去就可以了.

推荐一个查找字符编码的网站: 千千秀字

2. 自定义颜色

每个字显示的颜色也是可以自定义的, 它的代码块是这个地方

       span.style.cssText = ['z-index: 9999999; position: absolute; font-size: 14px; font-weight: bold; color: #3333ff; top: ', y - 20, 'px; left: ', x, 'px;'].join('');

看见键值为color的键值对了吗? 它的值#3333ff是蓝色的十六进制编码.
在这里, 可以用颜色对应的十六进制编码表示, 也可以用内置的颜色字符来表示, 如blue, red

仅仅是替换我们想要的颜色还不够哦, 我们得想方法让它每点击一次就换一种颜色, 因此我给它设置了一个随机.

添加了下面几行代码:

        var col = ['aqua', 'black', 'blue', 'fuchsia', 'gray', 'green', 'lime', 'maroon', 'navy', 'olive', 'orange', 'purple', 'red', 'silver', 'teal', 'white', 'yellow']
        Math.seed = 1999
        var r = Math.floor(Math.random()*col.length)
        span.style.color = col[r];

col数组里面的元素是17种标准色.
Math.seed是设置随机种子, 虽然在此代码中不设置也是可以的.
r的值是随机化区间[0, 17)的某个值. Math.random()返回[0, 1)的某个小数, 它乘以col数组的长度就得到了区间[0, 17)的某个随机值, 不过还是小数, 我们用Math.floor()函数对其进行向下取整.

就这样, 我们每次点击都是这17种标准色中的某一个颜色啦.

参考:

1. 随机值 2. 随机种子 3. CSS颜色名

3. 自定义消失速度

下面这行代码可以自定义消失速度, 大家可以测试一下选择一个较好的速度

            id = setInterval(frame, 16.7);  // 16.7 为消失速度

4. 字体大小

       span.style.cssText = ['z-index: 9999999; position: absolute; font-size: 14px; font-weight: bold; color: #3333ff; top: ', y - 20, 'px; left: ', x, 'px;'].join('');

这行代码中, font-size为字体的大小. 同样, 我们可以用上面随机化的方法, 给字体做随机的微调, 让它更有趣.

比如

        var font = ['12px', '13px', '14px', '15px', '16px']
        var f = Math.floor(Math.random()*font.length)
        span.style.fontSize = font[f]

发现的一个问题是, 在cssText中, 字体大小键值为font-size, 但在外部修改不能使用-符号, 而是用fontSize来表示.

参考:
CSS font-size 属性

---

代码

我的点击冒出泡泡完整代码

// ==UserScript==
// @name         点击冒出泡泡
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  在点击鼠标左键时冒出文字泡泡, 嗯, 我把它叫做泡泡.
// @author       姬小野
// @include      http://*
// @include      file:/*
// @include      https://*
// @grant        none
// @run-at       document-idle
// ==/UserScript==

(function () {
    'use strict';
    var coreSocialistValues = ["\u59EC\u5C0F\u91CE", "\u767D\u53D1\u6284", "\u7FBD\u5C0F\u7136", "\u6613\u5C0F\u5189", "\u5415\u5C0F\u5C18", "\u8352\u5929\u5E1D",
                               "\u542C\u96EA\u697C", "\u9F99\u5C0F\u8944", "\u5929\u9A71","\u8FB0\u6708", "\u82CF\u664B\u5B89", "\u897F\u5C0F\u9759", "\u9F0E\u5251\u9601"],
        index = Math.floor(Math.random() * coreSocialistValues.length);
    document.body.addEventListener('click', function (e) {
        if (e.target.tagName == 'A') {
            return;
        }
        var x = e.pageX,
            y = e.pageY,
            span = document.createElement('span');
        span.textContent = coreSocialistValues[index];
        index = (index + 1) % coreSocialistValues.length;
        span.style.cssText = ['z-index: 9999999; position: absolute; font-size: 104px; font-weight: bold; color: #3333ff; top: ', y - 20, 'px; left: ', x, 'px;'].join('');
        var col = ['aqua', 'black', 'blue', 'fuchsia', 'gray', 'green', 'lime', 'maroon', 'navy', 'olive', 'orange', 'purple', 'red', 'silver', 'teal', 'white', 'yellow']
        Math.seed = 1999
        var r = Math.floor(Math.random()*col.length)
        span.style.color = col[r];
        var font = ['12px', '13px', '14px', '15px', '16px']
        var f = Math.floor(Math.random()*font.length)
        span.style.fontSize = font[f]
        document.body.appendChild(span);
       animate(span);
    });

    function animate(el) {
        var i = 0,
            top = parseInt(el.style.top),
            id = setInterval(frame, 16.7); // 消失速度,原来是16.7

        function frame() {
            if (i > 180) {
                clearInterval(id);
                el.parentNode.removeChild(el);
            } else {
                i += 2;
                el.style.top = top - i + 'px';
                el.style.opacity = (180 - i) / 180;
            }
        }
    }
})();

读者可在油猴编辑脚本处将其复制粘贴上去.
此处

社会主义核心价值观-点击提醒 原始代码

// ==UserScript==
// @name         社会主义核心价值观 - 点击时提醒
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  社会主义核心价值观 在你每次点击时飘出并提示！
// @author       Cody
// @include      http://*
// @include      https://*
// @grant        none
// @run-at       document-idle
// ==/UserScript==

(function () {
    'use strict';
    var coreSocialistValues = ["\u5bcc\u5f3a", "\u6c11\u4e3b", "\u6587\u660e", "\u548c\u8c10", "\u81ea\u7531", "\u5e73\u7b49", "\u516c\u6b63" ,"\u6cd5\u6cbb", "\u7231\u56fd", "\u656c\u4e1a", "\u8bda\u4fe1", "\u53cb\u5584"],
        index = Math.floor(Math.random() * coreSocialistValues.length);
    document.body.addEventListener('click', function (e) {
        if (e.target.tagName == 'A') {
            return;
        }
        var x = e.pageX,
            y = e.pageY,
            span = document.createElement('span');
        span.textContent = coreSocialistValues[index];
        index = (index + 1) % coreSocialistValues.length;
        span.style.cssText = ['z-index: 9999999; position: absolute; font-size: 14px; font-weight: bold; color: red; top: ', y - 20, 'px; left: ', x, 'px;'].join('');
        document.body.appendChild(span);
       animate(span);
    });

    function animate(el) {
        var i = 0,
            top = parseInt(el.style.top),
            id = setInterval(frame, 16.7);

        function frame() {
            if (i > 180) {
                clearInterval(id);
                el.parentNode.removeChild(el);
            } else {
                i += 2;
                el.style.top = top - i + 'px';
                el.style.opacity = (180 - i) / 180;
            }
        }
    }
})();