暗影截 2022-09-21 14:48 采纳率: 75%
浏览 29
已结题

鼠标移动到对应位置进度条也跟着改变

问题遇到的现象和发生背景

教教我怎么做出鼠标在一个div里从左到右移动对应位置,div里的进度条也跟着向右移动对应长度,像这样的

img

img

用代码块功能插入代码,请勿粘贴截图
<ul class="fresh-video-content" v-show="flag === 4">
            <li class="video-item" v-for="(o,index) in video5" :key="index">
                <div class="mask-img">
                    <img class="video-cover" :src="o.img" alt="">
                    
                    <div class="video-pre-wrap">
                        <img class="video-pre-img" src="" alt="">
                        <span class="video-pre-bg"></span>
                        <span class="video-pre-bar">
                            <i></i>
                        </span>
                    </div>
                    <a class="herf-mask" :href="o.url"></a>
                </div>
                <a class="video-length">{{o.length}}</a>
                <p class="name-video">
                    <a :href="o.url">{{o.name}}</a>
                </p>
                <a class="play-times">{{o.times}}</a>
                <a class="update-time">{{o.update}}</a>
            </li>
        </ul>


  • 写回答

1条回答 默认 最新

  • H5周 2022-09-22 11:33
    关注

    关键是操作div的宽度,根据鼠标的移动事件mousemove,获取光标的坐标来实现

     
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title> 浏览器窗口只打开一次 </title>
        <script src="https://code.jquery.com/jquery-1.7.2.js"></script>
    </head>
    <body>
     
    <style type="text/css">
    .box{width:100px;height:100px;margin:100px auto;background:#ffff00;margin-left: 100px;z-index: 1}
    .box1{position:absolute;width:1300px;height:100px;top:100px;background:transparent;left: 100px;}
    </style>
     
    <div class="box"></div>
    <div class="box1"></div>
     
     
    <script>
     var box = document.querySelector('.box');
     var box1 = document.querySelector('.box1');
     box1.addEventListener('mousemove',(e)=>{
         console.log(11,e)
         box.style.width = (e.x -100) + 'px'
     })
    </script>  
     
    </body>
    </html>
     
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 11月22日
  • 已采纳回答 11月14日
  • 创建了问题 9月21日

悬赏问题

  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题
  • ¥15 Visual Studio问题
  • ¥20 求一个html代码,有偿
  • ¥100 关于使用MATLAB中copularnd函数的问题