欢迎访问我的个人博客：三秋邦

仿澵浪微博图片放大缩小以及向左向右转（附DEMO)

感觉没有什么好说的，而且代码也比较简单，水文一篇来祝贺咱创了个贴码党。

效果图片：

点击向左转时的效果

点击图时放大的效果

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

 如果没有看懂的，自己下载代码运行一篇吧。

Code Down

posted @ 2012-08-22 21:26  追夢  阅读(689)  评论(0)  编辑  收藏  举报
欢迎访问我的个人博客：三秋邦