首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

写了一个好玩的js图片转盘。

2012-10-08 
写了一个好玩的js图片转盘。。。给老婆她姐婚礼送了一个礼物,一个自己做的结婚祝福网站,自己写了一个图片的圆

写了一个好玩的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"  
需要初始化为绝对定位。。

热点排行
Bad Request.