☰

div cursor demo🔧

div follow cursor demo

当前为 2023-05-10 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         div cursor demo🔧
  3. // @description  div follow cursor demo
  4. // @namespace    div_cursor
  5. // @author       Covenant
  6. // @version      1.0.5
  7. // @license      MIT
  8. // @homepage
  9. // @match        *://*/*
  10. // @icon         data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAMAAABiM0N1AAAAOVBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADMzMwAAACmpqY6Ojq6urp9fX1QUFCUlJQbGxs9xjm/AAAACnRSTlMACqKHwVaUN/PaZCFdUwAAAXxJREFUWMPt2NuOgyAQBmBRhBHk+P4PuwJtNgrCYHeTXvBfNenkywBeDEzTyONwRkFeApTxPoWsm7zJtvZ0c8tECt3VCrIaQDa1pnLrtAjZY+JP7Wz6DyXx2I9NyhkKVqQAs7q4P0aIMiSEifuEOK+Lk0FJWlENWVGDhMW0FBvSdUiHmtYusWtDBSi2xBoQPWpcC3JHEW1AcF2Z2I1S5gyFtUEDCssXZ0gdOUMiVA3oq6H8+B9C+Qc5oK+HdHD0H0BBujgPoUIGNKABDej/oXw+KgQzH4VZdG9BO2IapZfhuBiDGP2WbBgtJAyjC2I89i3IIyZ2AtlYmyUMtUBaE/t8VKk6pI6SuX05kq2WHGbwf52bb+0QbTupJVs/Mom6jTJZ+5biJYthnIlsFSld+wgKel9Gb9cF6Gt2knx2ds73OW9JqhPllOx1fp8QvDVhONK7sb73+eC146z8eMDI1BtOc4by6Un4fHrbgPkZk14BFrodGmx0Wck08ll+AGC5Y59UZba/AAAAAElFTkSuQmCC
  11. // @grant        GM_setValue
  12. // @grant        GM_getValue
  13. // @grant        GM_registerMenuCommand
  14. // @connect
  15. // @run-at       document-body
  16. // @noframes
  17. // ==/UserScript==
  18. var style_div_cursor;
  19. var ary_div=[];
  20. var timeoutID_1;
  21. var timeoutID_2;
  22. function create_style(textContent,id,class_name){
  23.     let style=create_node("style",class_name,true,document.body);
  24.     style.type='text/css';
  25.     style.id=id;
  26.     style.textContent=textContent;
  27.     return style;
  28. }
  29. style_div_cursor=create_style("","gm_user_css_div_cursor",["user_gm_css","css_div_cursor"]);
  30. style_div_cursor.textContent+=`
  31. .gm_cursor1, .gm_cursor2, .gm_cursor3{position:fixed;border-radius:50%;transform:translateX(-50%) translateY(-50%);pointer-events:none;left:-100px;top:50%;mix-blend-mode:difference;transition:all 300ms linear;z-index:9999999;cursor:pointer;color: #212529}
  32. .gm_cursor1{background-color:#ffffff;height:0;width:0;z-index:9999999;border:8px solid;}
  33. .gm_cursor2, .gm_cursor3{height:36px;width:36px;z-index:99998;transition:all .3s ease-out;}
  34. .gm_cursor2.hover, .gm_cursor3.hover{transform:scale(2) translateX(-25%) translateY(-25%);border:none;}
  35. .gm_cursor2{border:2px solid #ffffff;box-shadow:0 0 12px rgba(255,255,255,.2);}
  36. .gm_cursor2.hover{background:white;box-shadow:0 0 0 rgba(255,255,255,.2);}\n`;
  37. function create_div(class_name,is_appendChild,node,refNode){
  38.     let div=create_node("div",class_name,is_appendChild,node,refNode);
  39.     div.style.backgroundSize='contain';
  40.     div.style.backgroundRepeat='no-repeat';
  41.     div.lang='ja';
  42.     return div;
  43. }
  44. function create_node(tagname,class_name,is_appendChild,node,refNode){
  45.     let element=document.createElement(tagname);
  46.     if(Array.isArray(class_name)){
  47.         for(let i=0; i<class_name.length; i++){element.classList.add(class_name[i]);}
  48.     }
  49.     else if(typeof class_name==='string'){element.classList.add(class_name);}
  50.     if(is_appendChild){node.appendChild(element);}else{node.insertBefore(element, refNode);}
  51.     return element;
  52. }
  53. //console.log("break");
  54. function main_01(){
  55.     if(style_div_cursor.parentNode==undefined){
  56.         console.log("style_div_cursor undefined");
  57.         document.body.appendChild(style_div_cursor);
  58.         document.body.appendChild(ary_div[0]);
  59.         document.body.appendChild(ary_div[1]);
  60.         document.body.appendChild(ary_div[2]);
  61.         window.clearInterval(timeoutID_1);
  62.     }
  63. }
  64. function main_02(){
  65.     let anchor=document.querySelectorAll('a');
  66.     let div_cursor=document.querySelectorAll('.hover-target');
  67.     for(let i = 0; i < anchor.length; i++){
  68.         for(let j = 0; j < div_cursor.length; j++){
  69.             anchor[i].addEventListener('mouseenter', function(){div_cursor[j].classList.add('hover');});
  70.             anchor[i].addEventListener('mouseleave', function(){div_cursor[j].classList.remove('hover');});
  71.         }
  72.     }
  73. }
  74. (function() {
  75.     'use strict';
  76.     if(document.querySelectorAll("#index_cursor1").length==0){
  77.         ary_div[0]=create_div("gm_cursor1",true,document.body);
  78.         ary_div[1]=create_div(["gm_cursor2","hover-target"],true,document.body);
  79.         ary_div[2]=create_div(["gm_cursor3","hover-target"],true,document.body);
  80.         let div_c1=ary_div[0];
  81.         let div_c2=ary_div[1];
  82.         let div_c3=ary_div[2];
  83.         div_c1.id="gm_cursor1";
  84.         div_c2.id="gm_cursor2";
  85.         div_c3.id="gm_cursor3";
  86.         timeoutID_1=window.setInterval(( () => main_01()), 1000);
  87.         //move
  88.         var x, y;
  89.         // On mousemove use event.clientX and event.clientY to set the location of the div to the location of the cursor:
  90.         window.addEventListener('mousemove', function(event){
  91.             x = event.clientX;
  92.             y = event.clientY;
  93.             if ( typeof x !== 'undefined' ){
  94.                 div_c1.style.left=x+"px";div_c2.style.left=x+"px";div_c3.style.left=x+"px";
  95.                 div_c1.style.top=y+"px";div_c2.style.top=y+"px";div_c3.style.top=y+"px";
  96.             }
  97.         }, false);
  98.         //anchor
  99.         //document.addEventListener('DOMContentLoaded', function() {console.log("DOMContentLoaded div_cursor");main_02();});
  100.         timeoutID_2=window.setInterval(( () => main_02() ), 1000);//bak
  101.         window.setTimeout(( () => window.clearInterval(timeoutID_2) ), 30000);
  102.     }
  103.     /*jshint multistr: true */
  104. })();