让小牛来跟着鼠标移动事件

这几天拖延了一段时间不太好意思，今天还是带来一个很有意思的按钮，小牛跟着我的鼠标移动这个案例啊

HTML

 <div class="img"></div>

就这么一个盒子

然后是CSS部分

*{
        margin: 0;
        padding: 0;
      }
      body{
        background: rgb(240,230,240);
      }
      .img{
        width: 50px;
        height: 50px;
        position: absolute;
        background-image: url(./images/0112.gif);
        background-size: cover;
      }

然后是我们JS部分

第一步还是我们需要获取这个img的元素来进行动画效果，所以我们来定义小图片在各个方向的位置，下面已经写好注释了，大家可看一下，然后我们需要来做一个鼠标移动事件，然后我们这块为啥要除以2，是为了让图片位于中心的时候不会移动了，然后获取完XY轴之后，我们需要套入公式

让每当鼠标移动然后小牛会跟着我鼠标移动，接下来就是定义鼠标的位置了，然后我们来进行一个判断如果大于这个x轴则需要翻转，不然就不需要，下面就是我们设置的1小图片翻转的代码

 let img=document.querySelector('.img')
    //定义小图片旋转角度
    let deg=0
    //定义小图片位于网页左侧位置
    let imgx=0
    //定义小图片位于网页顶侧位置
    let imgy=0
    //定义小图片位置
    let imgl=0
    //定义小图片y轴位置
    let imgt=0
    //定义小图片翻转角度
    let y=0
    //定义一个定时器
    let index =0

    window.addEventListener('mousemove', function(xyz){
        //获取网页左侧位于图片位置
        imgx=xyz.x - img.offsetLeft - img.clientWidth /2
        //多去网页顶部距离图片位置
        imgy=xyz.y - img.offsetTop - img.clientHeight /2
        //套入公司 定义图片旋转角度·
        deg=360*Math.atan(imgy/imgx)/(2*Math.PI)
        //每当鼠标移动的时候重置
        index=0
        //定义当前鼠标位置
        let x = event.clientX
        //当前鼠标x轴大于图片时候，牛牛要对这鼠标，所有需要图片翻转一下，否则就不需要翻转
        if(img.offsetLeft<x){
            y=180
        }else{
            y=0
        }
    })
    setInterval(()=>{
        //设置小图片旋转和翻转
        img.style.transform ="rotateZ("+deg+"deg) rotateY("+y+"deg)"
        index++
        //设置小图片位置速度，判断小图片随着位置停止移动
        if(index<50){
            imgl+=imgx/50
            imgt+=imgy/50
        }
        img.style.left = imgl+"px"
        img.style.top = imgt+"px"

    })

接下来为了大家好复制，我直接放源码了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      *{
        margin: 0;
        padding: 0;
      }
      body{
        background: rgb(240,230,240);
      }
      .img{
        width: 50px;
        height: 50px;
        position: absolute;
        background-image: url(./images/0112.gif);
        background-size: cover;
      }
    </style>
</head>
<body>
   <div class="img"></div>
</body>
<script>
    let img=document.querySelector('.img')
    //定义小图片旋转角度
    let deg=0
    //定义小图片位于网页左侧位置
    let imgx=0
    //定义小图片位于网页顶侧位置
    let imgy=0
    //定义小图片位置
    let imgl=0
    //定义小图片y轴位置
    let imgt=0
    //定义小图片翻转角度
    let y=0
    //定义一个定时器
    let index =0

    window.addEventListener('mousemove', function(xyz){
        //获取网页左侧位于图片位置
        imgx=xyz.x - img.offsetLeft - img.clientWidth /2
        //多去网页顶部距离图片位置
        imgy=xyz.y - img.offsetTop - img.clientHeight /2
        //套入公司 定义图片旋转角度·
        deg=360*Math.atan(imgy/imgx)/(2*Math.PI)
        //每当鼠标移动的时候重置
        index=0
        //定义当前鼠标位置
        let x = event.clientX
        //当前鼠标x轴大于图片时候，牛牛要对这鼠标，所有需要图片翻转一下，否则就不需要翻转
        if(img.offsetLeft<x){
            y=180
        }else{
            y=0
        }
    })
    setInterval(()=>{
        //设置小图片旋转和翻转
        img.style.transform ="rotateZ("+deg+"deg) rotateY("+y+"deg)"
        index++
        //设置小图片位置速度，判断小图片随着位置停止移动
        if(index<50){
            imgl+=imgx/50
            imgt+=imgy/50
        }
        img.style.left = imgl+"px"
        img.style.top = imgt+"px"

    })
    
</script>
</html>

素材在封面噢，谢谢大家支持了

让小牛来跟着鼠标移动事件

猜你喜欢