创建HTML文件,实现划过小图显示大图效果
时间: 2024-01-06 10:04:06 浏览: 34
好的,下面是实现划过小图显示大图效果的HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>划过小图显示大图效果</title>
<style>
#small-img {
width: 200px;
height: 200px;
position: relative;
cursor: pointer;
}
#small-img img {
width: 100%;
height: 100%;
display: block;
}
#big-img {
display: none;
position: absolute;
top: 0;
left: 220px;
width: 400px;
height: 400px;
}
#big-img img {
width: 100%;
height: 100%;
display: block;
}
</style>
</head>
<body>
<div id="small-img">
<img src="small-img.jpg" alt="小图">
<div id="big-img">
<img src="big-img.jpg" alt="大图">
</div>
</div>
<script>
var smallImg = document.getElementById("small-img");
var bigImg = document.getElementById("big-img");
smallImg.onmouseover = function() {
bigImg.style.display = "block";
}
smallImg.onmousemove = function(e) {
var x = e.clientX - smallImg.offsetLeft;
var y = e.clientY - smallImg.offsetTop;
var left = -x * 2;
var top = -y * 2;
bigImg.style.backgroundPosition = left + "px " + top + "px";
}
smallImg.onmouseout = function() {
bigImg.style.display = "none";
}
</script>
</body>
</html>
```
说明:
- 小图和大图分别使用`<img>`标签展示,小图使用`<div>`包裹,方便设置样式和事件。
- 小图和大图都需要设置宽高,大图需要使用`position: absolute`绝对定位到小图旁边,并且初始状态为`display: none`不显示。
- 当鼠标移到小图上时,需要将大图设置为显示状态。
- 当鼠标在小图上移动时,需要计算出鼠标在小图上的位置,并且根据这个位置设置大图的背景位置,从而实现划过小图显示大图的效果。
- 当鼠标移出小图时,需要将大图设置为不显示状态。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)