用js写一个照片查看,照片动态加载
时间: 2024-03-08 11:48:13 浏览: 21
好的,下面是一个简单的实现:
HTML:
```html
<div id="photo-viewer">
<img id="photo" src="" alt="photo">
</div>
```
JS:
```javascript
const photoViewer = document.getElementById('photo-viewer');
const photo = document.getElementById('photo');
// 加载照片
function loadPhoto(url) {
photo.src = ''; // 清空图片
photoViewer.style.display = 'block'; // 显示照片查看器
const img = new Image();
img.onload = function() {
photo.src = url; // 加载图片
};
img.src = url;
}
// 关闭照片查看器
function closePhotoViewer() {
photo.src = ''; // 清空图片
photoViewer.style.display = 'none'; // 隐藏照片查看器
}
// 点击照片查看器以外的区域关闭照片查看器
photoViewer.addEventListener('click', function(event) {
if (event.target === photoViewer) {
closePhotoViewer();
}
});
```
使用方法:
在需要显示照片的地方调用 `loadPhoto(url)` 函数即可动态加载照片,点击照片以外的区域或调用 `closePhotoViewer()` 函数可关闭照片查看器。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)