动画光标不适用于锚点

Question

I've searched for hours but can't seem to find the answer. 我搜索了几个小时但似乎找不到答案。 I'm trying to adapt this codepen https://codepen.io/Nharox/pen/akgEQm to work with images and links but 2 things are not working. 我正在尝试调整此codepen https://codepen.io/Nharox/pen/akgEQm来处理图像和链接，但有两件事情无效。 One is that the position of the cursor doesn't match vertically where the mouse pointer should be after scrolling with either the browser or the mouse wheel, and the other is that clicking the link has no effect. 一个是光标的位置与浏览器或鼠标滚轮滚动后鼠标指针的垂直位置不匹配，另一个是单击链接无效。 I can't seem to figure out why. 我似乎无法弄清楚为什么。

<body>
<div class="cursor hidden">
    <div class="cross">
        <div class="b b1"></div>
        <div class="b b2"></div>
    </div>
    <svg class="circle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="52" height="52" viewBox="0 0 52 52">
        <path d="M1,26a25,25 0 1,0 50,0a25,25 0 1,0 -50,0"/>
    </svg>
</div>

Links 链接

<div class="myrow">
    <div class="myrow__box">
        <a href="/link-to-page"><img alt="" src="/images/myimage.jpg" /></a>
    </div>
</div>

SCSS SCSS

.cursor {
position: absolute;
z-index: 5;
width: 50px;
height: 50px;
opacity: 0;
transform: translate3d(-50%, -50%, 0) scale(.9) rotate(135deg);
transition: opacity 0.5s, transform 0.5s;
pointer-events: none;
&:before, &:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 3px;
    background-color: white;
    transition: width 0.5s;
}
&:before {
    transform: translate3d(-50%, -50%, 0);
}
&:after {
    transform: translate3d(-50%, -50%, 0) rotate(90deg);
    transform-origin: center;
}
svg {
    fill: transparent;
    stroke: white;
    stroke-width: 3;
    stroke-dasharray: 160;
    stroke-dashoffset: 160;
    overflow: visible;
    transition: stroke-dashoffset 0.5s;
}
&-is-visible {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale(1) rotate(0deg);
    &:before, &:after {
        width: 22px;
    }
    svg {
        stroke-dashoffset: 0;
    }
}
}
.myrow {
display: block;
max-width: 100%;
margin: 0 auto;
&__box {
    cursor: none; 
    position: relative;
    height: auto;
    transform: scale(1);
    &:active {
        &:before {
            background-color: rgba(black, 0.15);
        }
    }
    &:before {
        content: '';
        position: absolute;
        z-index: 1;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(black, 0);
        transition: background-color 0.3s;
    }
}
}

JS JS

(function showCursor() {
'use strict';
// Variables
var boxes = document.querySelectorAll('.myrow__box'),
    cursor = document.querySelector('.cursor'),
    boxPos = [];
// Get coordinates for the current cursor position
function getPos(e, el) {
    var xPos = 0,
        yPos = 0;
    xPos = (el.offsetLeft - el.scrollLeft + el.clientLeft);
    yPos = (el.offsetTop - el.scrollTop + el.clientTop);
    var mouseX = e.clientX - xPos,
        mouseY = e.clientY - yPos; 
    cursor.style.top = '' + mouseY + 'px';
    cursor.style.left = '' + mouseX + 'px';
}
// Add event listeners and call fns for the corresponding box
for (var i = 0; i < boxes.length; i++) {
    boxes[i].addEventListener('mousemove', function(event) {
        var currentBox = this;
        boxPos = getPos(event, currentBox);
    }, false);
    boxes[i].addEventListener('mouseenter', function() {
        this.appendChild(cursor);
         setTimeout(function() {
             cursor.classList.add('cursor-is-visible')
         }, 10);
    }, false);
    boxes[i].addEventListener('mouseleave', function() {
        cursor.classList.remove('cursor-is-visible');
    }, false);
}
})();

I need the images to be 100% the size of the browser width at any size. 我需要图像的大小是浏览器宽度的100％。 The cursor is otherwise working properly and animating exactly as the codepen. 否则光标正常工作，并且与codepen完全一样。 Just no clickable link and wrong y position. 只是没有可点击的链接和错误的y位置。

Answer 1

Firstly, the Y position is correct since you didn't register an event listener to update your Y position accordingly. 首先，Y位置是正确的，因为您没有注册事件监听器来相应地更新您的Y位置。 So far you have only mouse - enter, move and leave events. 到目前为止，你只有鼠标 - 进入，移动和离开事件。 To account for cursor position change that occurs due to scrolling (which is btw not a cursor event) you need to register a scoll event and update the cursor Y position value accordingly. 为了解决由于滚动而发生的光标位置变化（btw而不是光标事件），您需要注册一个scoll事件并相应地更新光标Y位置值。

Secondly, the anchor doesn't do anything because it got lost as needle in the haystack. 其次，锚没有做任何事情，因为它在大海捞针中丢失了。 To make it work you can wrap your "box" element in anchor tag. 要使其工作，您可以将“box”元素包装在锚标记中。

Here is the changed HTML: 这是更改的HTML：

<a href="www.google.com" target="_blank">
    <div class="myrow">
        <div class="myrow__box">
            <img alt="" src="https://www.easyjet.com/en/holidays/shared/images/guides/austria/vienna.jpg" />
        </div>
    </div>
</a>

Here is the changed JS: 这是改变的JS：

(function showCursor() {
'use strict';
// Variables
var boxes = document.querySelectorAll('.myrow__box'),
    cursor = document.querySelector('.cursor'),
    boxPos = [],
    scrollY = 0;
// Get coordinates for the current cursor position
function getPos(e, el) {
    var xPos = 0,
        yPos = 0;
        xPos = (el.offsetLeft - el.scrollLeft + el.clientLeft);
        yPos = (el.offsetTop - el.scrollTop + el.clientTop);
    var mouseX = e.clientX - xPos,
        mouseY = e.clientY - yPos + scrollY; 
    cursor.style.top = '' + mouseY + 'px';
    cursor.style.left = '' + mouseX + 'px';
}
// Add event listeners and call fns for the corresponding box
for (var i = 0; i < boxes.length; i++) {
boxes[i].addEventListener('mousemove', function(event) {
    var currentBox = this;
    boxPos = getPos(event, currentBox);
}, false);
boxes[i].addEventListener('mouseenter', function() {
    this.appendChild(cursor);
     setTimeout(function() {
         cursor.classList.add('cursor-is-visible')
     }, 10);
}, false);
boxes[i].addEventListener('mouseleave', function() {
    cursor.classList.remove('cursor-is-visible');
}, false);
}
window.addEventListener('scroll', function (event) {
    if(event.target.scrollingElement.localName == "body") {
        scrollY = event.target.scrollingElement.scrollTop;          
    }
})     
})();

Check out the pen that I created for you to see the changes that I've made. 查看我为您创建的笔，以查看我所做的更改。

动画光标不适用于锚点

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-06-27 15:39:55

动画光标不适用于锚点

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-06-27 15:39:55

解决方案1
0 已采纳 2017-06-27 15:39:55