如何在网页上的光标上创建镜像效果？ [英] How to create mirror effect on cursor on a web page?
问题描述
我想知道是否可以使用光标在网页上创建镜像效果（使用Javascript可能？）。例如在下面的代码中，页面的黑色和白色部分之间的线将是反射线，因此如果鼠标在顶部黑色部分中移动，则将存在光标的反转图像和在底部白色部分中发生的反作用，反之亦然。
任何帮助和指针（不需要双关语）从哪里开始感谢您的感谢！
strong>修改：我尝试使用.mousemove（），event.pageX，event.pageY作为人们建议（如下所示）。我对JavaScript很新，所以我有问题使它工作。
cursor.html
< doctype！ html>
< head>
< link rel =stylesheethref =cursor.css>
< script src =http://code.jquery.com/jquery-1.11.0.min.js>< / script>
< script src =cursor.js>< / script>
< title>光标镜像< / title>
< / head>
< body>
< div class =top-half-black>< / div>
< div class =bottom-half-white>
< img id =mirror-imagesrc =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％;
}
我想让它看起来像： / p>
我想象你想要这样的东西。
HTML：
< div class =section top-half-black>< / div>
< div class =Section bottom-half-white>
< img id =mirror-imagesrc =http://i.imgur.com/cjjNbk1.png>< / img>
< / div>
CSS：
code> 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.heigh（）/ 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 pageY - imgHeight;
placeCursor（event.pageX，newY）;
}）;
工作演示：
http://codepen.io/alirezanoori/pen/YyagKP
I was wondering if it is possible to create a mirroring effect with the cursor on a webpage (using Javascript perhaps?). Take for example in the code below, the line between the black and white portion of the page would be the "line of reflection," so if the mouse were moving around in the top black portion, there would be an inverse image of a cursor and inverse action happening in the the bottom white portion, and vice versa.
Any help and pointers (no pun intended) on where to start would be appreciated, thanks!
Edit: I tried using .mousemove(), event.pageX, event.pageY as people suggested (shown below). I'm pretty new to Javascript so I have issues making it work.
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%;
}
What I want it to look like:
I imagine you want something like this.
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);
});
Working demo: http://codepen.io/alirezanoori/pen/YyagKP
这篇关于如何在网页上的光标上创建镜像效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
