js放大镜document.querySelector
时间: 2023-11-24 08:51:28 浏览: 35
以下是一个使用`document.querySelector`实现的js放大镜的例子:
```html
<!DOCTYPE html>
<html>
<head>
<title>JS放大镜</title>
<style type="text/css">
#small {
width: 400px;
height: 400px;
position: relative;
background-image: url('small.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
#big {
width: 400px;
height: 400px;
position: absolute;
top: 0;
left: 450px;
background-image: url('big.jpg');
background-repeat: no-repeat;
background-size: 800px 800px;
display: none;
}
</style>
</head>
<body>
<div id="small"></div>
<div id="big"></div>
<script type="text/javascript">
var small = document.querySelector('#small');
var big = document.querySelector('#big');
small.addEventListener('mousemove', function(e) {
var x = e.clientX - this.offsetLeft;
var y = e.clientY - this.offsetTop;
var bgX = -x * 2 + 'px';
var bgY = -y * 2 + 'px';
big.style.backgroundPosition = bgX + ' ' + bgY;
big.style.display = 'block';
});
small.addEventListener('mouseout', function() {
big.style.display = 'none';
});
</script>
</body>
</html>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)