javascript - JavaScript中使用数组的图像旋转
问题描述
我正在编写图像旋转功能。我创建了一个数组来存储变换函数的度数。
但是,我需要知道而不是递增数组,而是在数组之间移动下一个和上一个rotations
。
从左右切换不能按预期工作。
https://jsfiddle.net/andreas20/v94zLg8b/
rotations = ['90deg', '180deg', '270deg', '360deg']
let img = document.getElementById('img_blob');
let array_increment = 0
$('#left').click(() => {
if (array_increment > 3)
array_increment = 0
img.style.transform = 'rotate(-' + rotations[array_increment] + ')'
array_increment++
console.log(array_increment)
})
$('#right').click(() => {
if (array_increment > 3)
array_increment = 0
img.style.transform = 'rotate(' + rotations[array_increment] + ')'
array_increment++
console.log(array_increment)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="left">Left</button>
<button id="right">Right</button><br>
<img id="img_blob" src="https://i.imgur.com/vgD5ycf.jpg">
解决方案
您可以在不使用数组的情况下进行类似的旋转
let img = document.getElementById('img_blob');
let rotationValue = 0;
$('#left').click(() => rotate(-1));
$('#right').click(() => rotate(1));
function rotate(direction) {
rotationValue += 90 * direction;
rotationValue = rotationValue % 360;
img.style.transform = `rotate(${rotationValue}deg)`;
// console.log(rotationValue);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="img_blob" src="https://dummyimage.com/150x150/000/fff" />
<button id="left">Left</button>
<button id="right">Right</button>
推荐阅读
- deployment - SSAS 添加描述属性导致部署错误
- xcode - 点击列表中的文本并推送到其他屏幕(视图)swiftUI
- java - 在 JSP 上使用 Jquery Ajax 在 Datatables 上显示
- ruby-on-rails - ArgumentError: '1' 不是有效的种类。枚举值未保存在数据库中
- angular - 命令错误:$ionic cordova platform add android
- android - 如何检测键盘何时处于无调整模式?
- here-api - HERE 地图中的标签非常小
- oracle - 在 oracle 中应用系统日期
- kubernetes - Calico 节点无法使用服务器的 IP 地址构建
- java - 在 Intellij IDEA 中运行 maven 目标全新安装得到错误 Invalid initial heap size: -Xms=256m