画像でDivを反転するか、単に画像onClick = flip（ 'ID NAME'）;

イメージを横方向および縦方向に反転したいどのようにすればいいですか？そのidを通じてonClick関数を呼び出します。両方の機能は何画像でDivを反転するか、単に画像onClick = flip（ '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つのリンクを確認し、[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">

EDIT：代わりにスタイルをインライン化を使用するCSSクラス。

出典

2016-04-12 12:47:21 Phillip

水平に動かないでください。水平にも更新してください。 –

私はちょうど私の答えを編集しました – Phillip

グレートマン!!!どうもありがとう –

フリッピングが90度回転しているとします。そうすれば、4つのステップができます。イメージ要素のstyleプロパティにアクセスします。

これはコードの外観です。

<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 = flip（ 'ID NAME'）;

答えて

関連する問題