如何在网页上的光标上创建镜像效果？答案

【问题标题】：How to create mirror effect on cursor on a web page?如何在网页上的光标上创建镜像效果？
【发布时间】：2015-10-26 01:20:45
【问题描述】：

我想知道是否可以在网页上使用光标创建镜像效果（也许使用 Javascript？）。以下面的代码为例，页面黑色和白色部分之间的线将是“反射线”，因此如果鼠标在顶部黑色部分移动，则会出现光标的反转图像并且在底部白色部分发生相反的动作，反之亦然。

任何关于从哪里开始的帮助和指示（没有双关语）将不胜感激，谢谢！

编辑：我尝试按照人们的建议使用 .mousemove()、event.pageX、event.pageY（如下所示）。我对 Javascript 还很陌生，所以我在使它工作时遇到了问题。

cursor.html

<doctype! html>
    <head>
        <link rel="stylesheet" href="cursor.css">
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="cursor.js"></script>
        <title> Cursor Mirror </title>
    </head>
    <body>
        <div class="top-half-black"></div>
        <div class="bottom-half-white">     
                <img id="mirror-image" src="upside-down.png">
        </div>

    <script>

    $(".top-half-black").mousemove(function(event){
        var xPosition = event.pageX;
        var yPosition = event.pageY;
    })


    function placeCursor() {
        var d = document.getElementById('mirror-image');
        d.style.position = "absolute";
        d.style.left = xPosition+'px';
        d.style.top = -yPosition+'px';
    }

    $( ".top-half-black").mouseover(function( event ){
        placeCursor () ;
    })



    </script>
    </body>

</html>

cursor.css

body{
    margin:0px 0px 0px 0px;
}

.top-half-black{
    background-color:black;
    width:100%;
    height:50%;
}

我想要的样子：

【问题讨论】：

大声思考。您可以在鼠标移动事件中获取顶部 div 中的光标位置。您可以在底部 div 中有一个画布元素，并根据顶部 div 中的光标位置计算光标位置。您需要更新顶部 div 中鼠标移动事件的画布。
您可以使用鼠标光标的绝对定位图像和 jquery 的 mousemove() 事件以及 event.pageX 和 event.pageY 属性轻松实现这一点。
是的，不要使用画布，工作量会超出必要。光标图像元素的绝对定位将处理它。
@leemo 谢谢，我会试试的！

标签： javascript jquery html css

【解决方案1】：

我想你想要这样的东西。

HTML：

<div class="section top-half-black"></div>
<div class="section bottom-half-white">
  <img id="mirror-image" src="http://i.imgur.com/cjjNbk1.png"></img>
</div>

CSS：

body{
    margin:0px 0px 0px 0px;
}

.top-half-black{
    background-color:black;
    width:100%;
    height:50%;
}

.bottom-half-white{
  position: relative;
}

#mirror-image{
  left: 0;
  top: 0;
  position: absolute;
  width: 17px;
  height: 25px;
}

.section{
  display: block;
  min-height: 10em;
}

JS：

var $img = $('#mirror-image');
var imgHeight = $img.height() / 2;
function placeCursor(x, y){
  $img.css({top: y + 'px', left: x+ 'px', position:'absolute'});
}

$(".top-half-black").mousemove(function(event){
  var newY = $(this).height() - event.pageY - imgHeight;
  placeCursor(event.pageX, newY);
});

工作演示： http://codepen.io/alirezanoori/pen/YyagKP

【讨论】：

谢谢，这正是我想要的！如果我想让它在我将鼠标悬停在底部白色版本上时反转，我会为 .bottom-half-white 创建另一个事件处理程序吗？但我也必须将光标的图像隐藏在下半部分......
是的，这就是我的建议。我想你可以自己做。如果您还有其他问题，请告诉我。

【解决方案2】：

我不知道改变颜色，但如果你能找到一些你想要的光标颜色的图像，你可以将它添加到你的 CSS 类中。

 cursor: url(images/my-cursor.png), auto;

【讨论】：

我不想改变我的光标。仔细阅读问题。
我是说如果你找到一张反转光标的图片，你可以为每个 div 使用这些图片。一种解决方法。
我不明白。我正在尝试创建光标的镜像，而不是尝试更改其颜色。
好吧，我的意思是，但我仍然必须使用 jquery，因为镜像光标必须与实际光标同时移动。我可能会将它作为图像，而不是 CSS 的一部分，对吧？
是的，我改变了我的评论。请参阅上面的图像。如果你能找到一些光标，或者裁剪这些图像，你可以使用它们并获得相同的效果。