使用JS通过@ohos.window (窗口)写一个图片点击自适应变大和变小的完整代码
时间: 2024-02-06 08:12:02 浏览: 84
好的,以下是使用JS通过@ohos.window写一个图片点击自适应变大和变小的完整代码:
```javascript
// 获取图片元素
const img = document.querySelector('img');
// 获取窗口大小
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
// 图片初始大小
const initWidth = img.width;
const initHeight = img.height;
// 图片放大后的大小
const maxWidth = windowWidth * 0.8;
const maxHeight = windowHeight * 0.8;
// 绑定点击事件
img.addEventListener('click', function () {
// 判断图片是否已经放大
if (img.width === initWidth && img.height === initHeight) {
// 放大图片
img.width = maxWidth;
img.height = maxHeight;
} else {
// 缩小图片
img.width = initWidth;
img.height = initHeight;
}
});
```
在上述代码中,我们首先获取图片元素和窗口大小,并计算出图片放大后的最大宽度和高度。然后,我们给图片绑定一个点击事件,判断图片当前是否已经放大,如果是,则缩小图片,否则放大图片。最后,我们分别设置图片的宽度和高度即可。
阅读全文