Question

我已经设法使用jQuery从div创建自定义光标，我还可以更改光标样式，例如：（样式化动画关键帧）将鼠标悬停在div上。

这是我制作自定义光标的html代码。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>        <style type="text/css" media="screen">
        .verline, .horline {
            border-radius: 20%;
            background-color: #121212;
            position :absolute;
            animation-duration: 400ms;
            animation-timing-function: ease-out;
            animation-iteration-count: 1;
            animation-direction: normal;
            animation-fill-mode: forwards;
        }
        .horline {
            width: 50px;
            height: 3px;
            top: -3px;
            left: -25px;
            animation-name: hormove;
        }
        .verline {
            width: 3px;
            height: 50px;
            top: -27px;
            left: -2px;
            animation-name: vermove;
        }
        @keyframes hormove {
            0% { transform: rotate(0deg); top: -3px; left: -25px; }
            100% { transform: rotate(220deg); top: -19px; left: -25px; }
        }
        @keyframes vermove {
            0% { transform: rotate(0deg); top: -27px; left: -2px; }
            100% { transform: rotate(50deg); top: -12px; left: -2px; }
        }
        #hoverit {
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
</head>
<body>
    <div id="cursor">
        <div class="horline"></div>
        <div class="verline"></div>
    </div>
    <div id="hoverit"></div>
</body>
<script>
    var ElementCursor = {
        cursorElement: "",
        setCursor: function (cursorId) {
            $('html').css({
                'cursor': 'none'
            });
            $('html').mousedown(function (e) {return false;});
            ElementCursor.cursorElement = cursorId;
            ElementCursor.updateCursor();
        },
        removeCursor: function () {
            $('html').css({
                'cursor': ''
            });
            ElementCursor.cursorElement = '';
        },
        updateCursor: function () {
            $(document).mousemove(function (e) {
                $('#' + ElementCursor.cursorElement).css({
                    'position': 'fixed',
                        'top': e.pageY + 'px',
                        'left': e.pageX + 'px'
                });
            });
        }
    };
    ElementCursor.setCursor("cursor");
</script>
</html>

Answer 1

当然 - 只需将div的偏移量和大小悬停在鼠标移动上，使用它来确定光标div是从中心向左还是向右，并给它一个相应的类。

    $(document).mousemove(function (e) {
        ElementCursor.cursorElement.css({
            'position': 'fixed',
            'top': e.pageY + 'px',
            'left': e.pageX + 'px'
        });
        var width = ElementCursor.hoverElement.outerWidth();
        var left = ElementCursor.hoverElement.offset().left;
        if (e.pageX > left + (width / 2)) {
          ElementCursor.cursorElement.addClass('right');
        } else {
          ElementCursor.cursorElement.removeClass('right');
        }
    });
    ElementCursor.hoverElement.mouseenter(function(e) {
      ElementCursor.cursorElement.addClass('in');
    });
    ElementCursor.hoverElement.mouseleave(function(e) {
      ElementCursor.cursorElement.removeClass('in');
    });

查看实际操作：http://plnkr.co/edit/mIlI4BqXlpZ2IjiaNFFR?p=preview

在悬停时更改自定义光标样式关键帧动画

1 个答案: