在WallpaperEngine上看到的一个效果,找了一些资料尝试实现。鼠标划过显示另一张图片的效果是有了，但是透视边缘的模糊效果不会做，先记录在这，如果读者有会的，可以留言交流一下。
想实现的效果
还原的效果
demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>gentle</title>
<style>
html, body {
margin: 0;
padding: 0;
}
html, body, .dress-view {
width: 100%;
height: 100%;
}
.dress-view {
background-image: url("https://images.cnblogs.com/cnblogs_com/ast935478677/1855237/o_200927050159surface.jpg");
background-repeat: no-repeat;
background-size: cover;
background-color: transparent;
border: 0;
}
.gentle-view {
position: fixed;
width: 200px; /*透视矩形长*/
height: 200px; /*透视矩形宽*/
border-radius: 100px; /*透视圆角（为长宽的一半时显示为园）*/
background-attachment: fixed;
background-image: url("https://images.cnblogs.com/cnblogs_com/ast935478677/1855237/o_200927050206undersurface.jpg");
background-repeat: no-repeat;
background-size: cover;
}
</style>
<script type="text/javascript">
document.onmousemove = function (event) {
var gentleView = document.getElementById(‘gentle-view‘);
var mousePos = getMousePos (gentleView, 0, 0, event);
gentleView.style.display = "inline";
gentleView.style.left = mousePos.X - 100 + "px"; //这行和下一行的100对应矩形长宽的一半
gentleView.style.top = mousePos.Y - 100 + "px";
};
function getMousePos (object, x, y, event) { //鼠标定位赋值函数
var posX = 0, posY = 0; //临时变量值
var e = event || window.event; //标准化事件对象
var scrollTop; //竖向滚动条位置
var scrollLeft; //横向滚动条位置
if (document.body && document.body.scrollTop && document.body.scrollLeft) { //获取横竖滚动条位置
scrollTop=document.body.scrollTop;
scrollLeft=document.body.scrollLeft;
}
if (document.documentElement && document.documentElement.scrollTop && document.documentElement.scrollLeft) { //同上，兼容写法
scrollTop=document.documentElement.scrollTop;
scrollLeft=document.documentElement.scrollLeft;
}
if (e.pageX || e.pageY) { //获取鼠标指针的当前坐标值
posX = e.pageX;
posY = e.pageY;
} else if (e.clientX || e.clientY) {
posX = event.clientX + scrollTop;
posY = event.clientY + scrollLeft;
}
return{ //加上偏移值xy，返回计算后的位置
X : posX + x, Y : posY + y
}
}
function init() {
var dressView = document.getElementById(‘dress-view‘);
var gentleView = document.getElementById(‘gentle-view‘);
var windowWidth = dressView.offsetWidth;
var windowHeight = dressView.offsetHeight;
var imgWidth = windowWidth;
dressView.style.backgroundSize = imgWidth + "px " + windowHeight + "px";
gentleView.style.backgroundSize = imgWidth + "px " + windowHeight + "px";
}
function hiddenGentleView() {
var gentleView = document.getElementById(‘gentle-view‘);
gentleView.style.display = "none";
}
</script>
</head>
<body>
<div id="dress-view" class="dress-view" onload="" onresize="" onmouseout="hiddenGentleView();">
<div id="gentle-view" class="gentle-view"></div>
</div>
</body>
</html>