首页 > 特效插件 > 图像特效 >  JS旋转的水晶球插件正文

JS旋转的水晶球插件

特效介绍

JS旋转的水晶球

JS旋转的水晶球插件，实际上并不是“水晶球”在旋转，而是水晶球上层有一张图片在旋转，纯JS实现，不是flash。用来装饰个人博客还是不错的。
使用方法
1、在head引入coos.ui.rotate.js文件。

2、在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)
        }
        function stopTime(){
            clearTimeout(setTime);
        }
    </script>
通过配置上面的js参数，可以实现不同效果。具体不再赘述，注释说的很清楚了。
TAGS: 旋转  的  水晶球  插件  旋转  的  水晶球  插件