Flip die Div mit Bild oder nur Bild onClick = flip ('ID NAME');

Ich möchte Bild horizontal und vertikal spiegeln Wie kann ich es tun? onClick funktioniert über seine ID.Flip die Div mit Bild oder nur Bild 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">

Quelle

2016-04-12 Hassan Ali

Schauen Sie sich diese beiden Links [1] (http://stackoverflow.com/questions/14694205/flipping-an-image-with-js-jquery) und [2] (http://stackoverflow.com/questions/507138/how-do-i-add-a-class-to-a-given-element) und kombinieren .... – SamGhatak

Und verwenden Sie jQuery wenn möglich ... – SamGhatak

@SamGhatak Der Link, den Sie zeigen, sind perfekt. aber wenn ich sie kopiere sie arbeiten nicht irgendwelche Skript-Datei müssen anhängen können Sie bitte geben Sie mir den Link, den ich mit diesen versucht habe. –

Was beide Funktionen tun, ist sie das Element durch die mitgelieferten ID finden, und dann schaltet .flipv oder .fliph Klassen sind.

Wir verwenden dann CSS-Transformationen, um die Bilder zu skalieren.

Hinweis: Ich verwende classList, die natives JavaScript ist, aber es funktioniert nicht in älteren Browsern. Wenn Sie bereits jQuery verwenden, sollten Sie stattdessen etwas wie $('#' + imageid).toggleClass('flipv'); verwenden.

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: Verwenden Sie CSS-Klassen statt die Stile von inlining.

Quelle

2016-04-12 12:47:21 Phillip

Sie sind toll, aber es bewegt sich nicht horizontal Bitte aktualisieren Sie auch mit horizontal. –

Ich habe gerade meine Antwort bearbeitet – Phillip

Great Man !!! Danke vielmals –

Ich gehe davon aus, dass das Drehen bedeutet, um 90 Grad zu drehen. Auf diese Weise können Sie vier Schritte haben. Sie gelangen auf die Stileigenschaft des Bildelements.

So sollte Ihr Code aussehen.

<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>

Quelle

2016-04-12 13:00:05 LoreV

Flip die Div mit Bild oder nur Bild onClick = flip ('ID NAME');

Antwort

Verwandte Themen