jquery写的拖动一直抖动_JavaScript_论坛

jquery写的拖动一直抖动

牛***3 分类：JavaScript 人气：795 回帖：1 发布于6年前收藏

拖动一直抖个不停，求原因和解决办法

html部分

<!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">
    <title>淘宝展示图</title>
    <link rel="stylesheet" href="pei.css" type="text/css">
</head>

<body>
    <div id="showBox">
        <div id="show_1" style="background-image:url(./img/img_1.jpg)">
            <div id="moveBox"></div>
        </div>
        <div id="show_2"></div>
        <ul>
            <li style="background-image:url(./img/img_1.jpg)" class="li"></li>
            <li style="background-image:url(./img/img_2.jpg)"></li>
            <li style="background-image:url(./img/img_3.jpg)"></li>
            <li style="background-image:url(./img/img_4.jpg)"></li>
            <li style="background-image:url(./img/img_5.jpg)"></li>
            <li style="background-image:url(./img/img_6.jpg)"></li>
        </ul>
    </div>
    <script src="jquery.min.js" type="text/javascript"></script>
    <script src="pei.js" type="text/javascript"></script>
</body>

</html>

js部分（拖动用的f_4）


$(document).ready(function() {
    $('li').on('mouseenter', f_1)

    $('#show_1').on('mouseenter', f_2)

    $('#show_1').on('mouseleave', f_3)

})

function f_1() {
    $('li').removeClass('li');
    $(this).addClass('li');
    var img = $(this).css('background-image');
    $('#show_1').css('background-image', img);
}

function f_2() {
    $('#show_2').css('display', 'inline-block');
    $('#show_1>div').css('display', 'inline-block');
    //$('#show_1').css('position', 'relative');
    $(document).on('mousemove', f_4)
}

function f_3() {
    $('#show_2').css('display', 'none');
    $('#show_1>div').css('display', 'none');
    $(document).off('mousemove', f_4)
}

function f_4(e) {
    //console.log(e.offsetX)
    //console.log(e.offsetY)
    //var lication = $('#show_1>div').position();
    $('#moveBox').css({ top: e.offsetY, left: e.offsetX })
}

标签：javascript

讨论这个帖子（1）垃圾回帖将一律封号处理……

Lv4 码徒

sh***ng 学生 6年前#1

一直抖因为你的e.offsetY和offsetX的值不是一直在鼠标的位置上.打印下看看.

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取