`

js实现图片旋转效果

 
阅读更多
<style type="text/css">
body{background:black}
.point{position:absolute;height:75px;border:1px silver solid}
#round{position:absolute;background:red;width:200px;height:200px;}
</style>
<script>
    var r=200,dv=0.01,w=100,x=400;y=100,pn=8
    var pi=3.1415926575,d=pi/2;
    var pd=Math.asin(w/2/r);
    ed=pi*2/pn;smove=true
    function window.onload(){
        var o=document.getElementById("imground");
        var arrimg=o.getElementsByTagName("img");
        for (n=0;n<arrimg.length;n++){
            arrimg[n].onmouseout=function(){smove=true;}
            arrimg[n].onmouseover=function(){smove=false;}
            arrimg[n].onmousedown=function(){dv=dv*2}
        }
        setInterval(roundMove,20);
    }
    function roundMove(){
        for (n=1;n<=8;n++){
            var o=document.getElementById("p"+n)
            var ta=Math.sin(d+ed*n);
            var strFilter;
            if (ta<0)    o.style.left=Math.cos(d+ed*n-pd)*r+x;
            else o.style.left=Math.cos(d+ed*n+pd)*r+x;
            o.style.top=ta*10+10+y;
            o.style.width=Math.abs(Math.cos(d+ed*n+pd)-Math.cos(d+ed*n-pd))*r;
            o.style.zIndex=ta*10;
            if (o.style.zIndex<0) strFilter="FlipH(enabled:true)"
            else strFilter="FlipH(enabled:false)";
            if (ta<0) ta=(ta+1)*80+20; else ta=100;
            strFilter=strFilter+" alpha(opacity="+ta+")";
            o.style.opacity=ta/100;
            o.style.filter=strFilter;
        }
        if (smove) d=d+dv;
    }
</script>
<div id="imground">
<img class="point" id="p1" src="/upload/20071228115115772.jpg"/>
<img class="point" id="p2" src="/upload/20071228115115527.jpg"/>
<img class="point" id="p3" src="/upload/20071228115115831.jpg"/>
<img class="point" id="p4" src="/upload/20071228115115794.jpg"/>
<img class="point" id="p5" src="/upload/20071228115116920.jpg"/>
<img class="point" id="p6" src="/upload/20071228115115772.jpg"/>
<img class="point" id="p7" src="/upload/20071228115115527.jpg"/>
<img class="point" id="p8" src="/upload/20071228115115831.jpg"/>
</div>
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics