更改鼠标脚本

时间:2017-09-28 09:11:10

标签: javascript html css

我找到了这个很酷的Codepen Mouse Trail脚本。如何更改它只能在div中工作,并且它使用(光标的)图像而不是css代码(就像它是1996年)? TNX!

https://codepen.io/tomhodgins/pen/bgRVKL

var coord = new Array(50)
function update(e){
  var x = e.clientX || e.touches[0].clientX
  var y = e.clientY || e.touches[0].clientY
  coord.push([x,y])
  coord.shift()
  EQCSS.apply()
}
document.addEventListener('mousemove',update)
document.addEventListener('touchmove',update)
@element '[data-dot]' {
  $root, $this {
    cursor: none;
  }
  $this {
    width: 30px;
    height: 30px;
    background: white;
    border: 2px solid black;
    border-radius: 100%;
    border-top-left-radius: 0;
    position: fixed;
    left: eval("coord[50-(getAttribute('data-dot')*5)][0]")px;
    top: eval("coord[50-(getAttribute('data-dot')*5)][1]")px;
    opacity: calc(eval("10 - getAttribute('data-dot')") / 10);
  }
}
<aside data-cursor>
  <div data-dot=10></div>
  <div data-dot=9></div>
  <div data-dot=8></div>
  <div data-dot=7></div>
  <div data-dot=6></div>
  <div data-dot=5></div>
  <div data-dot=4></div>
  <div data-dot=3></div>
  <div data-dot=2></div>
  <div data-dot=1></div>
</aside>

0 个答案:

没有答案
相关问题