Shulou(Shulou.com)06/02 Report--

This article mainly introduces JavaScript how to achieve mouse trailing special effects, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

After reading this, just make sure you have hands and make all kinds of beautiful little tails!

The whole code is as follows, which can be easily understood by the comments.

Title / * div style * / # main {width: auto;height: 1500pxbot margin: 0politics backgroundcolor: black;} / / = Mouse planet tail JS code = / / = function: get the current mouse coordinate = function getMousePosition (event) {var x = 0Trachap x coordinate var y = 0 The / / y coordinate / / documentElement returns the document element of a document. Doc = document.documentElement; / / body returns the body element of the document body = document.body; / / resolve compatibility if (! event) event = window.event; / / resolve the difference between the mouse wheel and the relative coordinates / / pageYoffset is Netscape-specific if (window.pageYoffset) {x = window.pageXOffset; y = window.pageYOffset } else {/ / other browser mouse scrolling x = (doc & & doc.scrollLeft | | body & & body.scrollLeft | | 0)-(doc & & doc.clientLeft | | body & & body.clientLeft | | 0); y = (doc & & doc.scrollTop | | body & & body.scrollTop | | 0)-(doc & & doc.clientTop | | body & & body.clientTop | | 0) } / / the x obtained by the mouse pointer to the horizontal coordinate x + = event.clientX; / / for the browser page (or client area) when the event is triggered plus the vertical coordinate y + = event.clientY for the browser page (or client area) when the event is triggered / / return x and y return {"x": X, "y": y};} / / = function: get the coordinates of the current mouse = / / = generate a random number from minNum to maxNum = function randomNum (minNum,maxNum) {switch (arguments.length) {case 1: return parseInt (Math.random () * minNum+1,10) Case 2: return parseInt (Math.random () * (maxNum-minNum+1) + minNum,10); default: return 0 }} / / = generate a random number from minNum to maxNum = / / = bind a mouse movement event to the entire document = _ document.onmousemove = function (event) {/ / create a tag on the page, (here create a custom tag styleImg) var styleImg = document.createElement ("div") / / get the random number 1-5, and set the style of the label var r = randomNum according to the random number; switch (r) {case 1: / / set the path of the image, which can be changed to different styles styleImg [XSS _ clean] = "

"break; case 2: styleImg [XSS _ clean] ="

"break; case 3: styleImg [XSS _ clean] ="

"break; case 4: styleImg [XSS _ clean] ="

"break; case 5: styleImg [XSS _ clean] ="

"break;} / / because you want to animate, set left and top, you must set the initial position of the positioning styleImg.style.position = 'absolute' / / set the label, that is, the current position of the mouse var x = getMousePosition (event) .x; var y = getMousePosition (event). Y / / set the coordinates of styleImg styleImg.style.top = y + "px"; styleImg.style.left = x + "px"; / / bind testDiv to the area where the current mouse tail takes effect var testDiv = document.getElementById ("main"); / / add the newly created tag to the body tag of the page testDiv.appendChild (styleImg) / / if there is an excess in the document, it will not be displayed, so bind to the div of the page as much as possible / / set overflow hiding, in order to prevent the mouse from triggering the upper and lower scroll bar testDiv.style.overflow = 'hidden'; / / var count = 0 when the mouse moves. / / the setInterval () method can call the function or evaluate the expression var time = setInterval (function () {/ /) according to the specified period (in milliseconds) to set the timer so that each generated tag modifies the corresponding transparency count + = 5; styleImg.style.opacity = (100-count) / 100 within the specified period }, 30) / / setTimeout () method is used to call a function or evaluate an expression after a specified number of milliseconds. / / set the delay timer, clear the timer above after a certain period of time, so that the created tag no longer changes setTimeout (function () {/ / use clearInterval () to stop the execution of the setInterval function clearInterval (time); / / delete the created tag testDiv.removeChild (styleImg);}, 250)}

Ps: the above code is typed by itself after referring to many different literatures, and does not write a blog for VC!

Finally, I will give you the picture material, as long as you make a simple modification in the above code, you can achieve other styles of small tail.

Thank you for reading this article carefully. I hope the article "how to achieve mouse trailing special effects" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.