HTML鼠标划过更换图片（透视X-ray）

       在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>
posted @ 2020-09-27 13:41  吃猫的鱼℘  阅读(984)  评论(2)  编辑  收藏  举报
Document