微信小程序中如何实现 点击图片 图片旋转360度
时间: 2024-03-20 18:44:16 浏览: 207
仿微信朋友圈图片拖拽排序 wx-drag-sort.rar
要在微信小程序中实现点击图片后旋转 360 度的效果,可以使用 CSS3 动画来实现。具体步骤如下:
1. 在 wxml 文件中创建一个图片标签,并给该标签添加一个 id,例如:
```
<image src="{{imageSrc}}" id="rotateImg"></image>
```
2. 在 wxss 文件中为该标签添加样式,使其可以旋转:
```
#rotateImg {
transition: transform 1s;
}
.rotate {
transform: rotate(360deg);
}
```
3. 在 js 文件中为该标签添加点击事件,并在点击事件中为该标签添加一个类名:
```
Page({
rotateImage: function() {
var img = document.getElementById('rotateImg');
img.classList.add('rotate');
}
})
```
这样,当用户点击图片时,图片就会旋转 360 度的效果。
阅读全文