为什么鼠标光标和红线在将缩放 0.5 添加到正文标签时位置不同

why mouse cursor and red line not same position when add zoom 0.5 in to body tag?

本文关键字：正文 添加 标签 位置 光标 鼠标 红线 缩放 为什么      更新时间：2023-09-26

为什么在将缩放 0.5 添加到正文标签时鼠标光标和红线的位置不同？

当在zoom 1;上使用时，它工作得很好，

如何在zoom 0.5上工作（缩放 1 除外;）？

https://jsfiddle.net/ksfqgv0p/6/

var isResizing = false;
$(function () {
   var container = $('#container'),
        left = $('#left'),
        handle = $('#handle');
    container.on('mousemove', function (e) {
        isResizing = true;
    });
    container.on('mouseout', function (e) {
        isResizing = false;
    });
    $(document).on('mousemove', function (e) {
        if (!isResizing) 
        return;
        left.css('width', e.clientX - container.offset().left);
        handle.css('margin-left', e.clientX - container.offset().left);
    });
});

问题是e.clientX返回屏幕上的鼠标位置而不是对象上，因此将此值应用于width属性，它比必须小 2 倍，因此您需要将此值除以缩放级别以获得该缩小对象上的正确鼠标位置。

喜欢这个：

left.css('width', ((e.clientX/$('body').css('zoom')) - container.offset().left));
handle.css('margin-left', ((e.clientX/$('body').css('zoom')) - container.offset().left));

这是jsFiddle

var isResizing = false;
$(function () {
   var container = $('#container'),
        left = $('#left'),
        handle = $('#handle');
    container.on('mousemove', function (e) {
        isResizing = true;
    });
    container.on('mouseout', function (e) {
        isResizing = false;
    });
    $(document).on('mousemove', function (e) {
        if (!isResizing) 
        return;
        console.log(container.offset().left);
        console.log(e.clientX);
        left.css('width', ((e.clientX/$('body').css('zoom')) - container.offset().left));
        handle.css('margin-left', ((e.clientX/$('body').css('zoom')) - container.offset().left));
    });
});
body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#container {
    width: 100%;
    height: 500px;
    /* Disable selection so it doesn't get annoying when dragging. */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: moz-none;
    -ms-user-select: none;
    user-select: none;
}
#container #left {
    position: absolute;
    width: 750px;
    height: 100%;
    background-image: url("http://www.pilsnertop.com/wp-content/uploads/2015/12/Dog-Header3.jpg");
    overflow: hidden;
    background-repeat: no-repeat;
    z-index: 9;
}
#container #right {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    background-image: url("http://www.twitrcovers.com/wp-content/uploads/2014/06/Dog-Butterfly-l.jpg");
    overflow: hidden;
    background-repeat: no-repeat;
}
#container #handle {
    background: red;
    height: 500px;
    margin-left: 742px;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: w-resize;
    position: fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body style="
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    zoom:0.5;
"
>
<div id="container">
    <!-- Left side -->
    <div id="left"> 
        <!-- Actual resize handle -->
        <div id="handle"></div> This is the right side's content!
This is the left side's content! </div>
    <!-- Right side -->
    <div id="right">
    </div>
</div>

</body>

相关文章：