我有一个小脚本可以在鼠标移动时倾斜背景图像。我尝试了 3 种不同的图像,无论图像大小如何,图像移动时都会出现白色间隙。
背景图像跟随鼠标没有问题。只是显示白色间隙,我已经尝试在每个地方设置图像都无济于事。
$(function() {
// Init
var container = document.getElementById("container"),
inner = document.getElementById("inner");
// Mouse
var mouse = {
_x: 0,
_y: 0,
x: 0,
y: 0,
updatePosition: function(event) {
var e = event || window.event;
this.x = e.clientX - this._x;
this.y = (e.clientY - this._y) * -1;
},
setOrigin: function(e) {
this._x = e.offsetLeft + Math.floor(e.offsetWidth / 2);
this._y = e.offsetTop + Math.floor(e.offsetHeight / 2);
},
show: function() {
return "(" + this.x + ", " + this.y + ")";
}
};
// Track the mouse position relative to the center of the container.
mouse.setOrigin(container);
//-----------------------------------------
var counter = 0;
var updateRate = 10;
var isTimeToUpdate = function() {
return counter++ % updateRate === 0;
};
//-----------------------------------------
var onMouseEnterHandler = function(event) {
update(event);
};
var onMouseLeaveHandler = function() {
inner.style = "";
};
var onMouseMoveHandler = function(event) {
if (isTimeToUpdate()) {
update(event);
}
};
//-----------------------------------------
var update = function(event) {
mouse.updatePosition(event);
updateTransformStyle(
(mouse.y / inner.offsetHeight / 2).toFixed(2),
(mouse.x / inner.offsetWidth / 2).toFixed(2)
);
};
var updateTransformStyle = function(x, y) {
var style = "rotateX(" + x + "deg) rotateY(" + y + "deg)";
inner.style.transform = style;
inner.style.webkitTransform = style;
inner.style.mozTransform = style;
inner.style.msTransform = style;
inner.style.oTransform = style;
};
//-----------------------------------------
container.onmouseenter = onMouseEnterHandler;
container.onmouseleave = onMouseLeaveHandler;
container.onmousemove = onMouseMoveHandler;
});
body {
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
color: #333;
font-size: 14px;
line-height: 20px;
}
.container {
position: relative;
overflow: hidden;
-webkit-perspective: 50px;
perspective: 50px;
}
.inner {
position: static;
display: block;
width: 100%;
height: 100vh;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
background-image: url('https://www.planwallpaper.com/static/images/6909249-black-hd-background.jpg');
background-position: 50% 50%;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" class="container">
<div id="inner" class="inner"></div>
</div>
最佳答案
您的代码根据@Xufox 的评论更新:
$(function() {
// Init
var container = document.getElementById("container"),
inner = document.getElementById("inner");
// Mouse
var mouse = {
_x: 0,
_y: 0,
x: 0,
y: 0,
updatePosition: function(event) {
var e = event || window.event;
this.x = e.clientX - this._x;
this.y = (e.clientY - this._y) * -1;
},
setOrigin: function(e) {
this._x = e.offsetLeft + Math.floor(e.offsetWidth / 2);
this._y = e.offsetTop + Math.floor(e.offsetHeight / 2);
},
show: function() {
return "(" + this.x + ", " + this.y + ")";
}
};
// Track the mouse position relative to the center of the container.
mouse.setOrigin(container);
//-----------------------------------------
var counter = 0;
var updateRate = 10;
var isTimeToUpdate = function() {
return counter++ % updateRate === 0;
};
//-----------------------------------------
var onMouseEnterHandler = function(event) {
update(event);
};
var onMouseLeaveHandler = function() {
inner.style = "";
};
var onMouseMoveHandler = function(event) {
if (isTimeToUpdate()) {
update(event);
}
};
//-----------------------------------------
var update = function(event) {
mouse.updatePosition(event);
updateTransformStyle(
(mouse.y / inner.offsetHeight / 2).toFixed(2),
(mouse.x / inner.offsetWidth / 2).toFixed(2)
);
};
var updateTransformStyle = function(x, y) {
var style = "rotateX(" + x + "deg) rotateY(" + y + "deg)";
inner.style.transform = style;
inner.style.webkitTransform = style;
inner.style.mozTransform = style;
inner.style.msTransform = style;
inner.style.oTransform = style;
};
//-----------------------------------------
container.onmouseenter = onMouseEnterHandler;
container.onmouseleave = onMouseLeaveHandler;
container.onmousemove = onMouseMoveHandler;
});
html, body {margin:0 ;padding:0}
body {
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
color: #333;
font-size: 14px;
line-height: 20px;
}
.container {
position: relative;
overflow: hidden;
-webkit-perspective: 50px;
perspective: 50px;
}
.inner {
position: static;
display: block;
width: 120vw;
height: 120vh;
margin:-10vh 0 0 -10vw;
transition:.5s;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
background-image: url('https://www.planwallpaper.com/static/images/6909249-black-hd-background.jpg');
background-position: 50% 50%;
background-size: cover;
background-repeat: no-repeat;
bbackground-attachment: fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" class="container">
<div id="inner" class="inner"></div>
</div>
关于javascript - 完整的背景图像鼠标移动覆盖,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51811336/