写了一个好玩的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.style.top=(y-h/2)+"px"; arrimg.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.style.display="none"; } } for(var m=0;m<len;m++){ var k=(offset+m)%totalLen; var img=arrimg; 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"
需要初始化为绝对定位。。
页:
[1]