☰

div cursor demo

div follow cursor demo

当前为 2022-12-09 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         div cursor demo
  3. // @description  div follow cursor demo
  4. // @namespace    div_cursor
  5. // @author       Covenant
  6. // @version      1.0
  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. function create_style(textContent,class_name){
  19.     var style=document.createElement("style");
  20.     style.className=class_name;
  21.     style.textContent=textContent;
  22.     document.body.appendChild(style);
  23.     return style;
  24. }
  25.  
  26. function main_02(){
  27.     var anchor=document.querySelectorAll('a');
  28.     var div_cursor = document.querySelectorAll('.hover-target');
  29.     for(let i = 0; i < anchor.length; i++){
  30.         for(let j = 0; j < div_cursor.length; j++){
  31.             anchor[i].addEventListener('mouseenter', () => {div_cursor[j].classList.add('hover');});
  32.             anchor[i].addEventListener('mouseleave', () => {div_cursor[j].classList.remove('hover');});
  33.         }
  34.     }
  35. }
  36. (function() {
  37.     'use strict';
  38.     var div_1=document.createElement('div');
  39.     div_1.id="cursor1";
  40.     div_1.classList.add('cursor1');
  41.     document.body.appendChild(div_1);
  42.  
  43.     var div_2=document.createElement('div');
  44.     div_2.id="cursor2";
  45.     div_2.classList.add('cursor2');
  46.     div_2.classList.add('hover-target');
  47.     document.body.appendChild(div_2);
  48.  
  49.     var div_3=document.createElement('div');
  50.     div_3.id="cursor3";
  51.     div_3.classList.add('cursor3');
  52.     div_3.classList.add('hover-target');
  53.     document.body.appendChild(div_3);
  54.     //div cursor css
  55.     /*jshint multistr: true */
  56.     create_style('.cursor1, .cursor2, .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}\n\
  57.         .cursor1{background-color:#ffffff;height:0;width:0;z-index:9999999;border:8px solid;}\n\
  58.         .cursor2, .cursor3{height:36px;width:36px;z-index:99998;transition:all .3s ease-out;}\n\
  59.         .cursor2.hover, .cursor3.hover{transform:scale(2) translateX(-25%) translateY(-25%);border:none;}\n\
  60.         .cursor2{border:2px solid #ffffff;box-shadow:0 0 12px rgba(255,255,255,.2);}\n\
  61.         .cursor2.hover{background:white;box-shadow:0 0 0 rgba(255,255,255,.2);}','div_cursor_css');
  62.     //move
  63.     window.onload = function(){
  64.         var div_c1 = document.getElementById("cursor1");var div_c2 = document.getElementById("cursor2");var div_c3 = document.getElementById("cursor3");
  65.         var x, y;
  66.         // On mousemove use event.clientX and event.clientY to set the location of the div to the location of the cursor:
  67.         window.addEventListener('mousemove', function(event){
  68.             x = event.clientX;
  69.             y = event.clientY;
  70.                 if ( typeof x !== 'undefined' ){
  71.                     div_c1.style.left=x+"px";div_c2.style.left=x+"px";div_c3.style.left=x+"px";
  72.                     div_c1.style.top=y+"px";div_c2.style.top=y+"px";div_c3.style.top=y+"px";
  73.                 }
  74.         }, false);
  75.     }
  76.     //anchor
  77.     window.setTimeout(( () => main_02() ), 1000);
  78. })();