JavaScript案例——网页特效之旋转

来源：互联网发布：豆瓣python 编辑：程序博客网时间：2024/06/02 01:58

ps：这个旋转不能再IE浏览器中正常打开，因为IE浏览器不兼容CSS3

这里使用的重点属性是transform和rotate方法

定义：
transform属性是向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
rotate() 方法旋转画布的坐标系统。
语法
rotate(angle)
注：angle 旋转的量，用弧度表示。正值表示顺时针方向旋转，负值表示逆时针方向旋转
文中用的deg和angle一样
-

关于rotate说明

rotate() 方法通过指定一个角度，改变了画布坐标和 Web 浏览器中的元素的像素之间的映射，使得任意后续绘图在画布中都显示为旋转的。它并没有旋转元素本身。注意，这个角度是用弧度指定的。
如果要把角度转换为弧度，请乘以 Math.PI 并除以 180。

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style>            #body{                position: absolute;                width: 300px;                height: 300px;                top: 200px;                left: 200px;            }            #a{                position: absolute;                border: 1px solid #goldenrod;                top: 140px;                width: 300px;                height: 20px;                background-color: goldenrod;                transform: rotate(0deg);            }            #b{                position: absolute;                border: 1px solid #goldenrod;                left: 140px;                width: 20px;                height: 300px;                background-color: goldenrod;                transform: rotate(0deg);            }        </style>        <script>            var i = 0;            var xz_id;            var sd = 10;            var ids = new Array();            window.onload = function(){                xz = document.getElementById("xz");                a = document.getElementById("body");                mess = document.getElementById("mess");                xz.onclick = function(){                    id = setInterval("xuanzhuan()",10);                    ids.push(id);                    mess.innerHTML = ids.length;                }                document.getElementById("tz").onclick = function(){                    clearInterval(ids[ids.length-1]);                    ids.pop();                    mess.innerHTML = ids.length;                }            }            function xuanzhuan(){                if(i>360){                    i=0;                }else{                    i++;                }                var s = "rotate("+i+"deg)";                a.style.transform = s;            }        </script>    </head>    <body>        <button id="xz">加速</button>        <button id="tz">减速</button><br />        <span id="mess"></span>        <div id="body">            <div id="a"></div>            <div id="b"></div>        </div>    </body></html><!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <body>    </body></html>

加速、减速

阅读全文

1 0