jQuery page style mouse movement

 

　　Park to blog a month, send a blog about the memorial, read a lot of good articles in the blog garden, learned a lot in the future, I will send some technical articles or essays, hoping to help you.

　　This is a special effects to beautify the page, move your mouse on the page, will leave a symbol, the symbol can be changed

　　css section:

<style>
        * {
            margin: 0;
            padding: 0;
        }

        #container {
            width: 800px;
            height: 500px;
            margin: 0 auto;
            position: relative;
            background-color: black;
        }

        .line {
            position: absolute;
            cursor: default;
        }

        .lineS {
            font-size: 1px;
            opacity: 0;
            border-radius: 2.5px;
            position: absolute;
            transition:1s;
            position: absolute;
            cursor: default;
        }
    </style>

　　html code:

    <div id="container">

    </div>

　　jq:

<Script> 
    // Note:! ! p tag must be absolute positioning, or set the display location will not work, 
    // adapter browser width and height 
$ ( '# Container'). width ($ (window) .width ()) 
$ ( '# Container'). height ($ (window) .height ()) 

    var container = $ ( '# container'); // Get the container 
    . var divLeft = $ (container) .offset () left // obtain the distance from the left side of the container 
    var divTop . = $ (container) .offset ( ) top // obtain the distance from the top of the container 
    var timer; // a timer, change the style of p 
    var timer2; // timer two, and recovering the resulting p 
    // array of symbols 
    var shape = [ '♥', ' ♫', '❤', '✿', '❉', '♣', '☀', '☺', '◐', '☑', '√', '×' , '☒', '☹' , '☾', '☀', '▂', '▃', '▅', '♫', '§', ' 〼', '¤', '۞ ', ' ℗ ',' ℗ ',
        var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft; // Get the distance from the left side of the current navigation 
        var scrollY = document.documentElement.scrollTop || document.body.scrollTop; // Get the top navigation bar distance distance 
        
        // Get the current mouse position in the container 
        var x = event.clientX + scrollX - divLeft ; // mouse visual position x - x from the navigation - position of the container from the left side of 
        var y = event.clientY + scrollY - divTop; // supra, x becomes Y 
        
        // generate random colors red blue and green 
        var red = the parseInt (Math.random () * 257) .toString (16); 
        var Blue = the parseInt (Math.random () * 257 ) .toString (16); 
        var Green = the parseInt (Math.random () * 257) .toString (16); 
        var Color = '#' + Red + Green + Blue; 
        // generate random font size  
        var size = (Math .random () * (30-1 + 1 ) +1) + 'px'
        // random sign
        shapeInedx the parseInt = var (Math.random () * (+ 1-0-shape.length. 1) +0) 
        // P label bound text 
        var p = '<p class = "line">' + shape [shapeInedx ] + '</ p>' 
        // p tag provided random symbol color and font style of size, the display position of the p-tag, and inserted into the container 
        $ (container) .append ($ ( p) .css ({ 
            "Color": Color, 
            "font-size": size 
        .}) offset ({ 
            Top: Y, 
            left: X 
        })) 

        // wait 10 milliseconds after performing 
        the setTimeout (() => { 
            Timer = the setInterval (Vanish () , 1000) // vanish performed once every 1s method, 
        }, 10); 

        // p recovery mechanism  
        setTimeout (() => {
            timer2 = setInterval (removeDom (), 3000) // delete method performed every 3s 
        },1000);
      
    })
 
    // Transform method style 
    function Vanish () { 
        var PLINE = $ ( 'Line.') [0]; // every times to get the first element of style for initial p 
        $ (pLine) .removeClass ( 'line ') // delete style 
        $ (pLine) .addClass ( 'lineS ') // fill style 

        if (pLine == undefined) {// the page there is no initial determination style label, and if not, remove Timer 
            the clearInterval (Timer) 
        } 
    } 

    // remove elements of methods 
    function removeDom () { 
        var PLINE = $ ( 'LineS.') [0]; / / get the first p element of style for LineS 
        $ (pLine) .remove () // delete 
    } 
</ Script>

　Copy and paste the code can be directly used without packaging, are interested can play with !!!, there are deficiencies can comment, will improve the future will often release some of their own research or js jq small effects, there will be some technical articles mainly .net, and something the front, hoping to help to you