如何使带有旋转光标的猫头鹰旋转木马在引导过程中工作？

Question

我一直试图使这个猫头鹰旋转木马由约翰希金斯(http://jonhiggins.co.uk/words/animated-rotating-cursor-over-carousel/)与引导工作。

这个主题使光标在悬停旋转木马图像时的作用类似于'prev‘和'next’按钮。但是，当我将html放入引导的响应容器中时，它似乎在某种程度上扰乱了游标。

当扩展浏览器宽度时，您会注意到箭头没有从右向左切换。请看一下小提琴。

https://jsfiddle.net/ftpptf/c6nw8yzt/

/* BEGIN Cursor*/
.cursor {
display: none;
top: 0;
left: 0;
position: fixed;
z-index: 1000;
width:33px;
height:54px;
margin-top: 60px;
margin-left: 33px;
pointer-events: none;
&.isVisible {
    display: block;
}
}
.js--visible {
display: block;
 }
.cursor__icon {
width:32px;
height:32px;
background-image:               url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAw  MC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIiBpZD0ic3ZnIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsa    W1pdD0iMTAiIGQ9Ik0yNC4xIDMwTDcuOSAxNiAyNC4xIDIiPjwvcGF0aD48L3N2Zz4=');
background-repeat:no-repeat;
-webkit-transition: -webkit-transform 0.4s ease-out;
-moz-transition: -moz-transform 0.4s ease-out;
-o-transition: -o-transform 0.4s ease-out;
transition: transform 0.4s ease-out;
}
.carousel.offScreen .cursor {
display: none;
}
.carousel.right .cursor__icon {
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
/* END Cursor*/

我已经将.cursor .cursor__icon的位置设置为绝对值，这似乎很有帮助，但它的行为仍然很奇怪。

我尝试了很多不同的设置，但没有任何好的结果！

任何帮助都将是非常感谢的-谢谢！

Answer 1

很高兴Codepen的例子对你有用。

看起来问题是，你的旋转木马的左边边缘不是在0px (窗口的最左边)，而是在屏幕的一半。我的示例没有考虑到这个场景，因为旋转木马水平地填充了视口。

希望这把小提琴能解决这个问题：https://jsfiddle.net/jonjhiggins/z915kbe3/

所作的修改如下：

1. CSS:使旋转木马和图像100%的宽度，而不是800 to(这样它就可以响应地填充它的父级设置的宽度) .carousel {宽度: 100%；光标:无；} .carousel img {宽度:100%；}
2. JS:更改initLayout以说明当旋转木马不在屏幕的最左边时 _initLayout =函数() {左= $element.offset().left；右=左+ ($element.width() / 2)；}；
3. JS:在调整窗口大小或旋转设备时，添加调整大小事件以重新计算左/右位置。 var _initEvents =$element.on () { $element.on('mousemove'，_mousemove) .on('click'，_click)；$(window).on('resize'，_initLayout)；}；