使用input range滑块，控制元素transform rotate旋转样式

最新推荐文章于 2022-08-11 02:46:36 发布

banyi5246

最新推荐文章于 2022-08-11 02:46:36 发布

阅读量235

点赞数

原文链接：http://www.cnblogs.com/Arlar/p/6249733.html

版权

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <!--
        第一步：设置div旋转对象和input滑块的基本属性值
        第二步：给input滑块添加一个onchange事件，获取滑块停止时的属性值
        第三步：将获取的input滑块属性值设置为div的旋转属性，附带显示当前旋转值
    -->

    <div id="div1">
        transfrom rotate
    </div>

    <div>
        <input type="range" min="-360" max="360" value="20"  οnchange="rotate(this.value)" /> <br />
        transform:rotate(<span id="span1">20</span>deg);
    </div>

    <style>
        #div1 {
            width:100px;
            height:70px;
            background-color:red;
            margin:50px 0;

            transform:rotate(20deg);
            -ms-transform:rotate(7deg); /* Firefox */
            -moz-transform:rotate(7deg); /* Firefox */
            -webkit-transform:rotate(7deg); /* Safari and Chrome */
            -o-transform:rotate(7deg); /* Safari and Chrome */
        }
    </style>

    <script>
        function rotate(value) {
            var obj1 = document.getElementById("div1");
            obj1.style.transform = "rotate(" + value + "deg)";
            obj1.style.webkitTransform = "rotate(" + value + "deg)";
            obj1.style.msTransform = "rotate(" + value + "deg)";
            obj1.style.MozTransform = "rotate(" + value + "deg)";
            obj1.style.OTransform = "rotate(" + value + "deg)";


            var obj2 = document.getElementById("span1");
            obj2.innerHTML = value;
        }
    </script>
</body>
</html>

转载于:https://www.cnblogs.com/Arlar/p/6249733.html