In this article I am trying to make an Image Rotator using jQuery and HTML which is rotate an image in degrees.
In this article I am going to create a demo which is rotate an image or any HTML element in degrees.
HTML Code:
<body>
<table cellpadding="15" cellspacing="15">
<tr>
<td>
<img src="http://www.mindstick.com/Employeesection/Image/Multi_purpose.png"id="imgTag"
height="150px" width="150px" border="1" />
</td>
</tr>
</table>
<br/>
Rotate:
<input type="range" min="-360" max="360" value="0"onchange="rotator(this.value)" /><br />
Rotate image in <span id="span1">Zero deg</span>
</body>
Description:
Above HTML code will make a table and in the table have a image with height="150px" width="150px", and also have a range type input with minimum value -360 and maximum value 360 and also handle onchange event and it will pass the value in JavaScript function.
JavaScript Code:
<script type="text/javascript">
function rotator(value) {
document.getElementById('imgTag').style.webkitTransform="rotate("+value+"deg)";
document.getElementById('imgTag').style.msTransform ="rotate("+value+"deg)";
document.getElementById('imgTag').style.MozTransform="rotate("+value+"deg)";
document.getElementById('imgTag').style.OTransform ="rotate("+value+"deg)";
document.getElementById('imgTag').style.transform="rotate("+value+"deg)";
document.getElementById('span1').innerHTML=value+" deg";
}
</script>
Description:
In above JavaScript code has a rotator function which takes a value from input type range on change event and in the rotator function body set the rotation degrees.
Leave Comment