您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
8/15/2020, 5:44:02 PM
当前为
// ==UserScript== // @name 演示用 // @namespace Violentmonkey Scripts // @include * // @grant none // @version 1.0 // @author chenhonzhou // @description 8/15/2020, 5:44:02 PM // ==/UserScript== /* ** 参考: http://caibaojian.com/pointer-events.html ** 事件参考: https://www.cnblogs.com/lyr1213/p/7122363.html */ const isObject = x => { return typeof x === 'object' && x !== null } // 设置 style const setEleStyle = (ele, obj) => { if (isObject(obj)) { try { Object.keys(obj).forEach(item => { const isStyle = ele.style.hasOwnProperty(item) if (isStyle) { const val = obj[item] ele.style[item] = val } }) } catch (error) { throw new Error(error) } } } const Eid = 'clickEle' const getClickEle = ()=>{ return document.getElementById(Eid) } const setStyle = obj=> { const ele = getClickEle() if (ele) setEleStyle(ele, obj) else { console.warn('设置style失败, 请在vm.$nextTick中设置') } } let clearFlag = null let canMove = false const runtime = options=> { if (!isObject(options)) options = {} if (!options.hasOwnProperty('opacity')) options.opacity = .0233 if (!options.hasOwnProperty('style')) options.style = {} let { opacity, style } = options let _opacity = Number(opacity) if (Number.isNaN(_opacity) || (_opacity > 1 || _opacity < .1)) _opacity = 1 if (!isObject(style)) style = {} return { inserted() { try { let ele = document.body if (getClickEle()) return const Ele = document.createElement('div') Ele.id = Eid const beau = { position: 'fixed', top: 0, left: 0, pointerEvents: `none`, position: `fixed`, width: `42px`, height: `42px`, zIndex: 9999, border: `2px solid rgb(147, 145, 145, .6)`, borderRadius: `50%`, opacity: 0, userSelect: 'none', transition: 'opacity .3s' } Object.assign(beau, style) setEleStyle(Ele, beau) const getPosition = ()=> { const rect = Ele.getBoundingClientRect() const border = 2 const w = rect.width / 2 - border, h = rect.height / 2 - border const top = `calc(${ event.clientY }px - ${ w }px)` const left = `calc(${ event.clientX }px - ${ h }px)` return { top, left } } const display = (flag = true) => { setEleStyle(Ele, { opacity: flag ? _opacity : 0 }) } ele.addEventListener('mousedown', event=> { const { top, left } = getPosition() setEleStyle(Ele, { top, left }) display() canMove = true }) ele.addEventListener('mousemove', event=> { if (canMove) { const { top, left } = getPosition() let crd = { top, left } setEleStyle(Ele, crd) display() } }) ele.addEventListener('mouseup', ()=> { clearFlag = setTimeout(()=> { display(false) }, 200) canMove = false }) ele.append(Ele) } catch (error) { throw new Error(error) } } } } const ctx = runtime({ 'border-color': 'red' }) ctx.inserted()
QingJ © 2025
镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址