Question

我想知道是否可以使用光标在网页上创建镜像效果（也许使用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%;
}

我希望它看起来像是什么：

Answer 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

Answer 2

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

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

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

2 个答案:

HTML：

CSS：

JS：