通过css鼠标事件简单实现京东放大镜效果
Posted 小蜗牛
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了通过css鼠标事件简单实现京东放大镜效果相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="referrer" content="no-referrer">
<title></title>
<style type="text/css">
.zoom{
width: 800px;
height: 250px;
display: flex;
margin: 0 auto;
}
.left{
width: 400px;
height: 250px;
background-image:url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F1%2F57bbdd4add0f3.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625667572&t=ee98422ddcd780a23692e18f809a3aaa");
background-size: 400px 250px;
position: relative;
}
.shade{
display: none;
width: 200px;
height: 125px;
background-color: rgba(255,255,0,.5);
position: absolute;
}
.right{
display: none;
width: 400px;
height: 250px;
background-image:url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F1%2F57bbdd4add0f3.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625667572&t=ee98422ddcd780a23692e18f809a3aaa");
background-size: 800px 500px;
}
</style>
</head>
<body>
<!-- 放大镜 -->
<div class="zoom">
<div class="left">
<div class="shade"></div>
</div>
<div class="right"></div>
</div>
<script type="text/javascript">
var zoom = document.querySelector(".zoom");
var left = document.querySelector(".left");
var right = document.querySelector(".right");
var shade = document.querySelector(".shade");
/* 鼠标移入遮罩显示 */
left.onmouseenter = function(){
shade.style.display = "block";
right.style.display = "block"
}
/* 鼠标移出遮罩影藏 */
left.onmouseleave =function(){
shade.style.display = "none"
right.style.display = "none"
}
/* 监听鼠标在left上的移动 */
left.onmousemove = function(event){
// console.log(event)
var x = event.pageX - 100 - zoom.offsetLeft;
var y = event.pageY - 62.5 - zoom.offsetTop;
if (x < 0) {
x = 0;
}
if(x > 200){
x = 200
}
if(y<0){
y=0;
}
if(y>125){
y=125;
}
shade.style.left = x + "px";
shade.style.top = y + "px";
right.style.backgroundPositionX = -2*x + "px";
right.style.backgroundPositionY = -2*y + "px";
}
</script>
</body>
</html>
以上是关于通过css鼠标事件简单实现京东放大镜效果的主要内容，如果未能解决你的问题，请参考以下文章