Question

我在我的网站上使用了一个小脚本，该脚本跟随用户光标所在的页面元素。动画有点锐利，我需要做的是对它应用某种过渡/关键帧。

我尝试使用composer dump-autoload来设置延迟，但是没有成功... 我想达到这种效果site。鼠标平滑移动的地方，有没有一种方法可以建立一个50kB的巨大库？

window.setTimeout

document.body.addEventListener("mousemove", function(e) {
				
				var curX = e.clientX;
				var curY = e.clientY;
					
				document.getElementById('mouse').style.left = curX - 10 + 'px';
				document.getElementById('mouse').style.top = curY - 10 + 'px';
});

body {
height: 500px;
width: 500px;
background: orange;
}
#mouse {
  position: fixed;
  height: 20px;
  width: 20px;
  background: black;
  top: 40px;
  left: 40px;
  z-index: 100;
}

我希望元素在光标之后平滑移动。此刻，它立即遵循确切的路径。

Answer 1

添加一个TestPrint.vue?357b:230 Uncaught TypeError: Cannot read property 'write' of undefined at VueComponent.printCSV (TestPrint.vue?357b:230) at VueComponent.csvJSON (TestPrint.vue?357b:202) at FileReader.reader.onload (TestPrint.vue?357b:248)：

           var mywindow = window.open('', 'PRINT', 'height=400,width=600');

            mywindow.document.write('<html><head><title>Title</title>');
            var css = this.getCSS()
            mywindow.document.write('<style>' + css + '</style>');
            mywindow.document.write('</head><body>');

            var printData = generatePrintData() //generate a html table
            mywindow.document.write(printData);
            mywindow.document.write('</body></html>');

transition

document.body.addEventListener("mousemove", function(e) {

  var curX = e.clientX;
  var curY = e.clientY;

  document.getElementById('mouse').style.left = curX - 10 + 'px';
  document.getElementById('mouse').style.top = curY - 10 + 'px';
});

Answer 2

在CodePen上找到了一个代码段。请参见下面的链接：

https://codepen.io/renatorib/pen/gBLDA

Javascript代码如下：

$(document).ready(function(){

  var mousePos = {};

 function getRandomInt(min, max) {
   return Math.round(Math.random() * (max - min + 1)) + min;
 }

  $(window).mousemove(function(e) {
    mousePos.x = e.pageX;
    mousePos.y = e.pageY;
  });

  $(window).mouseleave(function(e) {
    mousePos.x = -1;
    mousePos.y = -1;
  });

  var draw = setInterval(function(){
    if(mousePos.x > 0 && mousePos.y > 0){

      var range = 15;

      var color = "background: rgb("+getRandomInt(0,255)+","+getRandomInt(0,255)+","+getRandomInt(0,255)+");";

      var sizeInt = getRandomInt(10, 30);
      size = "height: " + sizeInt + "px; width: " + sizeInt + "px;";

      var left = "left: " + getRandomInt(mousePos.x-range-sizeInt, mousePos.x+range) + "px;";

      var top = "top: " + getRandomInt(mousePos.y-range-sizeInt, mousePos.y+range) + "px;"; 

      var style = left+top+color+size;
      $("<div class='ball' style='" + style + "'></div>").appendTo('#wrap').one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function(){$(this).remove();}); 
    }
  }, 1);
});

也许会有所帮助。

Javascript：尝试平滑自定义光标动画

2 个答案: