javascript橢圓旋轉(zhuǎn)相冊實現(xiàn)代碼
更新時間：2012年01月16日 23:19:51 作者：
支持自動和手動兩種模式：自動模式下自動旋轉(zhuǎn)展示，手動模式下通過鼠標選擇當前圖片，或通過提供的接口選擇上一張/下一張圖片
功能說明：
1.支持自動和手動兩種模式：自動模式下自動旋轉(zhuǎn)展示，手動模式下通過鼠標選擇當前圖片，或通過提供的接口選擇上一張/下一張圖片。
2.可自行添加旋轉(zhuǎn)的緩動模式，默認模式為：勻速，先快后慢，先慢后快。
3.可自定義旋轉(zhuǎn)軌跡的寬和高。
4.支持IE6 7 8 9 10 firefox chrome等瀏覽器。
效果預覽：
實現(xiàn)原理：
根據(jù)對圖片在橢圓軌跡上的運動，動態(tài)改變縮放大小，實現(xiàn)立體的視覺效果。
代碼分析：
init:function(id,options){
var defaultOptions={
width:600, //容器寬
height:200, //容器高
imgWidth:100, //圖片寬
imgHeight:60, //圖片高
maxScale:1.5, //最大縮放倍數(shù)
minScale:0.5, //最小縮放倍數(shù)
rotateSpeed:10 //運轉(zhuǎn)速度
}
options=util.extend(defaultOptions,options);//參數(shù)設(shè)置
this.container=util.$(id);
this.width=options.width;
this.height=options.height;
imgWidth=this.imgWidth=options.imgWidth;
imgHeight=this.imgHeight=options.imgHeight;
this.maxScale=options.maxScale;
this.minScale=options.minScale;
scaleMargin=this.maxScale-this.minScale;
this.rotateSpeed=options.rotateSpeed;
this.imgs=util.$$('img',this.container);
this.setContainerSize(this.width,this.height);
initImgRC(this.imgs);
}
首先是初始化函數(shù)，里面有defaultOptions作為默認值，用戶也可以傳入自定義的值，這些參數(shù)值包括：容器寬、容器高、圖片寬、圖片高、最大縮放倍數(shù)，最小縮放倍數(shù)，旋轉(zhuǎn)速度等。初始化之后，調(diào)用setContainerSize函數(shù)。
/* 設(shè)置容器尺寸 */
setContainerSize:function(width,height){
width=width||this.width;
height=height||this.height;
this.container.style.position='relative';
this.container.style.width=width+'px';
this.container.style.height=height+'px';
changeRotateWH.call(this,width,height);//改變?nèi)萜鞒叽绾蟾淖冃D(zhuǎn)軌跡
},
setContainerSize函數(shù)設(shè)置了容器的尺寸，容器尺寸的大小決定了旋轉(zhuǎn)軌跡的大小，例如當我們設(shè)置容器的高等于寬時，軌跡變成一個圓形。容器尺寸設(shè)定后，調(diào)用函數(shù)changeRotateWH。
/* 改變橢圓旋轉(zhuǎn)軌跡的橫半軸長，豎半軸長*/
var changeRotateWH=function(width,height){
var halfScale=(this.maxScale-this.minScale)/2;//旋轉(zhuǎn)到中間位置時的圖片的縮放大小
rotate={};
rotate.originX=width/2;//旋轉(zhuǎn)原點X軸坐標
rotate.originY=height/2;//旋轉(zhuǎn)原點Y軸坐標
rotate.halfRotateWidth=(width-this.imgWidth)/2; //旋轉(zhuǎn)橫半軸長
rotate.halfRotateHeight=(height-this.imgHeight)/2; //旋轉(zhuǎn)豎半軸長
}
changeRotateWH函數(shù)的作用是根據(jù)容器的尺寸，設(shè)定橢圓旋轉(zhuǎn)軌跡的橫半軸長和豎半軸長（程序里面的halfRotateWidth和halfRotateHeight，具體計算方法為：軌跡高=（容器高-圖片高）/2，軌跡寬=（容器寬-圖片寬）/2）），在高中數(shù)學中，我們學過橢圓的標準方程：（），這里的橫半軸和豎半軸分別對應橢圓方程的a和b。由于這里是橫軸較長的橢圓，所以a>b。
/* 設(shè)置圖片旋轉(zhuǎn)角和初始位置，大小 */
var initImgRC=function(imgs){
var len=imgs.length;
con=(2*Math.PI)/len;
for(var i=0;i<len;i++){
imgs[i].RC=i*con;
imgs[i].style.width=imgWidth+'px';
imgs[i].style.height=imgHeight+'px';
setImgPositionAndSize(imgs[i],0);
}
}
設(shè)置好橢圓的基本坐標系之后，我們可以根據(jù)圖片的數(shù)量，把圖片排列成一個橢圓的形狀，首先我們可以通過 2π/圖片數(shù)量 求得圖片之間間隔所占的角度，然后把圖片平均分布在橢圓軌跡上，此時所有圖片就圍成了一個橢圓的形狀，到這里圖片的初始分布狀態(tài)就出來了，接下來的任務就是需要使圖片沿著這個軌跡動起來。
/* 設(shè)置圖片位置和大小的勻速變化 */
var setImgPositionAndSize=function(img,path,direction){
direction=direction||'CW';
var dir=direction=='CW'?-1:1;
img.RC+=(path*dir);
modifyImgAngle(img);
setImgSize(img);
}
該函數(shù)根據(jù)每張圖片位置的不同，設(shè)置圖片對應的尺寸，另外我們還需要傳入一個參數(shù)：direction（值為CW（順時針）或ACW（逆時針）），之后通過不斷增加圖片的RC屬性（旋轉(zhuǎn)角），使圖片勻速自動旋轉(zhuǎn)，這時自動旋轉(zhuǎn)的旋轉(zhuǎn)模式就ok了。
/* 修改圖片旋轉(zhuǎn)角度（保證在0-2pai之間） */
var modifyImgAngle=function(img){
(img.RC>(2*Math.PI))&&(img.RC-=2*Math.PI);
(img.RC<0)&&(img.RC+=2*Math.PI);
}
在圖片旋轉(zhuǎn)之前，我們可以對每張圖片的角度做一個小小的修改，把旋轉(zhuǎn)角限定在0-2π之間，方便后續(xù)的計算。
/* 設(shè)置圖片大小和位置 */
var setImgSize=function(img){
var left=rotate.originX+rotate.halfRotateWidth*Math.cos(img.RC)-imgWidth/2;
var top=rotate.originY-rotate.halfRotateHeight*Math.sin(img.RC)-imgHeight/2;
var scale=minScale+scaleMargin*(rotate.halfRotateHeight-rotate.halfRotateHeight*Math.sin(img.RC))/(2*rotate.halfRotateHeight);//圖片在該時刻的縮放比
img.style.cssText='position:absolute;left:'+left+'px;'
+'top:'+top+'px;'
+'width:'+imgWidth*scale+'px;'
+'height:'+imgHeight*scale+'px;'
+'z-index:'+Math.round(scale*100);
}
如何通過改變旋轉(zhuǎn)角使圖片按橢圓的軌跡旋轉(zhuǎn)呢？我們可以再回過頭看看之前的橢圓方程：（），由于需要處理的是旋轉(zhuǎn)，所以我們希望把對x，y的處理轉(zhuǎn)換成對旋轉(zhuǎn)角度的處理，因此x,y坐標可以表示為：x=a*cosα ， y=b*sinα 。圖片的X坐標表示為：rotate.originX+rotate.halfRotateWidth*Math.cos(img.RC)-imgWidth/2（rotate.originX為原點X坐標，這里取容器的中心點），Y軸同理。之前說過圖片縮放大小的依據(jù)是圖片所處的位置，因此縮放比例scale的值則根據(jù)y坐標所占豎軸的長度進行計算。另外，層級關(guān)系z-index則根據(jù)scale的值進行計算，尺寸大得層級高，顯示在前面。
/* 設(shè)置旋轉(zhuǎn)模式（自動/手動）*/
setPattern:function(patternName,option){
option=option||{};
this.pattern=patternName;
var rotateSpeed=option.rotateSpeed||10;
this.path=Math.PI/1000*rotateSpeed;
(typeof timeId!='undefined')&&window.clearInterval(timeId);
if(patternName==='auto'){//自動模式 可傳入旋轉(zhuǎn)方向：option.rotateDir 旋轉(zhuǎn)速度：option.rotateSpeed
var self=this;
var direction=option.rotateDir||'CW';//順時針：CW 逆時針：ACW
removeImgsHandler(this.imgs);
timeId=window.setInterval(function(){
for(var i=0,len=self.imgs.length;i<len;i++){
setImgPositionAndSize(self.imgs[i],self.path,direction);
}
},20);
}
else if(patternName==='hand'){//手動模式，可傳回調(diào)函數(shù)：option.onSelected 緩動模式：option.tween
var onSelected=option.onSelected||util.emptyFunction;
var tween=Tween[tween]||Tween['easeOut'];//緩動模式默認為easeout
removeImgsHandler(this.imgs);
(typeof timeId!='undefined')&&window.clearInterval(timeId);
timeId=undefined;
bindHandlerForImgs(this.imgs,this.path,tween,onSelected);
}
}
}
現(xiàn)在看看用戶選擇手動模式或者自動模式的接口：setPattern方法，該方法根據(jù)傳入的字符串不同而選擇不同的模式，“auto”為自動模式，該模式還可以傳入自定義參數(shù)，包括旋轉(zhuǎn)速度和旋轉(zhuǎn)方向。傳入“hand”則為手動模式，附加參數(shù)可以為手動選擇圖片后的回調(diào)函數(shù)，以及旋轉(zhuǎn)的緩動模式。
var Tween = {//緩動類 默認提供三種緩動模式：linear easein easeout
linear: function(t,b,c,d,dir){ return c*t/d*dir + b; },
easeIn: function(t,b,c,d,dir){
return c*(t/=d)*t*dir + b;
},
easeOut: function(t,b,c,d,dir){
return -c *(t/=d)*(t-2)*dir + b;
}
};
以上就是緩動模式類，默認的三個模式分別為：勻速 先慢后快 先快后慢。用戶可以調(diào)用addTweenFunction方法添加自己的緩動模式。
更多關(guān)于緩動的話題可以參考這兩篇文章：
http://zengrong.net/post/1151.htm
http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html
/* 添加緩動模式 */
addTweenFunction:function(name,func){
if(typeof func=='Function'||typeof func=='Object'){
Tween[name]=func;
}
},
添加緩動模式的參數(shù)可以為對象或方法，一次性添加同類型的一組緩動模式建議使用對象添加。
/* 為圖片綁定點擊事件處理程序 */
var bindHandlerForImgs=function(imgs,path,onSelected){
for(var i=0,len=imgs.length;i<len;i++){
imgs[i].handler=imgSelectedHandler(imgs,path,onSelected);
util.addEventHandler(imgs[i],'click',imgs[i].handler);
}
}
在手動模式下，首先要做的就是為圖片綁定點擊的事件處理程序，點擊的圖片沿著橢圓軌跡旋轉(zhuǎn)移動到最前端，并且可以觸發(fā)回調(diào)函數(shù)。
/* 圖片選擇事件處理程序 */
var imgSelectedHandler=function(imgs,path,tween,onSelected){
return function(eve){
eve=eve||window.event;
var dir;
var angle;
var target=eve.target||eve.srcElement;
var RC=target.RC;
if(RC>=Math.PI/2&&RC<=Math.PI*3/2){
dir='ACW';
angle=3*Math.PI/2-RC;
}
else{
dir='CW';
Math.sin(RC)>=0?angle=Math.PI/2+RC:angle=RC-3*Math.PI/2;
}
(typeof timeId!='undefined')&&window.clearInterval(timeId);
rotateAngle(imgs,angle,dir,tween,onSelected);
}
}
再看看手動模式下的核心函數(shù),該函數(shù)作為事件處理程序，在點擊選擇圖片后執(zhí)行。首先判斷所點擊圖片處在橢圓軌跡的左邊還是右邊，如果是左邊，則旋轉(zhuǎn)方向為逆時針，右邊則為順時針（為了符合最短移動路程的原則），之后調(diào)用 rotateAngle使圖片移動相應角度。
/* 旋轉(zhuǎn)指定角度 */
var rotateAngle=function(imgs,angle,dir,tween,onSelected){
var duration=1000;
var startTime=(new Date()).getTime();
dir=='CW'?dir=-1:dir=1;
for(var i=0,len=imgs.length;i<len;i++){
imgs[i].startAngle=imgs[i].RC;
}
timeId=window.setInterval(function(){
var now=(new Date()).getTime();
if((now-startTime)>=duration){
window.clearInterval(timeId);
timeId=undefined;
onSelected=onSelected||util.emptyFunction;
onSelected();//觸發(fā)回調(diào)函數(shù);
}
for(var i=0,len=imgs.length;i<len;i++){
var path=tween(now-startTime,imgs[i].startAngle,angle,duration,dir);//通過緩動公式計算新角度（RC）
setPos(imgs[i],path,dir);
}
},20);
}
rotateAngle函數(shù)首先確定了旋轉(zhuǎn)所經(jīng)歷的時間，圖片的初始角度和開始旋轉(zhuǎn)的時間，然后把一切工作交給緩動函數(shù)來計算圖片下一次的旋轉(zhuǎn)角度，緩動函數(shù)可以是用戶設(shè)置的，也可以使用默認的easeout（先快后慢）。如果有回調(diào)函數(shù)的話，可以在旋轉(zhuǎn)結(jié)束后觸發(fā)。
/* 選擇上一幅圖片 */
prePho:function(onSelected){
if(this.pattern=='hand'){
onSelected=onSelected||util.emptyFunction;
var tween=tween||Tween['easeOut'];
if(typeof timeId!='undefined'){
return;
}else{
rotateAngle(this.imgs,con,'ACW',tween,onSelected);
}
}
},
/* 選擇下一幅圖片 */
nextPho:function(onSelected){
if(this.pattern=='hand'){
onSelected=onSelected||util.emptyFunction;
var tween=tween||Tween['easeOut'];
if(typeof timeId!='undefined'){
return;
}else{
rotateAngle(this.imgs,con,'CW',tween,onSelected);
}
}
},
另外在手動模式下，提供選擇上一張圖片和下一張圖片的接口，原理就是使所有圖片的旋轉(zhuǎn)角度為圖片之間的夾角，上一張圖片和下一張圖片的旋轉(zhuǎn)方向分別設(shè)置為逆時針和順時針。
var rp=new rotatePhos('container');
rp.setPattern('auto',{rotateSpeed:10});//自動模式 旋轉(zhuǎn)速度為10
rp.setPattern('hand');//手動模式
最后是調(diào)用方法初始化后需要設(shè)置旋轉(zhuǎn)的模式。
說了一大堆不知道說清楚了沒有，這里提供所有源碼，有興趣的童鞋可以看看哈~
源代碼：
html：
<div id="wrap" style="background:black;width:650px; height:250px; padding-top:20px; padding-left:20px;">
<div id="container">
<img src="pp.jpg" />
<img src="pp.jpg"/>
<img src="pp.jpg"/>
<img src="pp.jpg"/>
<img src="pp.jpg"/>
<img src="pp.jpg"/>
<img src="pp.jpg" />
<img src="pp.jpg"/>
<img src="pp.jpg"/>
<img src="pp.jpg"/>
<img src="pp.jpg"/>
<img src="pp.jpg"/>
</div>
</div>
<p>
手動模式：<input id="select" type="radio" name="sel" value="手動模式" onclick="rp.setPattern('hand');" checked="checked"/>
自動模式：<input id="select" type="radio" name="sel" value="自動模式" onclick="rp.setPattern('auto');" />
</p>
<p>
<input id="pre" type="button" value="上一張" />
<input id="next" type="button" value="下一張"/>
</p>
JS:
var util = {
$: function(sId) { return document.getElementById(sId); },
$$:function(tagName,parent){parent=parent||document; return parent.getElementsByTagName(tagName);},
addEventHandler: function(elem, type, handler) {
if (elem.addEventListener) {
elem.addEventListener(type, handler, false);
}
else {
elem.attachEvent("on" + type, handler);
}
},
removeEventHandler: function(elem, type, handler) {
if (elem.removeEventListener) {
elem.removeEventListener(type, handler, false);
}
else {
elem.detachEvent("on" + type, handler);
}
},
getComputedStyle: function(elem) {
if (elem.currentStyle)
return elem.currentStyle;
else {
return document.defaultView.getComputedStyle(elem, null);
}
},
getElementsByClassName: function(className, parentElement) {
var elems = (parentElement || document.body).getElementsByTagName("*");
var result = [];
for (i = 0; j = elems[i]; i++) {
if ((" " + j.className + " ").indexOf(" " + className + " ") != -1) {
result.push(j);
}
}
return result;
},
extend: function(destination, source) {
for (var name in source) {
destination[name] = source[name];
}
return destination;
},
emptyFunction:function(){}
};
var rotatePhos=(function(){
var rp=function(id,options){
this.init(id,options);//初始化
}
rp.prototype=(function(){
var rotate;
var imgWidth;
var imgHeight;
var scaleMargin;
var con;
var handler;
var minScale;
var Tween = {//緩動類 默認提供三種緩動模式：linear easein easeout
linear: function(t,b,c,d,dir){ return c*t/d*dir + b; },
easeIn: function(t,b,c,d,dir){
return c*(t/=d)*t*dir + b;
},
easeOut: function(t,b,c,d,dir){
return -c *(t/=d)*(t-2)*dir + b;
}
};
/* 改變橢圓旋轉(zhuǎn)軌跡的橫半軸長，豎半軸長*/
var changeRotateWH=function(width,height){
var halfScale=(this.maxScale-this.minScale)/2;//旋轉(zhuǎn)到中間位置時的圖片的縮放大小
rotate={};
rotate.originX=width/2;//旋轉(zhuǎn)原點X軸坐標
rotate.originY=height/2;//旋轉(zhuǎn)原點Y軸坐標
rotate.halfRotateWidth=(width-this.imgWidth)/2; //旋轉(zhuǎn)橫半軸長
rotate.halfRotateHeight=(height-this.imgHeight)/2; //旋轉(zhuǎn)豎半軸長
}
/* 設(shè)置圖片旋轉(zhuǎn)角和初始位置，大小 */
var initImgRC=function(imgs){
var len=imgs.length;
con=(2*Math.PI)/len;
for(var i=0;i<len;i++){
imgs[i].RC=i*con;
imgs[i].style.width=imgWidth+'px';
imgs[i].style.height=imgHeight+'px';
setImgPositionAndSize(imgs[i],0);
}
}
/* 設(shè)置圖片大小和位置 */
var setImgSize=function(img){
var left=rotate.originX+rotate.halfRotateWidth*Math.cos(img.RC)-imgWidth/2;
var top=rotate.originY-rotate.halfRotateHeight*Math.sin(img.RC)-imgHeight/2;
var scale=minScale+scaleMargin*(rotate.halfRotateHeight-rotate.halfRotateHeight*Math.sin(img.RC))/(2*rotate.halfRotateHeight);//圖片在該時刻的縮放比
img.style.cssText='position:absolute;left:'+left+'px;'
+'top:'+top+'px;'
+'width:'+imgWidth*scale+'px;'
+'height:'+imgHeight*scale+'px;'
+'z-index:'+Math.round(scale*100);
}
/* 設(shè)置圖片位置和大小的勻速變化 */
var setImgPositionAndSize=function(img,path,direction){
direction=direction||'CW';
var dir=direction=='CW'?-1:1;
img.RC+=(path*dir);
modifyImgAngle(img);
setImgSize(img);
}
/* 修改圖片旋轉(zhuǎn)角度（保證在0-2pai之間） */
var modifyImgAngle=function(img){
(img.RC>(2*Math.PI))&&(img.RC-=2*Math.PI);
(img.RC<0)&&(img.RC+=2*Math.PI);
}
/* 設(shè)置圖片的新位置 */
var setPos=function(img,path){
img.RC=path;
modifyImgAngle(img);
var left=rotate.originX+rotate.halfRotateWidth*Math.cos(img.RC)-imgWidth/2;
var top=rotate.originY-rotate.halfRotateHeight*Math.sin(img.RC)-imgHeight/2;
var scale=0.5+scaleMargin*(rotate.halfRotateHeight-rotate.halfRotateHeight*Math.sin(img.RC))/(2*rotate.halfRotateHeight);//圖片在該時刻的縮放比
img.style.cssText='position:absolute;left:'+left+'px;'
+'top:'+top+'px;'
+'width:'+imgWidth*scale+'px;'
+'height:'+imgHeight*scale+'px;'
+'z-index:'+Math.round(scale*100);
}
/* 旋轉(zhuǎn)指定角度 */
var rotateAngle=function(imgs,angle,dir,tween,onSelected){
var duration=1000;
var startTime=(new Date()).getTime();
dir=='CW'?dir=-1:dir=1;
for(var i=0,len=imgs.length;i<len;i++){
imgs[i].startAngle=imgs[i].RC;
}
timeId=window.setInterval(function(){
var now=(new Date()).getTime();
if((now-startTime)>=duration){
window.clearInterval(timeId);
timeId=undefined;
onSelected=onSelected||util.emptyFunction;
onSelected();//觸發(fā)回調(diào)函數(shù);
}
for(var i=0,len=imgs.length;i<len;i++){
var path=tween(now-startTime,imgs[i].startAngle,angle,duration,dir);//通過緩動公式計算新角度（RC）
setPos(imgs[i],path,dir);
}
},20);
}
/* 圖片選擇事件處理程序 */
var imgSelectedHandler=function(imgs,path,tween,onSelected){
return function(eve){
eve=eve||window.event;
var dir;
var angle;
var target=eve.target||eve.srcElement;
var RC=target.RC;
if(RC>=Math.PI/2&&RC<=Math.PI*3/2){
dir='ACW';
angle=3*Math.PI/2-RC;
}
else{
dir='CW';
Math.sin(RC)>=0?angle=Math.PI/2+RC:angle=RC-3*Math.PI/2;
}
(typeof timeId!='undefined')&&window.clearInterval(timeId);
rotateAngle(imgs,angle,dir,tween,onSelected);
}
}
/* 為圖片綁定點擊事件處理程序 */
var bindHandlerForImgs=function(imgs,path,onSelected){
for(var i=0,len=imgs.length;i<len;i++){
imgs[i].handler=imgSelectedHandler(imgs,path,onSelected);
util.addEventHandler(imgs[i],'click',imgs[i].handler);
}
}
/* 刪除圖片上的點擊事件處理程序 */
var removeImgsHandler=function(imgs){
for(var i=0,len=imgs.length;i<len;i++){
if(imgs[i].handler){
util.removeEventHandler(imgs[i],'click',imgs[i].handler);
}
}
}
return{
/* 初始化 */
init:function(id,options){
var defaultOptions={
width:600, //容器寬
height:200, //容器高
imgWidth:100, //圖片寬
imgHeight:60, //圖片高
maxScale:1.5, //最大縮放倍數(shù)
minScale:0.5, //最小縮放倍數(shù)
rotateSpeed:10 //運轉(zhuǎn)速度
}
options=util.extend(defaultOptions,options);//參數(shù)設(shè)置
this.container=util.$(id);
this.width=options.width;
this.height=options.height;
imgWidth=this.imgWidth=options.imgWidth;
imgHeight=this.imgHeight=options.imgHeight;
this.maxScale=options.maxScale;
minScale=this.minScale=options.minScale;
scaleMargin=this.maxScale-this.minScale;
this.rotateSpeed=options.rotateSpeed;
this.imgs=util.$$('img',this.container);
this.setContainerSize(this.width,this.height);
initImgRC(this.imgs);
},
/* 設(shè)置容器尺寸 */
setContainerSize:function(width,height){
width=width||this.width;
height=height||this.height;
this.container.style.position='relative';
this.container.style.width=width+'px';
this.container.style.height=height+'px';
changeRotateWH.call(this,width,height);//改變?nèi)萜鞒叽绾蟾淖冃D(zhuǎn)軌跡
},
/* 選擇上一幅圖片 */
prePho:function(onSelected){
if(this.pattern=='hand'){
onSelected=onSelected||util.emptyFunction;
var tween=tween||Tween['easeOut'];
if(typeof timeId!='undefined'){
return;
}else{
rotateAngle(this.imgs,con,'ACW',tween,onSelected);
}
}
},
/* 選擇下一幅圖片 */
nextPho:function(onSelected){
if(this.pattern=='hand'){
onSelected=onSelected||util.emptyFunction;
var tween=tween||Tween['easeOut'];
if(typeof timeId!='undefined'){
return;
}else{
rotateAngle(this.imgs,con,'CW',tween,onSelected);
}
}
},
/* 添加緩動模式 */
addTweenFunction:function(name,func){
if(typeof func=='Function'||typeof func=='Object'){
Tween[name]=func;
}
},
/* 設(shè)置旋轉(zhuǎn)模式（自動/手動）*/
setPattern:function(patternName,option){
option=option||{};
this.pattern=patternName;
var rotateSpeed=option.rotateSpeed||10;
this.path=Math.PI/1000*rotateSpeed;
(typeof timeId!='undefined')&&window.clearInterval(timeId);
if(patternName==='auto'){//自動模式 可傳入旋轉(zhuǎn)方向：option.rotateDir 旋轉(zhuǎn)速度：option.rotateSpeed
var self=this;
var direction=option.rotateDir||'CW';//順時針：CW 逆時針：ACW
removeImgsHandler(this.imgs);
timeId=window.setInterval(function(){
for(var i=0,len=self.imgs.length;i<len;i++){
setImgPositionAndSize(self.imgs[i],self.path,direction);
}
},20);
}
else if(patternName==='hand'){//手動模式，可傳回調(diào)函數(shù)：option.onSelected 緩動模式：option.tween
var onSelected=option.onSelected||util.emptyFunction;
var tween=Tween[tween]||Tween['easeOut'];//緩動模式默認為easeout
removeImgsHandler(this.imgs);
(typeof timeId!='undefined')&&window.clearInterval(timeId);
timeId=undefined;
bindHandlerForImgs(this.imgs,this.path,tween,onSelected);
}
}
}
})();
return rp;
})();
var rp=new rotatePhos('container');
//rp.setPattern('auto',{rotateSpeed:10});
rp.setPattern('hand');
document.getElementById('pre').onclick=function(){rp.prePho();};
document.getElementById('next').onclick=function(){rp.nextPho();};
完整的實現(xiàn)代碼:
<div id="wrap" style="background: black; width: 800px; height: 350px; padding-top: 20px; padding-left: 20px; padding-right: 20px;">
<div id="container"><img src="/upload/201201/20120116231926539.jpg" alt="" /> <img src="/upload/201201/20120116231926632.jpg" alt="" /> <img src="/upload/201201/20120116231926661.jpg" alt="" /> <img src="/upload/201201/20120116231926763.jpg" alt="" /> <img src="/upload/201201/20120116231926174.jpg" alt="" /> <img src="/upload/201201/20120116231926604.jpg" alt="" /> <img src="/upload/201201/20120116231927431.jpg" alt="" /> <img src="/upload/201201/20120116231927666.JPG" alt="" /> <img src="/upload/201201/20120116231927424.jpg" alt="" /> <img src="/upload/201201/20120116231927108.jpg" alt="" /> <img src="/upload/201201/20120116231927843.jpg" alt="" /> <img src="/upload/201201/20120116231927662.bmp" alt="" /></div>
</div>
<p>手動模式：<input id="select" onclick="rp.setPattern('hand');" type="radio" name="sel" value="手動模式" /> 自動模式：<input id="select" onclick="rp.setPattern('auto');" type="radio" name="sel" value="自動模式" /></p>
<p><input id="pre" type="button" value="上一張" /> <input id="next" type="button" value="下一張" /></p>
<p>
<script type="text/javascript">// <![CDATA[
var rotatePhos = (function() {
var util = {
$: function(sId) { return document.getElementById(sId); },
$$: function(tagName, parent) { parent = parent || document; return parent.getElementsByTagName(tagName); },
addEventHandler: function(elem, type, handler) {
if (elem.addEventListener) {
elem.addEventListener(type, handler, false);
}
else {
elem.attachEvent("on" + type, handler);
}
},
removeEventHandler: function(elem, type, handler) {
if (elem.removeEventListener) {
elem.removeEventListener(type, handler, false);
}
else {
elem.detachEvent("on" + type, handler);
}
},
getComputedStyle: function(elem) {
if (elem.currentStyle)
return elem.currentStyle;
else {
return document.defaultView.getComputedStyle(elem, null);
}
},
emptyFunction: function() { },
getElementsByClassName: function(className, parentElement) {
var elems = (parentElement || document.body).getElementsByTagName("*");
var result = [];
for (i = 0; j = elems[i]; i++) {
if ((" " + j.className + " ").indexOf(" " + className + " ") != -1) {
result.push(j);
}
}
return result;
},
extend: function(destination, source) {
for (var name in source) {
destination[name] = source[name];
}
return destination;
}
};
var rp = function(id, options) {
this.init(id, options); //初始化
}
rp.prototype = (function() {
var rotate;
var imgWidth;
var imgHeight;
var scaleMargin;
var con;
var handler;
var Tween = {//緩動類 默認提供三種緩動模式：linear easein easeout
linear: function(t, b, c, d, dir) { return c * t / d * dir + b; },
easeIn: function(t, b, c, d, dir) {
return c * (t /= d) * t * dir + b;
},
easeOut: function(t, b, c, d, dir) {
return -c * (t /= d) * (t - 2) * dir + b;
}
};
/* 改變橢圓旋轉(zhuǎn)軌跡的橫半軸長，豎半軸長*/
var changeRotateWH = function(width, height) {
var halfScale = (this.maxScale - this.minScale) / 2; //旋轉(zhuǎn)到中間位置時的圖片的縮放大小
rotate = {};
rotate.originX = width / 2; //旋轉(zhuǎn)原點X軸坐標
rotate.originY = height / 2; //旋轉(zhuǎn)原點Y軸坐標
rotate.halfRotateWidth = (width - this.imgWidth) / 2; //旋轉(zhuǎn)橫半軸長
rotate.halfRotateHeight = (height - this.imgHeight) / 2; //旋轉(zhuǎn)豎半軸長
}
/* 設(shè)置圖片旋轉(zhuǎn)角和初始位置，大小 */
var initImgRC = function(imgs) {
var len = imgs.length;
con = (2 * Math.PI) / len;
for (var i = 0; i < len; i++) {
imgs[i].RC = i * con;
imgs[i].style.width = imgWidth + 'px';
imgs[i].style.height = imgHeight + 'px';
setImgPositionAndSize(imgs[i], 0);
}
}
/* 設(shè)置圖片大小 */
var setImgSize = function(img) {
var left = rotate.originX + rotate.halfRotateWidth * Math.cos(img.RC) - imgWidth / 2;
var top = rotate.originY - rotate.halfRotateHeight * Math.sin(img.RC) - imgHeight / 2;
var scale = 0.5 + scaleMargin * (rotate.halfRotateHeight - rotate.halfRotateHeight * Math.sin(img.RC)) / (2 * rotate.halfRotateHeight); //圖片在該時刻的縮放比
img.style.cssText = 'position:absolute;left:' + left + 'px;'
+ 'top:' + top + 'px;'
+ 'width:' + imgWidth * scale + 'px;'
+ 'height:' + imgHeight * scale + 'px;'
+ 'cursor:pointer;'
+ 'z-index:' + Math.round(scale * 100);
}
/* 設(shè)置圖片位置和大小的勻速變化 */
var setImgPositionAndSize = function(img, path, direction) {
direction = direction || 'CW';
var dir = direction == 'CW' ? -1 : 1;
img.RC += (path * dir);
modifyImgAngle(img);
setImgSize(img);
}
/* 修改圖片旋轉(zhuǎn)角度（保證在0-2pai之間） */
var modifyImgAngle = function(img) {
(img.RC > (2 * Math.PI)) && (img.RC -= 2 * Math.PI);
(img.RC < 0) && (img.RC += 2 * Math.PI);
}
/* 設(shè)置圖片的新位置 */
var setPos = function(img, path) {
img.RC = path;
modifyImgAngle(img);
var left = rotate.originX + rotate.halfRotateWidth * Math.cos(img.RC) - imgWidth / 2;
var top = rotate.originY - rotate.halfRotateHeight * Math.sin(img.RC) - imgHeight / 2;
var scale = 0.5 + scaleMargin * (rotate.halfRotateHeight - rotate.halfRotateHeight * Math.sin(img.RC)) / (2 * rotate.halfRotateHeight); //圖片在該時刻的縮放比
img.style.cssText = 'position:absolute;left:' + left + 'px;'
+ 'top:' + top + 'px;'
+ 'width:' + imgWidth * scale + 'px;'
+ 'height:' + imgHeight * scale + 'px;'
+ 'z-index:' + Math.round(scale * 100);
}
/* 旋轉(zhuǎn)指定角度 */
var rotateAngle = function(imgs, angle, dir, tween, onSelected) {
var duration = 1000;
var startTime = (new Date()).getTime();
dir == 'CW' ? dir = -1 : dir = 1;
for (var i = 0, len = imgs.length; i < len; i++) {
imgs[i].startAngle = imgs[i].RC;
}
timeId = window.setInterval(function() {
var now = (new Date()).getTime();
if ((now - startTime) >= duration) {
window.clearInterval(timeId);
timeId = undefined;
onSelected = onSelected || util.emptyFunction;
onSelected(); //觸發(fā)回調(diào)函數(shù);
}
for (var i = 0, len = imgs.length; i < len; i++) {
var path = tween(now - startTime, imgs[i].startAngle, angle, duration, dir); //通過緩動公式計算新角度（RC）
setPos(imgs[i], path, dir);
}
}, 20);
}
/* 圖片選擇事件處理程序 */
var imgSelectedHandler = function(imgs, path, tween, onSelected) {
return function(eve) {
eve = eve || window.event;
var dir;
var angle;
var target = eve.target || eve.srcElement;
var RC = target.RC;
if (RC >= Math.PI / 2 && RC <= Math.PI * 3 / 2) {
dir = 'ACW';
angle = 3 * Math.PI / 2 - RC;
}
else {
dir = 'CW';
Math.sin(RC) >= 0 ? angle = Math.PI / 2 + RC : angle = RC - 3 * Math.PI / 2;
}
(typeof timeId != 'undefined') && window.clearInterval(timeId);
rotateAngle(imgs, angle, dir, tween, onSelected);
}
}
/* 為圖片綁定點擊事件處理程序 */
var bindHandlerForImgs = function(imgs, path, onSelected) {
for (var i = 0, len = imgs.length; i < len; i++) {
imgs[i].handler = imgSelectedHandler(imgs, path, onSelected);
util.addEventHandler(imgs[i], 'click', imgs[i].handler);
}
}
/* 刪除圖片上的點擊事件處理程序 */
var removeImgsHandler = function(imgs) {
for (var i = 0, len = imgs.length; i < len; i++) {
if (imgs[i].handler) {
util.removeEventHandler(imgs[i], 'click', imgs[i].handler);
}
}
}
return {
/* 初始化 */
init: function(id, options) {
var defaultOptions = {
width: 700, //容器寬
height: 300, //容器高
imgWidth: 130, //圖片寬
imgHeight: 80, //圖片高
maxScale: 1.5, //最大縮放倍數(shù)
minScale: 0.5, //最小縮放倍數(shù)
rotateSpeed: 10 //運轉(zhuǎn)速度
}
options = util.extend(defaultOptions, options); //參數(shù)設(shè)置
this.container = util.$(id);
this.width = options.width;
this.height = options.height;
imgWidth = this.imgWidth = options.imgWidth;
imgHeight = this.imgHeight = options.imgHeight;
this.maxScale = options.maxScale;
this.minScale = options.minScale;
scaleMargin = this.maxScale - this.minScale;
this.rotateSpeed = options.rotateSpeed;
this.imgs = util.$$('img', this.container);
this.setContainerSize(this.width, this.height);
initImgRC(this.imgs);
},
/* 設(shè)置容器尺寸 */
setContainerSize: function(width, height) {
width = width || this.width;
height = height || this.height;
this.container.style.position = 'relative';
this.container.style.width = width + 'px';
this.container.style.height = height + 'px';
changeRotateWH.call(this, width, height); //改變?nèi)萜鞒叽绾蟾淖冃D(zhuǎn)軌跡
},
/* 選擇上一幅圖片 */
prePho: function(onSelected) {
if (this.pattern == 'hand') {
onSelected = onSelected || util.emptyFunction;
var tween = tween || Tween['easeOut'];
if (typeof timeId != 'undefined') {
return;
} else {
rotateAngle(this.imgs, con, 'ACW', tween, onSelected);
}
}
},
/* 選擇下一幅圖片 */
nextPho: function(onSelected) {
if (this.pattern == 'hand') {
onSelected = onSelected || util.emptyFunction;
var tween = tween || Tween['easeOut'];
if (typeof timeId != 'undefined') {
return;
} else {
rotateAngle(this.imgs, con, 'CW', tween, onSelected);
}
}
},
/* 添加緩動模式 */
addTweenFunction: function(name, func) {
if (typeof func == 'Function' || typeof func == 'Object') {
Tween[name] = func;
}
},
/* 設(shè)置旋轉(zhuǎn)模式（自動/手動）*/
setPattern: function(patternName, option) {
option = option || {};
this.pattern = patternName;
var rotateSpeed = option.rotateSpeed || 10;
this.path = Math.PI / 1000 * rotateSpeed;
(typeof timeId != 'undefined') && window.clearInterval(timeId);
if (patternName === 'auto') {//自動模式 可傳入旋轉(zhuǎn)方向：option.rotateDir 旋轉(zhuǎn)速度：option.rotateSpeed
var self = this;
var direction = option.rotateDir || 'CW'; //順時針：CW 逆時針：ACW
removeImgsHandler(this.imgs);
timeId = window.setInterval(function() {
for (var i = 0, len = self.imgs.length; i < len; i++) {
setImgPositionAndSize(self.imgs[i], self.path, direction);
}
}, 20);
}
else if (patternName === 'hand') {//手動模式，可傳回調(diào)函數(shù)：option.onSelected 緩動模式：option.tween
var onSelected = option.onSelected || util.emptyFunction;
var tween = Tween[tween] || Tween['easeOut']; //緩動模式默認為easeout
removeImgsHandler(this.imgs);
(typeof timeId != 'undefined') && window.clearInterval(timeId);
timeId = undefined;
bindHandlerForImgs(this.imgs, this.path, tween, onSelected);
}
}
}
})();
return rp;
})();
var rp=new rotatePhos('container');
//rp.setPattern('auto',{rotateSpeed:10});
rp.setPattern('hand');
document.getElementById('pre').onclick=function(){rp.prePho();};
document.getElementById('next').onclick=function(){rp.nextPho();};
// ]]></script>
</p>
1.支持自動和手動兩種模式：自動模式下自動旋轉(zhuǎn)展示，手動模式下通過鼠標選擇當前圖片，或通過提供的接口選擇上一張/下一張圖片。
2.可自行添加旋轉(zhuǎn)的緩動模式，默認模式為：勻速，先快后慢，先慢后快。
3.可自定義旋轉(zhuǎn)軌跡的寬和高。
4.支持IE6 7 8 9 10 firefox chrome等瀏覽器。
效果預覽：
實現(xiàn)原理：
根據(jù)對圖片在橢圓軌跡上的運動，動態(tài)改變縮放大小，實現(xiàn)立體的視覺效果。
代碼分析：
復制代碼 代碼如下:
init:function(id,options){
var defaultOptions={
width:600, //容器寬
height:200, //容器高
imgWidth:100, //圖片寬
imgHeight:60, //圖片高
maxScale:1.5, //最大縮放倍數(shù)
minScale:0.5, //最小縮放倍數(shù)
rotateSpeed:10 //運轉(zhuǎn)速度
}
options=util.extend(defaultOptions,options);//參數(shù)設(shè)置
this.container=util.$(id);
this.width=options.width;
this.height=options.height;
imgWidth=this.imgWidth=options.imgWidth;
imgHeight=this.imgHeight=options.imgHeight;
this.maxScale=options.maxScale;
this.minScale=options.minScale;
scaleMargin=this.maxScale-this.minScale;
this.rotateSpeed=options.rotateSpeed;
this.imgs=util.$$('img',this.container);
this.setContainerSize(this.width,this.height);
initImgRC(this.imgs);
}
首先是初始化函數(shù)，里面有defaultOptions作為默認值，用戶也可以傳入自定義的值，這些參數(shù)值包括：容器寬、容器高、圖片寬、圖片高、最大縮放倍數(shù)，最小縮放倍數(shù)，旋轉(zhuǎn)速度等。初始化之后，調(diào)用setContainerSize函數(shù)。
復制代碼 代碼如下:
/* 設(shè)置容器尺寸 */
setContainerSize:function(width,height){
width=width||this.width;
height=height||this.height;
this.container.style.position='relative';
this.container.style.width=width+'px';
this.container.style.height=height+'px';
changeRotateWH.call(this,width,height);//改變?nèi)萜鞒叽绾蟾淖冃D(zhuǎn)軌跡
},
setContainerSize函數(shù)設(shè)置了容器的尺寸，容器尺寸的大小決定了旋轉(zhuǎn)軌跡的大小，例如當我們設(shè)置容器的高等于寬時，軌跡變成一個圓形。容器尺寸設(shè)定后，調(diào)用函數(shù)changeRotateWH。
復制代碼 代碼如下:
/* 改變橢圓旋轉(zhuǎn)軌跡的橫半軸長，豎半軸長*/
var changeRotateWH=function(width,height){
var halfScale=(this.maxScale-this.minScale)/2;//旋轉(zhuǎn)到中間位置時的圖片的縮放大小
rotate={};
rotate.originX=width/2;//旋轉(zhuǎn)原點X軸坐標
rotate.originY=height/2;//旋轉(zhuǎn)原點Y軸坐標
rotate.halfRotateWidth=(width-this.imgWidth)/2; //旋轉(zhuǎn)橫半軸長
rotate.halfRotateHeight=(height-this.imgHeight)/2; //旋轉(zhuǎn)豎半軸長
}
changeRotateWH函數(shù)的作用是根據(jù)容器的尺寸，設(shè)定橢圓旋轉(zhuǎn)軌跡的橫半軸長和豎半軸長（程序里面的halfRotateWidth和halfRotateHeight，具體計算方法為：軌跡高=（容器高-圖片高）/2，軌跡寬=（容器寬-圖片寬）/2）），在高中數(shù)學中，我們學過橢圓的標準方程：（），這里的橫半軸和豎半軸分別對應橢圓方程的a和b。由于這里是橫軸較長的橢圓，所以a>b。
復制代碼 代碼如下:
/* 設(shè)置圖片旋轉(zhuǎn)角和初始位置，大小 */
var initImgRC=function(imgs){
var len=imgs.length;
con=(2*Math.PI)/len;
for(var i=0;i<len;i++){
imgs[i].RC=i*con;
imgs[i].style.width=imgWidth+'px';
imgs[i].style.height=imgHeight+'px';
setImgPositionAndSize(imgs[i],0);
}
}
設(shè)置好橢圓的基本坐標系之后，我們可以根據(jù)圖片的數(shù)量，把圖片排列成一個橢圓的形狀，首先我們可以通過 2π/圖片數(shù)量 求得圖片之間間隔所占的角度，然后把圖片平均分布在橢圓軌跡上，此時所有圖片就圍成了一個橢圓的形狀，到這里圖片的初始分布狀態(tài)就出來了，接下來的任務就是需要使圖片沿著這個軌跡動起來。
復制代碼 代碼如下:
/* 設(shè)置圖片位置和大小的勻速變化 */
var setImgPositionAndSize=function(img,path,direction){
direction=direction||'CW';
var dir=direction=='CW'?-1:1;
img.RC+=(path*dir);
modifyImgAngle(img);
setImgSize(img);
}
該函數(shù)根據(jù)每張圖片位置的不同，設(shè)置圖片對應的尺寸，另外我們還需要傳入一個參數(shù)：direction（值為CW（順時針）或ACW（逆時針）），之后通過不斷增加圖片的RC屬性（旋轉(zhuǎn)角），使圖片勻速自動旋轉(zhuǎn)，這時自動旋轉(zhuǎn)的旋轉(zhuǎn)模式就ok了。
復制代碼 代碼如下:
/* 修改圖片旋轉(zhuǎn)角度（保證在0-2pai之間） */
var modifyImgAngle=function(img){
(img.RC>(2*Math.PI))&&(img.RC-=2*Math.PI);
(img.RC<0)&&(img.RC+=2*Math.PI);
}
在圖片旋轉(zhuǎn)之前，我們可以對每張圖片的角度做一個小小的修改，把旋轉(zhuǎn)角限定在0-2π之間，方便后續(xù)的計算。
復制代碼 代碼如下:
/* 設(shè)置圖片大小和位置 */
var setImgSize=function(img){
var left=rotate.originX+rotate.halfRotateWidth*Math.cos(img.RC)-imgWidth/2;
var top=rotate.originY-rotate.halfRotateHeight*Math.sin(img.RC)-imgHeight/2;
var scale=minScale+scaleMargin*(rotate.halfRotateHeight-rotate.halfRotateHeight*Math.sin(img.RC))/(2*rotate.halfRotateHeight);//圖片在該時刻的縮放比
img.style.cssText='position:absolute;left:'+left+'px;'
+'top:'+top+'px;'
+'width:'+imgWidth*scale+'px;'
+'height:'+imgHeight*scale+'px;'
+'z-index:'+Math.round(scale*100);
}
如何通過改變旋轉(zhuǎn)角使圖片按橢圓的軌跡旋轉(zhuǎn)呢？我們可以再回過頭看看之前的橢圓方程：（），由于需要處理的是旋轉(zhuǎn)，所以我們希望把對x，y的處理轉(zhuǎn)換成對旋轉(zhuǎn)角度的處理，因此x,y坐標可以表示為：x=a*cosα ， y=b*sinα 。圖片的X坐標表示為：rotate.originX+rotate.halfRotateWidth*Math.cos(img.RC)-imgWidth/2（rotate.originX為原點X坐標，這里取容器的中心點），Y軸同理。之前說過圖片縮放大小的依據(jù)是圖片所處的位置，因此縮放比例scale的值則根據(jù)y坐標所占豎軸的長度進行計算。另外，層級關(guān)系z-index則根據(jù)scale的值進行計算，尺寸大得層級高，顯示在前面。
復制代碼 代碼如下:
/* 設(shè)置旋轉(zhuǎn)模式（自動/手動）*/
setPattern:function(patternName,option){
option=option||{};
this.pattern=patternName;
var rotateSpeed=option.rotateSpeed||10;
this.path=Math.PI/1000*rotateSpeed;
(typeof timeId!='undefined')&&window.clearInterval(timeId);
if(patternName==='auto'){//自動模式 可傳入旋轉(zhuǎn)方向：option.rotateDir 旋轉(zhuǎn)速度：option.rotateSpeed
var self=this;
var direction=option.rotateDir||'CW';//順時針：CW 逆時針：ACW
removeImgsHandler(this.imgs);
timeId=window.setInterval(function(){
for(var i=0,len=self.imgs.length;i<len;i++){
setImgPositionAndSize(self.imgs[i],self.path,direction);
}
},20);
}
else if(patternName==='hand'){//手動模式，可傳回調(diào)函數(shù)：option.onSelected 緩動模式：option.tween
var onSelected=option.onSelected||util.emptyFunction;
var tween=Tween[tween]||Tween['easeOut'];//緩動模式默認為easeout
removeImgsHandler(this.imgs);
(typeof timeId!='undefined')&&window.clearInterval(timeId);
timeId=undefined;
bindHandlerForImgs(this.imgs,this.path,tween,onSelected);
}
}
}
現(xiàn)在看看用戶選擇手動模式或者自動模式的接口：setPattern方法，該方法根據(jù)傳入的字符串不同而選擇不同的模式，“auto”為自動模式，該模式還可以傳入自定義參數(shù)，包括旋轉(zhuǎn)速度和旋轉(zhuǎn)方向。傳入“hand”則為手動模式，附加參數(shù)可以為手動選擇圖片后的回調(diào)函數(shù)，以及旋轉(zhuǎn)的緩動模式。
復制代碼 代碼如下:
var Tween = {//緩動類 默認提供三種緩動模式：linear easein easeout
linear: function(t,b,c,d,dir){ return c*t/d*dir + b; },
easeIn: function(t,b,c,d,dir){
return c*(t/=d)*t*dir + b;
},
easeOut: function(t,b,c,d,dir){
return -c *(t/=d)*(t-2)*dir + b;
}
};
以上就是緩動模式類，默認的三個模式分別為：勻速 先慢后快 先快后慢。用戶可以調(diào)用addTweenFunction方法添加自己的緩動模式。
更多關(guān)于緩動的話題可以參考這兩篇文章：
http://zengrong.net/post/1151.htm
http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html
復制代碼 代碼如下:
/* 添加緩動模式 */
addTweenFunction:function(name,func){
if(typeof func=='Function'||typeof func=='Object'){
Tween[name]=func;
}
},
添加緩動模式的參數(shù)可以為對象或方法，一次性添加同類型的一組緩動模式建議使用對象添加。
復制代碼 代碼如下:
/* 為圖片綁定點擊事件處理程序 */
var bindHandlerForImgs=function(imgs,path,onSelected){
for(var i=0,len=imgs.length;i<len;i++){
imgs[i].handler=imgSelectedHandler(imgs,path,onSelected);
util.addEventHandler(imgs[i],'click',imgs[i].handler);
}
}
在手動模式下，首先要做的就是為圖片綁定點擊的事件處理程序，點擊的圖片沿著橢圓軌跡旋轉(zhuǎn)移動到最前端，并且可以觸發(fā)回調(diào)函數(shù)。
復制代碼 代碼如下:
/* 圖片選擇事件處理程序 */
var imgSelectedHandler=function(imgs,path,tween,onSelected){
return function(eve){
eve=eve||window.event;
var dir;
var angle;
var target=eve.target||eve.srcElement;
var RC=target.RC;
if(RC>=Math.PI/2&&RC<=Math.PI*3/2){
dir='ACW';
angle=3*Math.PI/2-RC;
}
else{
dir='CW';
Math.sin(RC)>=0?angle=Math.PI/2+RC:angle=RC-3*Math.PI/2;
}
(typeof timeId!='undefined')&&window.clearInterval(timeId);
rotateAngle(imgs,angle,dir,tween,onSelected);
}
}
再看看手動模式下的核心函數(shù),該函數(shù)作為事件處理程序，在點擊選擇圖片后執(zhí)行。首先判斷所點擊圖片處在橢圓軌跡的左邊還是右邊，如果是左邊，則旋轉(zhuǎn)方向為逆時針，右邊則為順時針（為了符合最短移動路程的原則），之后調(diào)用 rotateAngle使圖片移動相應角度。
復制代碼 代碼如下:
/* 旋轉(zhuǎn)指定角度 */
var rotateAngle=function(imgs,angle,dir,tween,onSelected){
var duration=1000;
var startTime=(new Date()).getTime();
dir=='CW'?dir=-1:dir=1;
for(var i=0,len=imgs.length;i<len;i++){
imgs[i].startAngle=imgs[i].RC;
}
timeId=window.setInterval(function(){
var now=(new Date()).getTime();
if((now-startTime)>=duration){
window.clearInterval(timeId);
timeId=undefined;
onSelected=onSelected||util.emptyFunction;
onSelected();//觸發(fā)回調(diào)函數(shù);
}
for(var i=0,len=imgs.length;i<len;i++){
var path=tween(now-startTime,imgs[i].startAngle,angle,duration,dir);//通過緩動公式計算新角度（RC）
setPos(imgs[i],path,dir);
}
},20);
}
rotateAngle函數(shù)首先確定了旋轉(zhuǎn)所經(jīng)歷的時間，圖片的初始角度和開始旋轉(zhuǎn)的時間，然后把一切工作交給緩動函數(shù)來計算圖片下一次的旋轉(zhuǎn)角度，緩動函數(shù)可以是用戶設(shè)置的，也可以使用默認的easeout（先快后慢）。如果有回調(diào)函數(shù)的話，可以在旋轉(zhuǎn)結(jié)束后觸發(fā)。
復制代碼 代碼如下:
/* 選擇上一幅圖片 */
prePho:function(onSelected){
if(this.pattern=='hand'){
onSelected=onSelected||util.emptyFunction;
var tween=tween||Tween['easeOut'];
if(typeof timeId!='undefined'){
return;
}else{
rotateAngle(this.imgs,con,'ACW',tween,onSelected);
}
}
},
/* 選擇下一幅圖片 */
nextPho:function(onSelected){
if(this.pattern=='hand'){
onSelected=onSelected||util.emptyFunction;
var tween=tween||Tween['easeOut'];
if(typeof timeId!='undefined'){
return;
}else{
rotateAngle(this.imgs,con,'CW',tween,onSelected);
}
}
},
另外在手動模式下，提供選擇上一張圖片和下一張圖片的接口，原理就是使所有圖片的旋轉(zhuǎn)角度為圖片之間的夾角，上一張圖片和下一張圖片的旋轉(zhuǎn)方向分別設(shè)置為逆時針和順時針。
復制代碼 代碼如下:
var rp=new rotatePhos('container');
rp.setPattern('auto',{rotateSpeed:10});//自動模式 旋轉(zhuǎn)速度為10
rp.setPattern('hand');//手動模式
最后是調(diào)用方法初始化后需要設(shè)置旋轉(zhuǎn)的模式。
說了一大堆不知道說清楚了沒有，這里提供所有源碼，有興趣的童鞋可以看看哈~
源代碼：
html：
復制代碼 代碼如下:
<div id="wrap" style="background:black;width:650px; height:250px; padding-top:20px; padding-left:20px;">
<div id="container">
<img src="pp.jpg" />
<img src="pp.jpg"/>
<img src="pp.jpg"/>
<img src="pp.jpg"/>
<img src="pp.jpg"/>
<img src="pp.jpg"/>
<img src="pp.jpg" />
<img src="pp.jpg"/>
<img src="pp.jpg"/>
<img src="pp.jpg"/>
<img src="pp.jpg"/>
<img src="pp.jpg"/>
</div>
</div>
<p>
手動模式：<input id="select" type="radio" name="sel" value="手動模式" onclick="rp.setPattern('hand');" checked="checked"/>
自動模式：<input id="select" type="radio" name="sel" value="自動模式" onclick="rp.setPattern('auto');" />
</p>
<p>
<input id="pre" type="button" value="上一張" />
<input id="next" type="button" value="下一張"/>
</p>
JS:
復制代碼 代碼如下:
var util = {
$: function(sId) { return document.getElementById(sId); },
$$:function(tagName,parent){parent=parent||document; return parent.getElementsByTagName(tagName);},
addEventHandler: function(elem, type, handler) {
if (elem.addEventListener) {
elem.addEventListener(type, handler, false);
}
else {
elem.attachEvent("on" + type, handler);
}
},
removeEventHandler: function(elem, type, handler) {
if (elem.removeEventListener) {
elem.removeEventListener(type, handler, false);
}
else {
elem.detachEvent("on" + type, handler);
}
},
getComputedStyle: function(elem) {
if (elem.currentStyle)
return elem.currentStyle;
else {
return document.defaultView.getComputedStyle(elem, null);
}
},
getElementsByClassName: function(className, parentElement) {
var elems = (parentElement || document.body).getElementsByTagName("*");
var result = [];
for (i = 0; j = elems[i]; i++) {
if ((" " + j.className + " ").indexOf(" " + className + " ") != -1) {
result.push(j);
}
}
return result;
},
extend: function(destination, source) {
for (var name in source) {
destination[name] = source[name];
}
return destination;
},
emptyFunction:function(){}
};
var rotatePhos=(function(){
var rp=function(id,options){
this.init(id,options);//初始化
}
rp.prototype=(function(){
var rotate;
var imgWidth;
var imgHeight;
var scaleMargin;
var con;
var handler;
var minScale;
var Tween = {//緩動類 默認提供三種緩動模式：linear easein easeout
linear: function(t,b,c,d,dir){ return c*t/d*dir + b; },
easeIn: function(t,b,c,d,dir){
return c*(t/=d)*t*dir + b;
},
easeOut: function(t,b,c,d,dir){
return -c *(t/=d)*(t-2)*dir + b;
}
};
/* 改變橢圓旋轉(zhuǎn)軌跡的橫半軸長，豎半軸長*/
var changeRotateWH=function(width,height){
var halfScale=(this.maxScale-this.minScale)/2;//旋轉(zhuǎn)到中間位置時的圖片的縮放大小
rotate={};
rotate.originX=width/2;//旋轉(zhuǎn)原點X軸坐標
rotate.originY=height/2;//旋轉(zhuǎn)原點Y軸坐標
rotate.halfRotateWidth=(width-this.imgWidth)/2; //旋轉(zhuǎn)橫半軸長
rotate.halfRotateHeight=(height-this.imgHeight)/2; //旋轉(zhuǎn)豎半軸長
}
/* 設(shè)置圖片旋轉(zhuǎn)角和初始位置，大小 */
var initImgRC=function(imgs){
var len=imgs.length;
con=(2*Math.PI)/len;
for(var i=0;i<len;i++){
imgs[i].RC=i*con;
imgs[i].style.width=imgWidth+'px';
imgs[i].style.height=imgHeight+'px';
setImgPositionAndSize(imgs[i],0);
}
}
/* 設(shè)置圖片大小和位置 */
var setImgSize=function(img){
var left=rotate.originX+rotate.halfRotateWidth*Math.cos(img.RC)-imgWidth/2;
var top=rotate.originY-rotate.halfRotateHeight*Math.sin(img.RC)-imgHeight/2;
var scale=minScale+scaleMargin*(rotate.halfRotateHeight-rotate.halfRotateHeight*Math.sin(img.RC))/(2*rotate.halfRotateHeight);//圖片在該時刻的縮放比
img.style.cssText='position:absolute;left:'+left+'px;'
+'top:'+top+'px;'
+'width:'+imgWidth*scale+'px;'
+'height:'+imgHeight*scale+'px;'
+'z-index:'+Math.round(scale*100);
}
/* 設(shè)置圖片位置和大小的勻速變化 */
var setImgPositionAndSize=function(img,path,direction){
direction=direction||'CW';
var dir=direction=='CW'?-1:1;
img.RC+=(path*dir);
modifyImgAngle(img);
setImgSize(img);
}
/* 修改圖片旋轉(zhuǎn)角度（保證在0-2pai之間） */
var modifyImgAngle=function(img){
(img.RC>(2*Math.PI))&&(img.RC-=2*Math.PI);
(img.RC<0)&&(img.RC+=2*Math.PI);
}
/* 設(shè)置圖片的新位置 */
var setPos=function(img,path){
img.RC=path;
modifyImgAngle(img);
var left=rotate.originX+rotate.halfRotateWidth*Math.cos(img.RC)-imgWidth/2;
var top=rotate.originY-rotate.halfRotateHeight*Math.sin(img.RC)-imgHeight/2;
var scale=0.5+scaleMargin*(rotate.halfRotateHeight-rotate.halfRotateHeight*Math.sin(img.RC))/(2*rotate.halfRotateHeight);//圖片在該時刻的縮放比
img.style.cssText='position:absolute;left:'+left+'px;'
+'top:'+top+'px;'
+'width:'+imgWidth*scale+'px;'
+'height:'+imgHeight*scale+'px;'
+'z-index:'+Math.round(scale*100);
}
/* 旋轉(zhuǎn)指定角度 */
var rotateAngle=function(imgs,angle,dir,tween,onSelected){
var duration=1000;
var startTime=(new Date()).getTime();
dir=='CW'?dir=-1:dir=1;
for(var i=0,len=imgs.length;i<len;i++){
imgs[i].startAngle=imgs[i].RC;
}
timeId=window.setInterval(function(){
var now=(new Date()).getTime();
if((now-startTime)>=duration){
window.clearInterval(timeId);
timeId=undefined;
onSelected=onSelected||util.emptyFunction;
onSelected();//觸發(fā)回調(diào)函數(shù);
}
for(var i=0,len=imgs.length;i<len;i++){
var path=tween(now-startTime,imgs[i].startAngle,angle,duration,dir);//通過緩動公式計算新角度（RC）
setPos(imgs[i],path,dir);
}
},20);
}
/* 圖片選擇事件處理程序 */
var imgSelectedHandler=function(imgs,path,tween,onSelected){
return function(eve){
eve=eve||window.event;
var dir;
var angle;
var target=eve.target||eve.srcElement;
var RC=target.RC;
if(RC>=Math.PI/2&&RC<=Math.PI*3/2){
dir='ACW';
angle=3*Math.PI/2-RC;
}
else{
dir='CW';
Math.sin(RC)>=0?angle=Math.PI/2+RC:angle=RC-3*Math.PI/2;
}
(typeof timeId!='undefined')&&window.clearInterval(timeId);
rotateAngle(imgs,angle,dir,tween,onSelected);
}
}
/* 為圖片綁定點擊事件處理程序 */
var bindHandlerForImgs=function(imgs,path,onSelected){
for(var i=0,len=imgs.length;i<len;i++){
imgs[i].handler=imgSelectedHandler(imgs,path,onSelected);
util.addEventHandler(imgs[i],'click',imgs[i].handler);
}
}
/* 刪除圖片上的點擊事件處理程序 */
var removeImgsHandler=function(imgs){
for(var i=0,len=imgs.length;i<len;i++){
if(imgs[i].handler){
util.removeEventHandler(imgs[i],'click',imgs[i].handler);
}
}
}
return{
/* 初始化 */
init:function(id,options){
var defaultOptions={
width:600, //容器寬
height:200, //容器高
imgWidth:100, //圖片寬
imgHeight:60, //圖片高
maxScale:1.5, //最大縮放倍數(shù)
minScale:0.5, //最小縮放倍數(shù)
rotateSpeed:10 //運轉(zhuǎn)速度
}
options=util.extend(defaultOptions,options);//參數(shù)設(shè)置
this.container=util.$(id);
this.width=options.width;
this.height=options.height;
imgWidth=this.imgWidth=options.imgWidth;
imgHeight=this.imgHeight=options.imgHeight;
this.maxScale=options.maxScale;
minScale=this.minScale=options.minScale;
scaleMargin=this.maxScale-this.minScale;
this.rotateSpeed=options.rotateSpeed;
this.imgs=util.$$('img',this.container);
this.setContainerSize(this.width,this.height);
initImgRC(this.imgs);
},
/* 設(shè)置容器尺寸 */
setContainerSize:function(width,height){
width=width||this.width;
height=height||this.height;
this.container.style.position='relative';
this.container.style.width=width+'px';
this.container.style.height=height+'px';
changeRotateWH.call(this,width,height);//改變?nèi)萜鞒叽绾蟾淖冃D(zhuǎn)軌跡
},
/* 選擇上一幅圖片 */
prePho:function(onSelected){
if(this.pattern=='hand'){
onSelected=onSelected||util.emptyFunction;
var tween=tween||Tween['easeOut'];
if(typeof timeId!='undefined'){
return;
}else{
rotateAngle(this.imgs,con,'ACW',tween,onSelected);
}
}
},
/* 選擇下一幅圖片 */
nextPho:function(onSelected){
if(this.pattern=='hand'){
onSelected=onSelected||util.emptyFunction;
var tween=tween||Tween['easeOut'];
if(typeof timeId!='undefined'){
return;
}else{
rotateAngle(this.imgs,con,'CW',tween,onSelected);
}
}
},
/* 添加緩動模式 */
addTweenFunction:function(name,func){
if(typeof func=='Function'||typeof func=='Object'){
Tween[name]=func;
}
},
/* 設(shè)置旋轉(zhuǎn)模式（自動/手動）*/
setPattern:function(patternName,option){
option=option||{};
this.pattern=patternName;
var rotateSpeed=option.rotateSpeed||10;
this.path=Math.PI/1000*rotateSpeed;
(typeof timeId!='undefined')&&window.clearInterval(timeId);
if(patternName==='auto'){//自動模式 可傳入旋轉(zhuǎn)方向：option.rotateDir 旋轉(zhuǎn)速度：option.rotateSpeed
var self=this;
var direction=option.rotateDir||'CW';//順時針：CW 逆時針：ACW
removeImgsHandler(this.imgs);
timeId=window.setInterval(function(){
for(var i=0,len=self.imgs.length;i<len;i++){
setImgPositionAndSize(self.imgs[i],self.path,direction);
}
},20);
}
else if(patternName==='hand'){//手動模式，可傳回調(diào)函數(shù)：option.onSelected 緩動模式：option.tween
var onSelected=option.onSelected||util.emptyFunction;
var tween=Tween[tween]||Tween['easeOut'];//緩動模式默認為easeout
removeImgsHandler(this.imgs);
(typeof timeId!='undefined')&&window.clearInterval(timeId);
timeId=undefined;
bindHandlerForImgs(this.imgs,this.path,tween,onSelected);
}
}
}
})();
return rp;
})();
var rp=new rotatePhos('container');
//rp.setPattern('auto',{rotateSpeed:10});
rp.setPattern('hand');
document.getElementById('pre').onclick=function(){rp.prePho();};
document.getElementById('next').onclick=function(){rp.nextPho();};
完整的實現(xiàn)代碼:
復制代碼 代碼如下:
<div id="wrap" style="background: black; width: 800px; height: 350px; padding-top: 20px; padding-left: 20px; padding-right: 20px;">
<div id="container"><img src="/upload/201201/20120116231926539.jpg" alt="" /> <img src="/upload/201201/20120116231926632.jpg" alt="" /> <img src="/upload/201201/20120116231926661.jpg" alt="" /> <img src="/upload/201201/20120116231926763.jpg" alt="" /> <img src="/upload/201201/20120116231926174.jpg" alt="" /> <img src="/upload/201201/20120116231926604.jpg" alt="" /> <img src="/upload/201201/20120116231927431.jpg" alt="" /> <img src="/upload/201201/20120116231927666.JPG" alt="" /> <img src="/upload/201201/20120116231927424.jpg" alt="" /> <img src="/upload/201201/20120116231927108.jpg" alt="" /> <img src="/upload/201201/20120116231927843.jpg" alt="" /> <img src="/upload/201201/20120116231927662.bmp" alt="" /></div>
</div>
<p>手動模式：<input id="select" onclick="rp.setPattern('hand');" type="radio" name="sel" value="手動模式" /> 自動模式：<input id="select" onclick="rp.setPattern('auto');" type="radio" name="sel" value="自動模式" /></p>
<p><input id="pre" type="button" value="上一張" /> <input id="next" type="button" value="下一張" /></p>
<p>
<script type="text/javascript">// <![CDATA[
var rotatePhos = (function() {
var util = {
$: function(sId) { return document.getElementById(sId); },
$$: function(tagName, parent) { parent = parent || document; return parent.getElementsByTagName(tagName); },
addEventHandler: function(elem, type, handler) {
if (elem.addEventListener) {
elem.addEventListener(type, handler, false);
}
else {
elem.attachEvent("on" + type, handler);
}
},
removeEventHandler: function(elem, type, handler) {
if (elem.removeEventListener) {
elem.removeEventListener(type, handler, false);
}
else {
elem.detachEvent("on" + type, handler);
}
},
getComputedStyle: function(elem) {
if (elem.currentStyle)
return elem.currentStyle;
else {
return document.defaultView.getComputedStyle(elem, null);
}
},
emptyFunction: function() { },
getElementsByClassName: function(className, parentElement) {
var elems = (parentElement || document.body).getElementsByTagName("*");
var result = [];
for (i = 0; j = elems[i]; i++) {
if ((" " + j.className + " ").indexOf(" " + className + " ") != -1) {
result.push(j);
}
}
return result;
},
extend: function(destination, source) {
for (var name in source) {
destination[name] = source[name];
}
return destination;
}
};
var rp = function(id, options) {
this.init(id, options); //初始化
}
rp.prototype = (function() {
var rotate;
var imgWidth;
var imgHeight;
var scaleMargin;
var con;
var handler;
var Tween = {//緩動類 默認提供三種緩動模式：linear easein easeout
linear: function(t, b, c, d, dir) { return c * t / d * dir + b; },
easeIn: function(t, b, c, d, dir) {
return c * (t /= d) * t * dir + b;
},
easeOut: function(t, b, c, d, dir) {
return -c * (t /= d) * (t - 2) * dir + b;
}
};
/* 改變橢圓旋轉(zhuǎn)軌跡的橫半軸長，豎半軸長*/
var changeRotateWH = function(width, height) {
var halfScale = (this.maxScale - this.minScale) / 2; //旋轉(zhuǎn)到中間位置時的圖片的縮放大小
rotate = {};
rotate.originX = width / 2; //旋轉(zhuǎn)原點X軸坐標
rotate.originY = height / 2; //旋轉(zhuǎn)原點Y軸坐標
rotate.halfRotateWidth = (width - this.imgWidth) / 2; //旋轉(zhuǎn)橫半軸長
rotate.halfRotateHeight = (height - this.imgHeight) / 2; //旋轉(zhuǎn)豎半軸長
}
/* 設(shè)置圖片旋轉(zhuǎn)角和初始位置，大小 */
var initImgRC = function(imgs) {
var len = imgs.length;
con = (2 * Math.PI) / len;
for (var i = 0; i < len; i++) {
imgs[i].RC = i * con;
imgs[i].style.width = imgWidth + 'px';
imgs[i].style.height = imgHeight + 'px';
setImgPositionAndSize(imgs[i], 0);
}
}
/* 設(shè)置圖片大小 */
var setImgSize = function(img) {
var left = rotate.originX + rotate.halfRotateWidth * Math.cos(img.RC) - imgWidth / 2;
var top = rotate.originY - rotate.halfRotateHeight * Math.sin(img.RC) - imgHeight / 2;
var scale = 0.5 + scaleMargin * (rotate.halfRotateHeight - rotate.halfRotateHeight * Math.sin(img.RC)) / (2 * rotate.halfRotateHeight); //圖片在該時刻的縮放比
img.style.cssText = 'position:absolute;left:' + left + 'px;'
+ 'top:' + top + 'px;'
+ 'width:' + imgWidth * scale + 'px;'
+ 'height:' + imgHeight * scale + 'px;'
+ 'cursor:pointer;'
+ 'z-index:' + Math.round(scale * 100);
}
/* 設(shè)置圖片位置和大小的勻速變化 */
var setImgPositionAndSize = function(img, path, direction) {
direction = direction || 'CW';
var dir = direction == 'CW' ? -1 : 1;
img.RC += (path * dir);
modifyImgAngle(img);
setImgSize(img);
}
/* 修改圖片旋轉(zhuǎn)角度（保證在0-2pai之間） */
var modifyImgAngle = function(img) {
(img.RC > (2 * Math.PI)) && (img.RC -= 2 * Math.PI);
(img.RC < 0) && (img.RC += 2 * Math.PI);
}
/* 設(shè)置圖片的新位置 */
var setPos = function(img, path) {
img.RC = path;
modifyImgAngle(img);
var left = rotate.originX + rotate.halfRotateWidth * Math.cos(img.RC) - imgWidth / 2;
var top = rotate.originY - rotate.halfRotateHeight * Math.sin(img.RC) - imgHeight / 2;
var scale = 0.5 + scaleMargin * (rotate.halfRotateHeight - rotate.halfRotateHeight * Math.sin(img.RC)) / (2 * rotate.halfRotateHeight); //圖片在該時刻的縮放比
img.style.cssText = 'position:absolute;left:' + left + 'px;'
+ 'top:' + top + 'px;'
+ 'width:' + imgWidth * scale + 'px;'
+ 'height:' + imgHeight * scale + 'px;'
+ 'z-index:' + Math.round(scale * 100);
}
/* 旋轉(zhuǎn)指定角度 */
var rotateAngle = function(imgs, angle, dir, tween, onSelected) {
var duration = 1000;
var startTime = (new Date()).getTime();
dir == 'CW' ? dir = -1 : dir = 1;
for (var i = 0, len = imgs.length; i < len; i++) {
imgs[i].startAngle = imgs[i].RC;
}
timeId = window.setInterval(function() {
var now = (new Date()).getTime();
if ((now - startTime) >= duration) {
window.clearInterval(timeId);
timeId = undefined;
onSelected = onSelected || util.emptyFunction;
onSelected(); //觸發(fā)回調(diào)函數(shù);
}
for (var i = 0, len = imgs.length; i < len; i++) {
var path = tween(now - startTime, imgs[i].startAngle, angle, duration, dir); //通過緩動公式計算新角度（RC）
setPos(imgs[i], path, dir);
}
}, 20);
}
/* 圖片選擇事件處理程序 */
var imgSelectedHandler = function(imgs, path, tween, onSelected) {
return function(eve) {
eve = eve || window.event;
var dir;
var angle;
var target = eve.target || eve.srcElement;
var RC = target.RC;
if (RC >= Math.PI / 2 && RC <= Math.PI * 3 / 2) {
dir = 'ACW';
angle = 3 * Math.PI / 2 - RC;
}
else {
dir = 'CW';
Math.sin(RC) >= 0 ? angle = Math.PI / 2 + RC : angle = RC - 3 * Math.PI / 2;
}
(typeof timeId != 'undefined') && window.clearInterval(timeId);
rotateAngle(imgs, angle, dir, tween, onSelected);
}
}
/* 為圖片綁定點擊事件處理程序 */
var bindHandlerForImgs = function(imgs, path, onSelected) {
for (var i = 0, len = imgs.length; i < len; i++) {
imgs[i].handler = imgSelectedHandler(imgs, path, onSelected);
util.addEventHandler(imgs[i], 'click', imgs[i].handler);
}
}
/* 刪除圖片上的點擊事件處理程序 */
var removeImgsHandler = function(imgs) {
for (var i = 0, len = imgs.length; i < len; i++) {
if (imgs[i].handler) {
util.removeEventHandler(imgs[i], 'click', imgs[i].handler);
}
}
}
return {
/* 初始化 */
init: function(id, options) {
var defaultOptions = {
width: 700, //容器寬
height: 300, //容器高
imgWidth: 130, //圖片寬
imgHeight: 80, //圖片高
maxScale: 1.5, //最大縮放倍數(shù)
minScale: 0.5, //最小縮放倍數(shù)
rotateSpeed: 10 //運轉(zhuǎn)速度
}
options = util.extend(defaultOptions, options); //參數(shù)設(shè)置
this.container = util.$(id);
this.width = options.width;
this.height = options.height;
imgWidth = this.imgWidth = options.imgWidth;
imgHeight = this.imgHeight = options.imgHeight;
this.maxScale = options.maxScale;
this.minScale = options.minScale;
scaleMargin = this.maxScale - this.minScale;
this.rotateSpeed = options.rotateSpeed;
this.imgs = util.$$('img', this.container);
this.setContainerSize(this.width, this.height);
initImgRC(this.imgs);
},
/* 設(shè)置容器尺寸 */
setContainerSize: function(width, height) {
width = width || this.width;
height = height || this.height;
this.container.style.position = 'relative';
this.container.style.width = width + 'px';
this.container.style.height = height + 'px';
changeRotateWH.call(this, width, height); //改變?nèi)萜鞒叽绾蟾淖冃D(zhuǎn)軌跡
},
/* 選擇上一幅圖片 */
prePho: function(onSelected) {
if (this.pattern == 'hand') {
onSelected = onSelected || util.emptyFunction;
var tween = tween || Tween['easeOut'];
if (typeof timeId != 'undefined') {
return;
} else {
rotateAngle(this.imgs, con, 'ACW', tween, onSelected);
}
}
},
/* 選擇下一幅圖片 */
nextPho: function(onSelected) {
if (this.pattern == 'hand') {
onSelected = onSelected || util.emptyFunction;
var tween = tween || Tween['easeOut'];
if (typeof timeId != 'undefined') {
return;
} else {
rotateAngle(this.imgs, con, 'CW', tween, onSelected);
}
}
},
/* 添加緩動模式 */
addTweenFunction: function(name, func) {
if (typeof func == 'Function' || typeof func == 'Object') {
Tween[name] = func;
}
},
/* 設(shè)置旋轉(zhuǎn)模式（自動/手動）*/
setPattern: function(patternName, option) {
option = option || {};
this.pattern = patternName;
var rotateSpeed = option.rotateSpeed || 10;
this.path = Math.PI / 1000 * rotateSpeed;
(typeof timeId != 'undefined') && window.clearInterval(timeId);
if (patternName === 'auto') {//自動模式 可傳入旋轉(zhuǎn)方向：option.rotateDir 旋轉(zhuǎn)速度：option.rotateSpeed
var self = this;
var direction = option.rotateDir || 'CW'; //順時針：CW 逆時針：ACW
removeImgsHandler(this.imgs);
timeId = window.setInterval(function() {
for (var i = 0, len = self.imgs.length; i < len; i++) {
setImgPositionAndSize(self.imgs[i], self.path, direction);
}
}, 20);
}
else if (patternName === 'hand') {//手動模式，可傳回調(diào)函數(shù)：option.onSelected 緩動模式：option.tween
var onSelected = option.onSelected || util.emptyFunction;
var tween = Tween[tween] || Tween['easeOut']; //緩動模式默認為easeout
removeImgsHandler(this.imgs);
(typeof timeId != 'undefined') && window.clearInterval(timeId);
timeId = undefined;
bindHandlerForImgs(this.imgs, this.path, tween, onSelected);
}
}
}
})();
return rp;
})();
var rp=new rotatePhos('container');
//rp.setPattern('auto',{rotateSpeed:10});
rp.setPattern('hand');
document.getElementById('pre').onclick=function(){rp.prePho();};
document.getElementById('next').onclick=function(){rp.nextPho();};
// ]]></script>
</p>
相關(guān)文章
javascript實現(xiàn)網(wǎng)站頂部出現(xiàn)幾秒后圖片緩慢消失的效果
快過年了，很多網(wǎng)站首頁都放上了新春的祝福，有些是直接換成皮膚了，而有些則是用一張很大的圖片放在網(wǎng)站頂部，在倒數(shù)幾秒后，緩慢升上去直到最后消失。2011-01-01
javascript 多圖瀏覽超炫效果，非常不錯，大家可以看下。2009-12-12
JS實現(xiàn)全景圖效果360度旋轉(zhuǎn)...2007-01-01
我們寫網(wǎng)頁的時候一般的用IE進行開發(fā)，一般的人都是按照IE進行些程序，做網(wǎng)站的時候遇到瀏覽器兼容問題是非常煩躁的事情。2010-12-12
新頁面打開實際尺寸的圖片...2006-08-08
這是一款比較有立體感的圖片瀏覽器，通過圖層定位技術(shù)z-index讓瀏覽器正在查看的圖片突顯出來，并讓兩邊的圖片呈現(xiàn)半透明狀態(tài)。很個性化哦！2010-02-02
多圖展示點擊切換效果模擬的flash效果，點小圖放大顯示，再點恢復默認。
多圖展示點擊切換效果模擬的flash效果，點小圖放大顯示，再點恢復默認。...2006-12-12
javascript 動態(tài)調(diào)整圖片尺寸實現(xiàn)代碼
在自己的網(wǎng)站上更新文章時一個比較常見的問題是：文章插圖太寬，使整個網(wǎng)頁都變形了。如果對每個插圖都先進行縮放再插入的話，太麻煩了。2009-12-12
js 圖片縮放（按比例）實現(xiàn)代碼。2009-05-05
ie8.0下顯示本地圖片的js實現(xiàn)代碼 img.src
ie8.0下顯示本地圖片的js實現(xiàn)代碼，IE8.0 顯示本地圖片 img.src=本地圖片路徑 是無效，只能通過div來完成2012-03-03