怎样用js实现文字的环形旋转？

楼主这个不是JavaScript的，而是flash做的，你右键可以点击一下就会看出是flash。js是可以做的很炫，但是远远撵不上flash

好像有js的，应该见过。确实flash比js的效果好些。
这是个简单的旋转，网上的。<SCRIPT language=javascript>Phrase="我的旋转文字,环游世界"
Balises=""
Taille=40;
Midx=100;
Decal=0.5;
Nb=Phrase.length;
y=-10000;
for (x=0;x<Nb;x++){
  Balises=Balises + '<DIV Id=L' + x + ' STYLE="width:3;font-family: Courier New;font-weight:bold;position:absolute;top:40;left:50;z-index:0">' + Phrase.charAt(x) + '</DIV>'
}
document.write (Balises);
Time=window.setInterval("Alors()",10);
Alpha=5;
I_Alpha=0.05;function Alors(){
    Alpha=Alpha-I_Alpha;
    for (x=0;x<Nb;x++){
        Alpha1=Alpha+Decal*x;
        Cosine=Math.cos(Alpha1);
        Ob=document.all("L"+x);
        Ob.style.posLeft=Midx+100*Math.sin(Alpha1)+50;
        Ob.style.zIndex=20*Cosine;
        Ob.style.fontSize=Taille+25*Cosine;
        Ob.style.color="rgb("+ (27+Cosine*80+50) + ","+ (127+Cosine*80+50) + ",0)";
    }
}</SCRIPT>

这个我也看到过。我就是想用鼠标控制它的旋转，这个好像很难得样子，如果有flash的我也要，最好给个下载地址，再次谢了

