js确定鼠标移入移出方向demo

最新推荐文章于 2024-04-07 13:01:24 发布

蓝色之恋love

最新推荐文章于 2024-04-07 13:01:24 发布

阅读量531

点赞数 1

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/raingrains/article/details/121605479

版权

效果图：
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>鼠标的移入和移出事件</title>
  <style>
    .box{
     
      width: 200px;
      height: 200px;
      margin: 300px;
      border: 1px solid #999;
      position: relative;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div class="box"></div>
  

  <script>

    // js 判断鼠标移入移除的方向

    /**
     * @param { object } params 
     *  element: 元素
     *  maskStyle: 遮罩样式
     *  transitionTime：过渡时间
     *  openLeave: 是否开启移出动画
     *  
     * @returns undefined
     */ 
    function setMaskFollowMouse(params){
     
      
      const {
      element,maskStyle,transitionTime='1s',openLeave=true } = params

      // 添加鼠标移入事件
      element.addEventListener('mouseover',function(e<

最低0.47元/天解锁文章

蓝色之恋love

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js确定鼠标移入移出方向demo

效果图：<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>鼠标的移入和移出事件</title> <style> .box{ width: 200px; heig
复制链接

扫一扫