图片翻转-优快云博客

本文介绍了一个使用jQuery实现的图片旋转插件，支持浏览器环境下的图片顺时针和逆时针旋转，通过添加按钮触发旋转效果，并针对IE浏览器采用不同的实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<button id="turnleft">向左转</button>
	<button id="turnright">向右转</button>
	<div>
		<img src="select-bg.png" id="myimg"/>
	</div>
	<script type="text/javascript" src="js/jquery/jquery.js"></script>
	<script>
		(function($) {
			var isIe = $.browser.msie;
			function rotateIe(node , num) {
				if(node.is(":hidden")) {
					node.show();
				}
				node.css("filter" , "progid:DXImageTransform.Microsoft.BasicImage(Rotation=" + num + ")");
			}
			function rotateW3(node , num) {
				if(node.is(":visible")) {
					node.hide();
				}
				var canvas = node.next();
				if(!canvas.length || !canvas.is("canvas")) {
					canvas = $("<canvas>").insertAfter(node);
				}
				var w = node.width();
				var h = node.height();
				var wh = [[w,h] , [h,w] , [w,h] , [h,w]];
				var se = [[0,0] , [0,-h] , [-w,-h] , [-w,0]];
				canvas.attr({
					width : wh[num][0],
					height: wh[num][1]
				});
				var ctx = canvas[0].getContext("2d");
				if(num != 0) {
					ctx.rotate(90 * num * Math.PI/180);
				}
				ctx.drawImage(node[0],se[num][0],se[num][1]);
			}
			$.fn.rotateRight = function(d) {
				return this.each(function() {
					var $this = $(this);
					var num = $this.data("rotate");
					if(num === null) {
						num = 0;
					}
					num++;
					if(num == 4) {
						num = 0;
					}
					$this.data("rotate" , num);
					if(isIe) {
						rotateIe($this , num);
					} else {
						rotateW3($this , num);
					}
				});
			};	
			
			$.fn.rotateLeft = function() {
				return this.each(function() {
					var $this = $(this);
					var num = $this.data("rotate");
					if(num === null) {
						num = 4;
					}
					num--;
					if(num == -1) {
						num = 3;
					}
					$this.data("rotate" , num);
					if(isIe) {
						rotateIe($this , num);
					} else {
						rotateW3($this , num);
					}
				});
			};
		})(jQuery); 
		(function() {
			$(function() {
				$("#turnright").click(function() {
					$("#myimg").rotateRight();
				});
				$("#turnleft").click(function() {
					$("#myimg").rotateLeft();
				});
			});
		})(jQuery);
	</script>
</body>
</html>