用户:Nannnnn/代码测试/common.js:修订间差异

来自Limbo Wiki Mirror
无编辑摘要
无编辑摘要
第1行: 第1行:
是谁没半个小时就真香回来乱试了(目移)
const cursor = document.querySelector('.cursor')
还是坏的,但是存一下这里
const shape = document.querySelectorAll('.shape')


<meta charset="UTF-8">
document.body.addEventListener("mousemove", evt => {
    /**
  const mouseX = evt.clientX;
    * 当屏幕的宽度 >= 960,页面的背景颜色为红色
  const mouseY = evt.clientY;
    * 当屏幕的宽度 >= 640,页面的背景颜色为蓝色
 
    * 当屏幕的宽度 <  640,页面的背景颜色为绿色
  // cursor.style = `transform: translate(${mouseX}px, ${mouseY}px);`
    */
 
    window.addEventListener('load',function (ev) {
  // shape.forEach(item => {
        changeColor();
  //  item.style = `transform: translate(${mouseX}px, ${mouseY}px);`
      // 1. 监听窗口尺寸发生改变
  // })
      window.onresize('resize',changeColor);
 
    });
  gsap.set(".cursor", {
    function changeColor() {
    x: mouseX,
        if (myTool.client().width >= 960){
    y: mouseY
            document.body.style.backgroundColor = 'red';
  })
        }else if(myTool.client().width >= 640){
 
            document.body.style.backgroundColor = 'blue';
  gsap.to(".shape", {
        }else{
    x: mouseX,
            document.body.style.backgroundColor = 'green';
    y: mouseY,
        }
    stagger: -0.1
    }
  })
})

2022年8月24日 (三) 03:46的版本

const cursor = document.querySelector('.cursor')
const shape = document.querySelectorAll('.shape')

document.body.addEventListener("mousemove", evt => {
  const mouseX = evt.clientX;
  const mouseY = evt.clientY;

  // cursor.style = `transform: translate(${mouseX}px, ${mouseY}px);`
  
  // shape.forEach(item => {
  //   item.style = `transform: translate(${mouseX}px, ${mouseY}px);`
  // })

  gsap.set(".cursor", {
    x: mouseX,
    y: mouseY
  })

  gsap.to(".shape", {
    x: mouseX,
    y: mouseY,
    stagger: -0.1
  })
})