贡献一个JS写的，哈哈<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        *{margin:0px; font-family:Tahoma;cursor:default;}
        body{background-color:#888888;}
    </style>
</head>
<body>
    <div id="dvMain" style="background-color:#222222; width:800px; height:600px; overflow:hidden; position:absolute; z-index:-200;"></div>
</body>
</html>
<script type="text/javascript">
    var jsBox = {
        tagObj: function(id) {
            return document.getElementById(id);
        },

        strJoin: function(strArr) {
            return strArr.join("");
        }
    }

    //var tagArr = [];
    var tagArr = [[10, 100, 100, "小沈阳"], [49, 50, 0, "赵本山"], [50, -50, 60, "李如意"], [-49, -50, 0, "张三丰"], [-100, 50, 30, "李玮峰"], [0, 0, -100, "业务到"],[60,21,54,"也奉献"]];
    //var tagArr = [[0, 0, 100, "A"], [0, 100, 0, "B"], [100, 0, 0, "C"], [0, -100, 0, "D"], [-100, 0, 0, "E"], [0, 0, -100, "F"]];
    var r = 100;
    var o = [200, 200];
    var fs_c = 20;
    var c_c = 10;
    var rdegree = 0;
    var siv = null, sto = null;
    var sivSeed;

    var init_tagArr = function() {
        var x, y, z;
        for (var i = 0, ilen = 26; i < ilen; i++) {
            x = Math.floor(Math.random() * 201) - 100;
            y = Math.floor(Math.random() * 201) - 100;
            z = Math.floor(Math.random() * 201) - 100;
            tagArr.push([x, y, z, i + "", 0, 0, 0, 0]);
        }
    };

    var tagUnit = function() {
        var span = document.createElement("span");
        span.style.position = "absolute";
        return span;
    };

    var initTag = function() {
        var i = 0;
        var main = jsBox.tagObj("dvMain");
        var taLen = tagArr.length;
        var tmpZ, tmpZM, tmpZD;
        var c0, c1, c2;
        var obj;
        var objStyle;
        while (i < taLen) {
            obj = tagUnit();
            obj.id = "sp" + i;
            if (obj.innerText != undefined) {
                obj.innerText = tagArr[i][3];
            }
            else {
                obj.textContent = tagArr[i][3];
            }
            tmpZ = Math.floor(tagArr[i][2] / 30);
            /*tmpZ = Math.round(tagArr[i][2] / 10);
            tmpZD = Math.floor(tmpZ / 3);
            tmpZM = tmpZ % 3;*/
            objStyle = obj.style;
            objStyle.zIndex = tagArr[i][2];
            objStyle.fontSize = Math.round((tagArr[i][2]) / 10) + fs_c + "px";
            c2 = c1 = c0 = c_c + tmpZ;

            objStyle.color = "#" + c0.toString(16) + "" + c1.toString(16) + "" + c2.toString(16);
            objStyle.top = o[1] - tagArr[i][1] + "px";
            objStyle.left = o[0] + tagArr[i][0] + "px";
            main.appendChild(obj);

            obj.onmouseover = function(ev) {
                var item;
                item = !ev ? window.event.srcElement : ev.target;
                item.style.backgroundColor = "#f00";
            }

            obj.onmouseout = function(ev) {
                var item;
                item = !ev ? window.event.srcElement : ev.target;
                item.style.backgroundColor = "";
            }

            i++;
        }
    };

    var reSinAndCos = function(degree) {
        var arg = degree * Math.PI / 180;
        var sinVar = Math.sin(arg);
        var cosVar = Math.cos(arg);
        var tanVar = Math.tan(arg);
        return [sinVar, cosVar, tanVar];
    };

    var reDegree = function(b, c) {
        var sArg, cArg, sDg, cDg;
        if (c != 0) {
            sArg = Math.asin(b / c);
            cArg = Math.acos(b / c);
            sDg = sArg / (Math.PI / 180);
            cDg = cArg / (Math.PI / 180);
        }
        else {
            sDg = 0;
            cDg = 0;
        }
        return [sDg, cDg];
    };

    var setTagArrDegree = function() {
        var i = 0;
        var tLen = tagArr.length;
        var x, y, z, xy, r, d2d, dy, dyz, d3d;
        while (i < tLen) {
            x = tagArr[i][0], y = tagArr[i][1], z = tagArr[i][2];
            xy = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
            r = Math.sqrt(Math.pow(xy, 2) + Math.pow(z, 2));
            d2d = Math.abs(reDegree(x, xy)[0]);
            if (x == 0 && y == 0 || x == 0 && y > 0 || x > 0 && y > 0) {
                d2d += 0;
            }
            else if (x > 0 && y == 0) {
                d2d = 90;
            }
            else if (x > 0 && y < 0) {
                d2d = 180 - d2d;
            }
            else if (x == 0 && y < 0) {
                d2d = 180;
            }
            else if (x < 0 && y < 0) {
                d2d += 180;
            }
            else if (x < 0 && y == 0) {
                d2d = 270;
            }
            else if (x < 0 && y > 0) {
                d2d = 360 - d2d;
            }
            d2d = xy > 0 ? d2d - rdegree : d2d;
            d2d = d2d < 0 ? 360 + d2d : d2d;

            dy = xy * reSinAndCos(d2d)[1];
            dyz = Math.sqrt(Math.pow(dy, 2) + Math.pow(z, 2));
            d3d = Math.abs(reDegree(dy, dyz)[0]);
            if (z == 0 && dy == 0 || z > 0 && dy == 0 || z > 0 && dy > 0) {
                d3d += 0;
            }
            else if (z == 0 && dy > 0) {
                d3d = 90;
            }
            else if (z < 0 && dy > 0) {
                d3d = 180 - d3d;
            }
            else if (z < 0 && dy == 0) {
                d3d = 180;
            }
            else if (z < 0 && dy < 0) {
                d3d += 180;
            }
            else if (z == 0 && dy < 0) {
                d3d = 270;
            }
            else if (z > 0 && dy < 0) {
                d3d = 360 - d3d;
            }

            tagArr[i][4] = d3d;
            tagArr[i][5] = d2d;
            tagArr[i][6] = xy;
            tagArr[i][7] = r;
            i++;
        }
    };

接上：
    var Rotation3D = function(lf) {
        var _deg = 0;
        var argLen = arguments.length;

        this.rotationFun = function() {
            var id3d, id2d, ixy, ir, dx, dy;
            var a, b, c, zInd, tmpSC, tmpAl;
            var _a, _b;
            var z, zd, zm, c0, c1, c2;
            var ta_i;
            var tagObj;
            var i = 0;
            var tLen = tagArr.length;

            _deg++;
            while (i < tLen) {
                tagObj = jsBox.tagObj("sp" + i);
                ta_i = tagArr[i];
                id3d = ta_i[4], id2d = ta_i[5], ixy = ta_i[6], ir = ta_i[7];

                tmpSC = reSinAndCos((id3d + _deg) % 360);
                b = reSinAndCos(id2d)[0] * ixy; // 定边
                c = Math.sqrt(Math.pow(ir, 2) - Math.pow(b, 2));
                a = tmpSC[0] * c; // 变边

                tmpAl = rdegree * Math.PI / 180;
                dx = b * Math.cos(tmpAl);
                dy = b * Math.sin(tmpAl);
                _a = Math.round(dy - a * Math.cos(tmpAl));
                _b = Math.round(dx + a * Math.sin(tmpAl));

                zInd = Math.round(tmpSC[1] * c);
                z = Math.floor(zInd / 30);
                /*z = Math.round(zInd / 10);
                zd = Math.floor(z / 3);
                zm = z % 3;*/
                c2 = c1 = c0 = c_c + z;

                ta_i = tagArr[i];
                ta_i[0] = _b;
                ta_i[1] = -_a;
                ta_i[2] = zInd;

                tagObj.style.zIndex = zInd;
                tagObj.style.fontSize = Math.round(zInd / 10) + fs_c + "px";
                tagObj.style.color = ["#", c0.toString(16), c1.toString(16), c2.toString(16)].join("");
                tagObj.style.left = o[0] + _b + "px";
                tagObj.style.top = o[1] + _a + "px";
                i++;
            }

            if (_deg == 360) {
                _deg = 0;
            }
            if (argLen == 1) {
                sivSeed += 1;
                sto = setTimeout(this.rotationFun, sivSeed);
                if (sivSeed > 100) {
                    clearTimeout(sto);
                    sto = null;
                    return;
                }
            }
        }

        this.runIt = function() {
            if (siv != null) {
                clearInterval(siv);
                siv = null;
            }
            if (sto != null) {
                clearTimeout(sto);
                sto = null;
            }
            if (argLen == 1) {
                setTagArrDegree();
                this.rotationFun();
            }
            else {
                siv = setInterval(this.rotationFun, sivSeed);
            }
        }

        this.runIt();
    }

    var mouseRegion = function() {
        var main = jsBox.tagObj("dvMain");
        var x, y, _x, _y, xy, z, iy = 0, ix = 0, _iy, _ix;
        var deg, dtan, spd;
        main.onmousemove = function(event) {
            event = event || window.event;
            _x = event.clientX;
            _y = event.clientY;
            x = _x - o[0];
            y = o[1] - _y;
            dtan = Math.atan(x / y);
            deg = Math.round(dtan / (Math.PI / 180));
            if (x >= 0 && y >= 0) {
                deg += 0;
            }
            else if (y < 0) {
                deg += 180;
            }
            else {
                deg += 360;
            }

            _ix = Math.floor(x / 20);
            _iy = Math.floor(y / 20);

            deg = Math.floor(deg / 10);
            deg = deg * 10;
            if (deg != rdegree || (_ix != ix || _iy != iy)) {
                z = Math.round(Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)));
                sivSeed = (Math.floor((284 - z) / 20) + 2) * 2;
                ix = _ix;
                iy = _iy;
                rdegree = deg;
                setTagArrDegree();
                Rotation3D();
            }
        }

        main.onmouseout = function(event) {
            Rotation3D(1);
        }
    }

    window.onload = function() {
        //init_tagArr();
        initTag();
        mouseRegion();
    }
</script>
</html>

调试易

怎样用js实现文字的环形旋转？

解决方案 »