所以我想要反转鼠标的x和y坐标,这样如果我移动,div(最后将是投资组合工作)将向相反的方向发展。
我从这个网站的答案中取了这个代码(感谢上帝)。但我有一个小问题,如果没有它出现在左下角,我似乎无法放大“盒子”。它运作不正常。如果我将鼠标移动到屏幕中间,则div不是它的顶部。它应该是什么。当我将盒子的大小更改为50px时,它可以工作。
我也想过,我的其余代码可能会中断某些内容,也许可能是问题的根源。所以这就是我把所有东西都包括在内的原因。
希望你们中的一些人能给我一些关于可能出错的线索!
$(".book").click(function(){
if ( $(this).hasClass('Offline') ) $(this).removeClass('Offline').addClass('Active');
else $(this).addClass('Offline')
})
$(".web").click(function(){
if ( $(this).hasClass('Offline') ) $(this).removeClass('Offline').addClass('Active');
else $(this).addClass('Offline')
})
$(document).ready(function() {
$('.fullcontain').on('mousemove', function(e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
$('div.box').css({
'right': x,
'bottom': y
});
});
});
*,
*:before,
*:after {
margin: 0;
box-sizing: border-box;
}
p{
color:white;
padding-left: 20px;
font-family: times;
font-weight: medium;
font-size:20px;
mix-blend-mode: difference;
-webkit-font-smoothing: antialiased;
z-index: 1000;
}
body,html {
height: 100%;
font-size: 26px;
}
.fullcontain{
margin: 0 auto;
height: 100%;
width: 100%;
position: relative;
}
.container-menu{
width: 25%;§
height: 100%;
background-color: white;
float: left;
padding-top:20px;
}
.container-menu h5{
color:black;
padding-left:40px;
padding-top:40px;
}
.container-content{
height: 100%;
width: 50%;
background-color: white;
float:left;
}
.book{
background-color: white;
width: 100%;
height: 20px;
overflow: hidden;
padding-left:20px;
}
.bookinfo{
background-color: white;
overflow: hidden;
padding-left:20px;
}
.web{
background-color: white;
width: 100%;
height: 20px;
padding-left:20px;
overflow: hidden;
}
.webinfo{
background-color: white;
width: 100%;
height: 48px;
overflow: hidden;
}
.Active {
height: 150px;
transition: 1s linear;
}
.Offline {
height: 20px;
transition: 1s linear;
}
.box {
width: 500px;
height: 500px;
border: 1px #000 solid;
position: absolute;
padding-right: 200px;
background-color: white;
-webkit-font-smoothing: antialiased;
mix-blend-mode: difference;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="index.css" rel="stylesheet" />
</head>
<body>
<div class="fullcontain">
<div class="box"></div>
<div class="container-menu">
<p>Work<p>
<div class="book Offline"><p>book</p>
<div class="bookinfo">
<p> #1 2018 Alice in Wonderland<br>
<p> #2 2017 Two sides of a coin <br>
<p> #3 2017 Timeline Memento<br>
<p> #4 2018 Color book <br>
<p> #5 2017 Archiving <br>
</div>
</div>
<div class="web Offline"><p>web</p>
<div class="webinfo">
<p> #7 2018 Research: becoming KIM K <br>
<p> #8 2017 Interactive poster <br>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="index.js"></script>
</body>
</html>
答案 0 :(得分:1)
将你的css改为left和top。
$('div.box').css({
'left': x,
'top': y
});
这将在相反的方向上工作。
是的,你的意思是放大&#39;框?全屏?如果是这样,你可以为类.container-menu:设置css.container-menu {
width: 100%;
height: 100%;
...
}
不确定这是否有帮助〜