Click on the floating text effect

Manifest. json Google plug-in configuration file index.js configuration file imported js index.css configuration file imported CSS

The configuration file is as follows
{
    "manifest_version": 2."name": "chome-plugin"."version": "2"."description": "This is an extension for your chrome"."content_scripts": [ // Configure the script
        {
          "js": ["index.js"]."css": ["index.css"]."matches": ["<all_urls>"] // Application pages Here represent all pages}}]Copy the code
Index. The js script
window.addEventListener('click',callback())
function callback() {
    var divList = []
    var fonts = ['new'.'years'.'fast'.'music']
    var i = 0
    var colors = ['red'.'blue'.'green'.'yellow']
    return function(e) {
        var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
        var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
        var div = createTag()
        divList.push(div)
        div.style.top = e.clientY+ scrollY + 'px'
        div.style.left = e.clientX+ scrollX + 'px'
        div.style.color = colors[i]
        div.innerText=fonts[i]
        i++
        if(i>3) {
            i=0
        }
        document.body.appendChild(div)
        setTimeout(function(){
            document.body.removeChild(div)
        }, 1000 * 10)}}// Create a float label
function createTag() {
    var div = document.createElement('div')
    div.classList.add('animation')
    return div
}
Copy the code
css
.animation{
    position: absolute;
    animation: move 10s linear;
    font-size: 20px;
}
@keyframes move{
    0% {transform: translate(0px.0px); }100% {transform: translate(0px, -200px);}
}
Copy the code