通過js 插件控制圖片旋轉

本文轉載自查看原文 2012-12-26 11:16 3245 HTML/ javascript

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>旋轉圖片</title>
    <script type="text/javascript" src="coos.ui.rotate.js"></script>
</head>
<body>
    <div id="testdiv1" style="z-index:4; position: absolute; top:50%;  margin:0 auto; margin-top:-175px; left:50%; margin-left:-175px; width:350px; height:350px; background-image:url(shuijing.png)">
    </div>
    <div id="testdiv" style="z-index:10; position: absolute; top:50%;  margin:0 auto; margin-top:-175px; left:50%; margin-left:-175px;">
        <img alt="" id="theimage" border="0" src="star.png" />
    </div>
    <script type="text/javascript">
        var setTime;
        window.onload = function () {
            GetRTime();
        }
        function GetRTime() {
            rotateLeft('theimage', 1); //順時針1度旋轉
            var divObj = document.getElementById("testdiv");
            var divObj_Width = document.getElementById("testdiv").offsetHeight;
            var divObj_Height = document.getElementById("testdiv").offsetWidth;
            divObj.style.marginLeft = "-" + (divObj_Width / 2) + "px";
            divObj.style.marginTop = "-" + (divObj_Height / 2) + "px";
            //rotateRight('theimage', 90); //逆時針90度旋轉
            setTime = setTimeout(function () { GetRTime() }, 100)
        }
    </script>
</body>
</html>

附件：http://files.cnblogs.com/wangbogo/%E6%97%8B%E8%BD%AC%E5%9B%BE%E7%89%87-%E6%B0%B4%E6%99%B6%E7%90%83.rar

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JS控制圖片拖動放大縮小旋轉支持滾輪放大縮小 IE有效改造leaflet圖片插件Leaflet.ImageOverlay.Rotated，通過圖片矩形對角線上的2個頂點控制圖片的移動、旋轉和縮放，並且保持圖片長寬比不變，圖片不變形。 4.頁面查看圖片時控制圖片的旋轉、放大和縮放(修訂版) 在vue中通過js動態控制圖片按比列縮放 js 鼠標滾輪控制圖片放大縮小 js 鼠標滾輪控制圖片放大縮小 jQuery.rotate.js（控制圖片轉動） LaTeX 控制圖片的位置 JS控制圖片顯示的大小（圖片等比例縮放）【js】js 讓圖片旋轉