簡短的問題，如何檢查影像是否已經使用 Jquery 旋轉，例如：
if($("image").css({transform}) == "rotate(-180deg)"){ do something}
uj5u.com熱心網友回復：
最佳實踐是使用您想要的 css 條件創建一個類：
.rotated {
transform: rotate(-180deg);
}
然后檢查imghasClass：
if($("img").hasClass("rotated")){
alert('true...')
} else {
alert('false...')
}
您可能還需要.addClass()& .removeClass()& .toggleClass()。
看看@Jquery API 檔案
uj5u.com熱心網友回復：
您會認為這很容易 - 但因為它是一個轉換屬性，所以您不會得到這樣簡單的回應。解決方案是原始 javascript - jQuery 唯一可以參與的地方是獲取元素。正如本文所示，計算元素當前角度的方法......
function getCurrentAngle(el) {
let st = window.getComputedStyle(el, null);
let tr = st.getPropertyValue("-webkit-transform") ||
st.getPropertyValue("-moz-transform") ||
st.getPropertyValue("-ms-transform") ||
st.getPropertyValue("-o-transform") ||
st.getPropertyValue("transform") ||
"Either no transform set, or browser doesn't do getComputedStyle";
// console.log('this returns a matrix transform', tr);
// Here is the way we can turn that into what we're looking for
// rotate(Xdeg) = matrix(cos(X), sin(X), -sin(X), cos(X), 0, 0);
let values = tr.split('(')[1].split(')')[0].split(',');
let a = values[0]; // 0.866025
let b = values[1]; // 0.5
let c = values[2]; // -0.5
let d = values[3]; // 0.866025
let angle = Math.round(Math.asin(b) * (180 / Math.PI));
return angle;
}
$(document).ready(function() {
let el = $("#i-am-rotated")[0]; // use the first index here, which is the raw HTML element
console.log(getCurrentAngle(el));
setTimeout(() => {
el.style.transform = "rotate(49deg)";
}, 500)
setTimeout(() => {
console.log(getCurrentAngle(el));
}, 1000)
}).container {
padding: 50px;
background: #f0f0f0;
text-align: center;
}
#i-am-rotated {
display: inline-block;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
transition: transform .5s;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='container'>
<div id='i-am-rotated'>I am rotated</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/373258.html
標籤：javascript 查询 旋转变换