先看下前幾天的動畫是如何構造JS的：
複製代碼 代碼如下:
var photo=function(){
var index=0,a,b,c,d;
return {
show:function(){},
auto:function(){}
}
}
var aa=photo();
//基本上是 用return 返回了一些方法。
// 1：無法初始化就執行 auto。
// 2:在初始化的時候，我沒辦法把this指向aa。
//上面兩個問題，會很不方便。
1：我不願意讓自己去這洋寫：
複製代碼 代碼如下:
var aa=photo("id");
aa.auto()//多一句話，很不好看。
理想狀態是我在
var aa=photo("id")的時候就告訴程式是否自動播放。
2：如果有兩個動畫在同一個頁面。
比如：
複製代碼 代碼如下:
var aa=photo("id1");
aa.auto()
var bb=photo("id2");
bb.auto()
那麼他們都有使用者控制動畫的A標籤，如何各自負責自己的動畫。不互相干擾。（其實他涉及到私人變數的問題，還有this指向）;
申明：網上有很多解決上面問題的方法。下面的只是我弄明白了。所以來給大家分享，高手見笑了。
不錯，又是在公車上，我解決了這個問題。《javascript語言精粹》第52頁 5.4函數化
我來看一下這個 函數化構造器的原始碼：
//加粗表示強調
//這個方法是 《javascript語言精粹》第52頁 5.4函數化 上的。
var constructor = function (spec,my){
var that,其他的私人執行個體變數;
my = my || {};
把共用的變數和函數添加到my中
that = 一個新對象
添加給that 的特權方法
return that;
}
看下面的方法：
複製代碼 代碼如下:
var photo = function(spec){
var _this={},index,a,c,d;
//這裡可以初始化使用者控制的a標籤
//比如這洋
a.onmouseover=function(){
_this.go();//可以調用哦
}
_this.show=function(){};
_this.auto=function(){};
_this.go=function(){};
// 這裡可以直接調用剛才申明好的方法
_this.auto()//可以直接調用
return _this;
}
var bb=photo({index:1;});
var aa=photo({index:2});
//上面建立了 bb aa 兩個不同的動畫，不會互相影響哦。
// 如果我對javascript語言精粹 的函數化 理解有問題。還請指教...
最後這個動畫就比較完美了。可是私人變數太多了。如果可以設定預設值，可以使用者選擇性的傳進來。會比較好
所以可以添加下面這個函數：（這是很多人都使用的啦）
複製代碼 代碼如下:
var Extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}
// 看到 Extend 大家都知道 他是做什麼用的了。
最後貼出我今天寫的這個 圖片輪換的原始碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>javascript 圖片輪換</title> </head> <body> <style type="text/css"> body,ul,li{ margin:0; padding:0;} #div{width:610px;height:210px;overflow:hidden;} #photo li{height:210px; overflow:hidden; background:#fff url(001.gif) no-repeat center center;} #photo2 li{height:210px; overflow:hidden; background:#fff url(001.gif) no-repeat center center;} .number-warp{position:absolute;margin-top:-50px;width:600px; text-align:right;} .number-warp a{border:1px solid #CCC; width:30px; height:30px; display:inline-block; height:100%;margin-left:5px; text-align:center; text- decoration:none;} .sel{background:#CCC;} </style> <div > <div id="div"> <ul id="photo" > <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <div class="number-warp" id="number"> 1 2 3 4 5 </div> </div> <div > <div id="div"> <ul id="photo2" > <li></li> <li></li> <li></li> <li></li> </ul> </div> <div class="number-warp" id="number2"> 1 2 3 4 </div> </div> <script type="text/javascript"> var Extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } return destination; } var photo=function(spec){ var $=function(id){ return document.getElementById(id); }, _this={}, a=document.getElementById(spec["number"]).getElementsByTagName("A"), my={ $:"", change:-210, d:50, num:3, au:true, index:0,x:null,v:null }, tween=function(t,b,c,d){ return -c*(t/=d)*(t-2)+b; }, autoo=function(){ _this.show( my.index+1 > my.num ? 0 : my.index+1); }; Extend(my,spec)//用他更好一點 for(var i=0 ;i<a.length ;i++){ a[i].onmouseover=(function(i){ return function(){ _this.go(i) } })(i); a[i].onmouseout=(function(i){ return function(){ _this.auto() } })(i); }; _this.show=function(n){ if(typeof my.x == "number"){ _this.stop(); } var t=0,n=n,b=parseInt(my.$.style.marginTop),c=n*my.change-b, o=function(){ t++; if(t==my.d+1){ _this.stop(); }else{ my.$.style.marginTop=tween(t,b,c,my.d)+"px"; my.x=setTimeout(o,10); } } a[my.index].className=""; a[n].className="sel"; my.index=n; o(); }; _this.stop=function(){ clearTimeout(my.x);my.x=null; }; _this.auto=function(){ _this=this; my.v=setInterval(autoo,3000); }; _this.go=function(n){ clearInterval(my.v); this.show(n); }; if(my.au){_this.auto();}; return _this; } var bb=photo({$:document.getElementById("photo2"), number:"number2", change:-210, num:3 }); var aa=photo({$:document.getElementById("photo"), change:-210, number:"number", num:4 }); </script> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
