翻轉與圖像的Div或只是圖像onClick =翻轉（'ID NAME'）;

我想要水平和垂直翻轉圖像我該怎麼做？ onClick函數通過它的id。翻轉與圖像的Div或只是圖像onClick =翻轉（'ID NAME'）;

<script> 
    function fliph(imageid){ 
     var imageid = imageid; 
     //What Should I have to Type HERE??? 
    } 
    function flipv(imageid){ 
     var imageid = imageid; 
     //What Should I have to Type HERE??? 
    } 
</script> 
<input type="submit" name="flip" value="Flip Horizontal" onClick="fliph('imageid')" /> 
<input type="submit" name="flip" value="Flip Vertical" onClick="flipv('imageid')" /> 
<img src="http://classihome.com/uploads/gallery/1453292889developlda.jpg" id="imageid">

來源

2016-04-12 Hassan Ali

檢查這兩個環節[1]（http://stackoverflow.com/questions/14694205/flipping-an-image-with-js-jquery）和[2]（http://stackoverflow.com/questions/507138/how-do-i-add-a-class-to-a-given-element）以及合併... – SamGhatak

如果可能的話使用jQuery ... – SamGhatak

@SamGhatak你展示的鏈接是完美的。但是當我做他們複製他們不工作任何腳本文件必須附加可以請你給我我試過這些鏈接。 –

什麼功能都做的是，他們發現所供給的ID的元素，然後分別切換.flipv或.fliph類。

然後，我們使用CSS變換來縮放圖像。

注意：我使用的是原生JavaScript的classList，但它在舊版瀏覽器中不起作用。如果您已經在使用jQuery，我鼓勵您使用類似$('#' + imageid).toggleClass('flipv');的內容。

function fliph (imageId) { 
 
    var el = document.getElementById(imageId); 
 
    el.classList.toggle('fliph'); 
 
} 
 

 
function flipv (imageId) { 
 
    var el = document.getElementById(imageId); 
 
    el.classList.toggle('flipv'); 
 
}

.flipv { 
 
    transform: scaleY(-1); 
 
} 
 

 
.fliph { 
 
    transform: scaleX(-1); 
 
} 
 

 
.flipv.fliph { 
 
    transform: scale(-1, -1); 
 
}

<input type="submit" name="flip" value="Flip Horizontal" onClick="fliph('imageid')" /> 
 
<input type="submit" name="flip" value="Flip Vertical" onClick="flipv('imageid')" /> 
 
<img src="http://classihome.com/uploads/gallery/1453292889developlda.jpg" id="imageid">

編輯：使用CSS類，而不是內聯樣式。

來源

2016-04-12 12:47:21 Phillip

你做得很好但是它不橫向移動也請用橫向更新。 –

我剛編輯我的答案 – Phillip

偉人！非常感謝 –

我假設翻轉意味着旋轉90度。這樣你就可以有四個步驟。您將訪問圖像元素的樣式屬性。

這就是你的代碼的樣子。

<body> 

    <img id="imageId" style="border:1px solid blue; width:50px; height:30px;"> 

    <button onclick="flip('imageId')"/> 


</body> 
<script> 
var deg = 90; 
var currentRotation = 0; 
function flip(imageId){ 
    var imageRef = document.getElementById(imageId); 
    if(currentRotation === 270){ 
    currentRotation = 0; 
} 
else { 
     currentRotation += deg; 
} 

imageRef.style.webkitTransform = 'rotate('+currentRotation+'deg)'; 
imageRef.style.mozTransform = 'rotate('+currentRotation+'deg)'; 
imageRef.style.msTransform  = 'rotate('+currentRotation+'deg)'; 
imageRef.style.oTransform  = 'rotate('+currentRotation+'deg)'; 
imageRef.style.transform  = 'rotate('+currentRotation+'deg)'; 
} 
</script> 
</html>

來源

2016-04-12 13:00:05 LoreV

翻轉與圖像的Div或只是圖像onClick =翻轉（'ID NAME'）;

回答

相關問題