日期:2014-05-16  浏览次数:20410 次

写了一个好玩的js图片转盘。。。
给老婆她姐婚礼送了一个礼物,一个自己做的结婚祝福网站,
自己写了一个图片的圆盘,还比较有意思。


   var curImg;
function imgRound(){
    //圆的半径
    var r=240;
    //圆心坐标
    var x=window.screen.width-30;
    var y=268;
    //图片大小
    var w=140;
    var h=110;
    var pi=Math.PI;
    var offset=0;
    var len=12;
    var avg=2*pi/len;
    var arrimg=$(".indexImg");
    var totalLen=arrimg.length;
    this.init=function(){
        offset=0;
        for(var i=0;i<totalLen;i++){
            arrimg[i].style.top=(y-h/2)+"px";
            arrimg[i].style.left=(x-w/2)+"px";
        }
        this.move();
    }
    this.moveForward=function(){
        offset=(++offset+totalLen)%totalLen;
        this.move();
    }
    this.moveBack=function(){
        offset=(totalLen+offset-1)%totalLen
        this.move();
    }
    this.go=function(idx,myurl){
        offset=(totalLen+idx-len/2+1)%totalLen;
        if(curImg && window.event.srcElement.id==curImg.id){
            window.open(myurl);
            return;
        }
        this.move();
    }

    this.move=function(){
        for(var i=0;i<totalLen;i++){
            if(i<offset || (offset+len)<=i){
                arrimg[i].style.display="none";
            }
        }
        for(var m=0;m<len;m++){
            var k=(offset+m)%totalLen;
            var img=arrimg[k];
            if(!img){
                continue;
            }
            var angle=avg*(m+1);
            //保留左半球 ,去掉就是一个球了
            if(angle<=pi/2 || angle>=3*pi/2){
                img.style.display="none";
                continue;
            }
            img.style.display="block";
            var rate=Math.abs(Math.cos(angle)*0.7)+0.3;
            if(rate!=1){
                img.style.border="1px solid #336600";
                img.setAttribute("title", "");
                rate=rate * 0.7;
            }else{
                if(img.style.display!="none"){
                    curImg=img;
                }
                img.style.border="5px solid #336600";
                img.setAttribute("title", "查看大图");
            }
            $("#"+img.id).animate({
                top:(y-(Math.sin(angle)* r)-rate * h/2)+"px",
                left:(x+ (Math.cos(angle) *r)-rate * w/2)+"px",
                width:(w *rate )+"px",
                height: (h *rate)+"px"
            },250);           
        }
    }
}

function prev(){
    rt.moveBack();
}
function next(){
    rt.moveForward();
}

function go(idx,url){
    rt.go(idx,url);
}

document.onmousewheel=function(evt){
    evt=evt?evt:event;
    if(event.wheelDelta>0){
        prev();
    }else{
        next();
    }
}




鼠标上下滚轮可以转动图片了, 需要jquery.js

图片在页面里面任意地方都可以,但是需要class="indexImg"  
需要初始化为绝对定位。。