感觉没有什么好说的，而且代码也比较简单，水文一篇来祝贺咱创了个贴码党。
效果图片：
点击向左转时的效果
点击图时放大的效果
<head runat="server"> <title>图片向左向右转</title> <link href="Content/Style/Index.css" rel="stylesheet" type="text/css" /> <%--本段JS主要是实现图片的向左向右转--%> <script type="text/javascript"> function rotate(img, turn) { var $img = document.getElementById(img); if (!$img || !turn) { return false; } var $n = $img.getAttribute('step'); if ($n == null) { $n = 0; } if (turn == "right") { ($n == 3) ? $n = 0 : $n++; } else if (turn == "left") { ($n == 0) ? $n = 3 : $n--; } $img.setAttribute("step", $n); //MSIE if (document.all) { $img.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(rotation=" + $n + ")"; //HACK FOR MSIE8 switch ($n) { case 0: $img.parentNode.style.height = $img.height; break; case 1: $img.parentNode.style.height = $img.width; break; case 2: $img.parentNode.style.height = $img.height; break; case 3: $img.parentNode.style.height = $img.width; break; } //end switch //DOM } else { var c = document.getElementById("canvas_" + img); if (c == null) { $img.style.visibility = "hidden"; $img.style.position = "absolute"; c = document.createElement("canvas"); c.setAttribute("id", "canvas_" + img); $img.parentNode.appendChild(c); } var canvasContext = c.getContext("2d"); switch ($n) { default: case 0: c.setAttribute("width", $img.width); c.setAttribute("height", $img.height); canvasContext.rotate(0 * Math.PI / 180); canvasContext.drawImage($img, 0, 0); break; case 1: c.setAttribute("width", $img.height); c.setAttribute("height", $img.width); canvasContext.rotate(90 * Math.PI / 180); canvasContext.drawImage($img, 0, -$img.height); break; case 2: c.setAttribute('width', $img.width); c.setAttribute('height', $img.height); canvasContext.rotate(180 * Math.PI / 180); canvasContext.drawImage($img, -$img.width, -$img.height); break; case 3: c.setAttribute('width', $img.height); c.setAttribute('height', $img.width); canvasContext.rotate(270 * Math.PI / 180); canvasContext.drawImage($img, -$img.width, 0); break; } } } </script> <%--//本段JS主要是实现图片的放大以及缩小--%> <script language="JavaScript" type="text/javascript"> cur = 1; //定义全局变量 function BigOrSmall(cursor_zoom) { var $cursor_zoom = document.getElementById(cursor_zoom); cur = cur * (-1); if (cur == 1) { $cursor_zoom.height = "100"; $cursor_zoom.style.cursor = "url('Content/Images/big.cur'), auto"; } else { $cursor_zoom.height = "300"; $cursor_zoom.style.cursor = "url('Content/Images/small.cur'), auto"; } } </script> </head> <body> <div> <a id="turn_left" href="javascript:void(0)" onclick="rotate('cursor_zoom','left');"> 向左转</a> <a id="turn_right" href="javascript:void(0)" onclick="rotate('cursor_zoom','right');"> 向右转</a> </div> <br /> <div> <img id="cursor_zoom" style="cursor: url('Content/Images/big.cur'),auto;" height="100px" src="Content/Images/12.jpg" name="cursor_zoom" onclick="BigOrSmall('cursor_zoom');" alt="李小龙" /> </div> </body>
以下是样式：
a { text-decoration: none; font-size: 12px; color: #D459AA; } #turn_left { background-image: url("http://www.cnblogs.com/Content/Images/ico.png"); background-repeat: no-repeat; padding: 0 0 0 12px; background-position: 0 -937px; } #turn_right { background-image: url("http://www.cnblogs.com/Content/Images/ico.png"); background-repeat: no-repeat; padding: 0 0 0 12px; background-position: 0 -966px; }
如果没有看懂的，自己下载代码运行一篇吧。