浏览网页特效
当前为
// ==UserScript==
// @name 彩色滑动特效
// @namespace http://tampermonkey.net/
// @version 0.1
// @description 浏览网页特效
// @author You
// @match *://*/*
// @icon https://www.google.com/s2/favicons?domain=greasyfork.org
// @grant none
// ==/UserScript==
(function() {
const mydiv = document.createElement('div')
mydiv.style.width = 100 + "vw"
mydiv.style.height = 100 + "vh"
mydiv.style.position = "fixed"
mydiv.style.top = 0 +'px'
mydiv.style.left = 0 +'px'
mydiv.style.right = 0 +'px'
mydiv.style.bottom = 0 +'px'
mydiv.style.pointerEvents = "none"
mydiv.style.zIndex = "1000"
document.body.appendChild(mydiv)
const canvas = document.createElement('canvas')
canvas.className ="canvas"
canvas.setAttribute("width",document.body.clientWidth)
canvas.setAttribute("height",720)
canvas.style.position = "absolute"
canvas.style.top = 0 +'px'
canvas.style.left = 0 +'px'
canvas.style.right = 0 +'px'
canvas.style.bottom = 0 +'px'
canvas.style.zIndex = "2000"
canvas.style.pointerEvents = "none"
mydiv.appendChild(canvas)
var arr = []
const ctx = canvas.getContext('2d')
document.addEventListener('mousemove',function(e) {
new dot(e.clientX,e.clientY,2,0,-1)
new dot(e.clientX,e.clientY,2,0,1)
})
function getColor() {
var colorarr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f']
var color = "#"
for (var i = 0; i < 6; i++) {
color += colorarr[Math.floor(Math.random() * colorarr.length)]
}
return color
}
function dot(x,y,r,dx,dy) {
this._x = x,
this._y = y,
this.x = x
this.y = y,
this.r = r,
this.dx = dx,
this.dy = dy,
this.color = getColor(),
arr.push(this)
}
dot.prototype.render = function() {
ctx.beginPath()
ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false)
ctx.fillStyle = this.color
ctx.fill()
}
dot.prototype.update = function() {
this.x+=this.dx
this.y+=this.dy
}
dot.prototype.remove = function() {
if(this.x - this._x>=25 || this.x - this.x <= -25 || this.y - this._y >=25 || this.y - this._y <=-25) {
ctx.clearRect(0, 0, canvas.width, canvas.height)
}
}
setInterval(() => {
ctx.clearRect(0, 0, canvas.width, canvas.height)
for (var i = 0; i < arr.length; i++) {
arr[i].render()
arr[i].update()
arr[i].remove()
}
}, 20);
})(document);