In this tutorial we will create a How to Flip your Background Image using jQuery. This tutorial purpose is to allow you to flip your background image dynamically. This will cover all the functionality that will flip your image background. I will provide a sample program to show the actual coding of this tutorial.
This tutorial is simple and easy to understand just follow the instruction I provided and you can do it without a problem. This program can be use to any system that needed to manipulate images directly. I will give my best to provide you the easiest way of creating this program Flip Background Image. So let's do the coding.
First you have to download the jQuery plugin.
Here is the link for the jQuery that i used in this tutorial https://jquery.com/.
Lastly, this is the link for the template that i used for the layout design https://getbootstrap.com/.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> </div> </nav> <div class="col-md-6 well"> <hr style="border-top:1px dotted #ccc;"/> <br /> <br /> <img id="myImage" src="image.png" width="630"> </div> </body> </html>
$(document).ready(function(){ $("#flip").on("click",function(){ if($("#myImage").css("transform") == 'none') { $("#myImage").css("transform","rotatey(180deg)"); } }); $("#revert").on("click",function(){ $("#myImage").css("transform",""); }); });
In the given code we first call the basic jQuery ready event to signal that the DOM of the page is now ready to be use. Then we will create function that will call the id of our button using the jQuery id target function $(""), and we bind it with the on() function. After that we will call the image id and use the css function and we will just tweak the transform by rotatey with 180degof value, this will force our background image flip the y position.
The How to Flip your Background Image using jQuery source code that I provide can be download below. Please kindly click the download button.
There you have it we successfully created How to Flip your Background Image using jQuery. I hope that this simple tutorial help you to what you are looking for. For more updates and tutorials just kindly visit this site. Enjoy Coding!
More Tutorials for JavaScript Language