不久前在csdn的js板塊看到一個as+js+lightbox動態加載圖片顯示進度的程序,隨便幫改了下代碼。后面要幫女朋友搞她設計作品的展示時發現代碼中的flash只提供了成功加載時的回調函數,而如果圖片未找到或者剛開始加載時沒有什么提示。所以自己把swf反編譯了一下,修改了as腳本,使之擁有了4個回調,加載圖片開始,過程,成功加載和錯誤的回調,增強下用戶體驗O(∩_∩)O~
效果如下
下面列出as腳本,js腳本的主要代碼供大家學習下。lightbox效果已經繼承到了design.js文件里面了。
as腳本部分,loadSwf.fla第一幀的腳本
//loadUrl:要加載的圖片地址URL//loading:加載過程反饋信息的js函數名 ,參數 function(p:完成百分比,loaded:已經加載的,total:總大小) ///Success:成功加載完成后執行的js函數名,參數 function(w:圖片原始長度,h:圖片原始寬)//Failure:加載失敗執行的函數名稱,參數 function(msg:錯誤信息)function loadPicture(loadUrl,loading,Success,Failure){ var _loc2 = random(1000000000); _root.createEmptyMovieClip("loadMc" + _loc2, _root.getNextHighestDepth());//這里flash使用了一個類as.loadPic,在下面貼出代碼 new as.loadPic(_root["loadMc" + _loc2], loadUrl, function (ob){//成功時調用js傳遞進來的js回調函數,下面同理 new flash.external.ExternalInterface.call(Success,loadUrl, ob._width, ob._height); }, function (loadN,loaded,total){//過程 new flash.external.ExternalInterface.call(loading, loadN, loaded,total); }, function (err){//發生錯誤 new flash.external.ExternalInterface.call(Failure,err); });} // End of the function//使用flash.external.ExternalInterface接口注冊給js調用的函數flash.external.ExternalInterface.addCallback("forJS", null, loadPicture);
loadPic.as源代碼
class as.loadPic{ function loadPic(ob, uri,Success, loadIng,Failure){ if (ob && uri){ var _loc2 = new MovieClipLoader(); var _loc1 = new Object(); var loadnum; _loc1.onLoadStart = function (tmc){ }; _loc1.onLoadProgress = function (tmc, loadedBytes, totalBytes){ loadnum = int(loadedBytes / totalBytes * 100); loadIng(loadnum,loadedBytes,totalBytes); }; _loc1.onLoadComplete = function (tmc){ }; _loc1.onLoadInit = function (tmc){ if (Success && typeof(Success) == "function")Success(tmc); }; _loc1.onLoadError = function (tmc, errc){ if (Failure && typeof(Failure) == "function")Failure(errc); }; _loc2.addListener(_loc1); _loc2.loadClip(uri, ob); } } }
design.js源代碼
if(typeof(Showbo)=="undefined")Showbo={};Showbo.Design={ lightBox:null, dvPopDesign:null, tool:null, dvpic:null, loading:null, dvpro:null, dvinfo:null, newA:null, step:100, min:300, pos:{x:0,y:0,ex:0,ey:0,drag:false}, /*Flash中調用的js函數*/ Start:function(){ this.dvpro.style.width="1%"; this.dvinfo.innerHTML="準備下載,請等待..."; }, Loading:function(p,loaded,total){ this.dvpro.style.width=p+"%"; this.dvinfo.innerHTML="已下載:"+Showbo.round(loaded/1024,1)+"kb,總共"+Showbo.round(total/1024,1)+"kb,完成"+p+'%'; }, Success:function(picurl,w,h){//bmp不能取到w和h參數,汗。。。 this.loading.style.display='none'; if(w>100){this.w=w;this.h=h;} this.dvpic.parentNode.style.display=this.tool.style.display='block'; this.dvpic.src=picurl; this.newA.href=picurl; var me=this; setTimeout(function(){me.Org();},100); }, Failure:function(msg){ //RLNotFound:找不到文件或者服務器關閉----當服務器關閉或找不到文件時 //LoadNeverCompleted:當下載由于服務器超載、服務器崩潰等原因中斷時。 this.dvinfo.innerHTML='<font color="red">'+msg+'</font> <a href="javascript:Showbo.Design.hide();">關閉</a>'; }, //js調用flash中的方法,默認名為forJS JScallSWF:function(picurl){ if(window["swfId"]&&window["swfId"].forJS)window["swfId"].forJS(picurl,'Showbo.Design.Loading','Showbo.Design.Success','Showbo.Design.Failure');//ie else if(Showbo.$("swfId").forJS)Showbo.$("swfId").forJS(picurl,'Showbo.Design.Loading','Showbo.Design.Success','Showbo.Design.Failure'); else if(document["swfId"]&&document["swfId"].forJS)document["swfId"].forJS(picurl,'Showbo.Design.Loading','Showbo.Design.Success','Showbo.Design.Failure');//ff }, Org:function(){ this.dvpic.style.cssText="";//移除所有樣式,不要使用removeAttribu("style"),在ie6下速度奇慢 this.dvPopDesign.style.height=this.dvPopDesign.style.width='auto'; this.onResize(); }, Drag:function(e){ Showbo.Design.cancelEvent(e); e=e||event; if((Showbo.IsIE&&e.button!=1)||(!Showbo.IsIE&&e.button!=0))return false; if(e.type.indexOf('mousedown')!=-1){ if(Showbo.IsIE)this.setCapture(); Showbo.Design.pos.x=parseInt(Showbo.Design.dvPopDesign.style.left,10); Showbo.Design.pos.y=parseInt(Showbo.Design.dvPopDesign.style.top,10); Showbo.Design.pos.ex=e.clientX; Showbo.Design.pos.ey=e.clientY; Showbo.Design.pos.drag=true; } else if(e.type.indexOf('mousemove')!=-1){ if(Showbo.Design.pos.drag){ Showbo.Design.dvPopDesign.style.left=Showbo.Design.pos.x+e.clientX-Showbo.Design.pos.ex+'px'; Showbo.Design.dvPopDesign.style.top=Showbo.Design.pos.y+e.clientY-Showbo.Design.pos.ey+'px'; } } else if(e.type.indexOf('mouseup')!=-1){ if(Showbo.IsIE)this.releaseCapture(); Showbo.Design.onResize(); Showbo.Design.pos.drag=false; } }, mouseWheel:function(e){ Showbo.Design.cancelEvent(e); e=e||event; var w=this.offsetWidth,h=this.offsetHeight,refH=Showbo.Design.step*h/w; if((Showbo.IsIE&&e.wheelDelta<0)||(!Showbo.IsIE&&e.detail>0)){//往下擴大 // if(this.offsetWidth<Showbo.Design.w){ this.style.width=w+Showbo.Design.step+'px'; this.style.height=h+refH+'px'; Showbo.Design.dvPopDesign.style.width=this.offsetWidth+'px'; // } }else{//縮小 if(w-Showbo.Design.step>=Showbo.Design.min){ this.style.width=w-Showbo.Design.step+'px'; this.style.height=h-refH+'px'; Showbo.Design.dvPopDesign.style.width=this.offsetWidth+'px'; } } Showbo.Design.onResize(); }, documentMouseWheel:function(e,IsTimer){ var me=Showbo.Design,ds=me.dvPopDesign; if(!IsTimer)setTimeout(function(){me.documentMouseWheel(null,true)},100); else if(ds.offsetHeight<Showbo.BodyScale.y)ds.style.top=document.documentElement.scrollTop+(Showbo.BodyScale.y-ds.offsetHeight)/2+'px'; }, InitDesign:function(){//需要收到調用此方法,要不ie下使用append增加的flash不能調用其方法,奇怪。。。 var html='<p id="designTools"><a href="#" title="在新窗口中打開" target="_blank"></a><a class="just" href="javascript:Showbo.Design.Org()" title="實際大小"></a>' +'<a class="close" title="關閉" href="javascript:Showbo.Design.hide()"></a><span>鼠標滾動縮放圖片,按下左鍵拖動</span></p>' +'<div class="pic"><img id="designPic"/></div>'+ '<div class="loading" id="designLoading"><div class="pro" id="designPro"></div><div id="designInfo"></div></div>'; document.write('<div class="popdesign" id="dvPopDesign">'+html+'</div>'); this.dvPopDesign=Showbo.$('dvPopDesign'); document.write('<div id="ShowBolightBox"></div>'); this.lightBox=Showbo.$('ShowBolightBox'); this.tool=Showbo.$('designTools'); this.newA=Showbo.$s(this.tool,'a')[0]; this.dvpic=Showbo.$('designPic'); this.dvpic.onmousedown=this.dvpic.onmousemove=this.dvpic.onmouseup=this.Drag; if(Showbo.IsIE)this.dvpic.onmousewheel=this.mouseWheel; else this.dvpic.addEventListener('DOMMouseScroll',this.mouseWheel,false); this.loading=Showbo.$('designLoading'); this.dvpro=Showbo.$('designPro'); this.dvinfo=Showbo.$('designInfo'); document.write('<div class="myloadswf">'); document.write(Showbo.IsIE?'<object id=swfId classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000><param name="src" value="/images/loadSwf.swf"></object>': '<embed id="swfId" type="application/x-shockwave-flash" src="/images/loadSwf.swf"/>'); document.write('</div>'); }, checkDOMLast:function(){//此方法非常關鍵,要不無法顯示彈出窗口。兩個對象dvPopDesign和lightBox必須處在body的最后兩個節點內 if(document.body.lastChild!=this.lightBox){ document.body.appendChild(this.dvPopDesign); document.body.appendChild(this.lightBox); } }, hideSelects:function(vis){ var sels=Showbo.$s('select'); for(var i=0;i<sels.length;i++)sels[i].style.visibility=vis; }, show:function(picurl,e){ this.checkDOMLast();//檢查是否在最后 this.lightBox.style.display=this.dvPopDesign.style.display='block'; this.dvpic.parentNode.style.display=this.tool.style.display='none'; this.dvpic.src=''; this.loading.style.display='block'; this.dvPopDesign.style.height=this.dvPopDesign.style.width='auto'; this.onResize(); this.JScallSWF(picurl); this.Start(); this.cancelEvent(); var me=this; //添加事件 if(Showbo.IsIE)document.documentElement.onmousewheel=this.documentMouseWheel; else document.documentElement.addEventListener('DOMMouseScroll',this.documentMouseWheel,false); this.hideSelects('hidden'); }, cancelEvent:function(e){ if(e){ e.stopPropagation(); e.preventDefault(); } else if(window.event){ window.event.returnValue=false;window.event.cancelBubble=true; } }, hide:function(){ if(!this.dvPopDesign)return false; //移除事件 if(Showbo.IsIE)document.documentElement.onmousewheel=null; else document.documentElement.removeEventListener('DOMMouseScroll',this.documentMouseWheel,false); this.dvPopDesign.style.display='none'; this.lightBox.style.display='none'; this.hideSelects('visible'); }, onResize:function(){ Showbo.initBodyScale(); var ds=Showbo.Design.dvPopDesign,lbox=Showbo.Design.lightBox,oL,oH,scrollTop=document.documentElement.scrollTop; oL=ds.offsetWidth;oH=ds.offsetHeight; if(!Showbo.Design.pos.drag){ ds.style.left=oL>Showbo.BodyScale.otx?0:Math.floor((Showbo.BodyScale.x-ds.offsetWidth)/2)+'px'; ds.style.top=scrollTop+(oH>Showbo.BodyScale.oty?0:Math.floor((Showbo.BodyScale.y-ds.offsetHeight)/2))+'px'; }else{ oL+=(ds.style.left?parseInt(ds.style.left):0); oH+=(ds.style.top?parseInt(ds.style.top):0); } Showbo.Design.lightBox.style.width=(oL<Showbo.BodyScale.otx?Showbo.BodyScale.otx:oL)+'px'; Showbo.Design.lightBox.style.height=(oH<Showbo.BodyScale.oty?Showbo.BodyScale.oty:oH)+'px'; }}
widget.css樣式表
+展開-CSS#ShowBolightBox{display:none;-moz-opacity:0.5;filter:alpha(opacity=50);opacity:0.5;background-color:#000000;z-index:100;position:absolute;left:0px;top:0px;}.popdesign{position:absolute;color:#999999;padding:5px 10px 10px 10px;z-index:999;background:#ffffff;font-size:12px;display:none;}.popdesign p{margin:0px;padding:0px;display:none;}.popdesign p a{float:left;background:transparent url(../images/imgzoom.gif) no-repeat 0px 0px;width:17px;height:17px;margin:5px;}.popdesign p a:hover{background-position:0px -39px;}.popdesign p a.just{background-position:-40px -0px;}.popdesign p a.just:hover{background-position:-40px -39px;}.popdesign p a.close{background-position:-80px -0px;}.popdesign p a.close:hover{background-position:-80px -39px;}.popdesign p span{float:left;margin:8px auto auto 20px;}.popdesign div.pic{clear:both;display:none;}.popdesign div.pic img{cursor:move;}.popdesign div.loading{margin:40px;width:300px;display:block;}.popdesign div.loading .pro{height:10px;width:1%;background:#ff0000;line-height:10px;overflow:hidden;}.myloadswf{position:absolute;left:200px;top:1px;height:1px;width:1px;overflow:hidden;line-height:1px;z-index:-2;}.myloadswf object,.myloadswf embed{width:1px;height:1px;}
測試頁面index.html
<!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=utf-8" /> <title>編程設計網--設計作品title> <meta id="metaKey" name="Keywords" content="平面設計,網頁設計,的士廣告,單頁宣傳,戶外廣告" /> <meta id="metaDes" name="Description" content="平面設計,網頁設計,平面設計,網頁設計,的士廣告,單頁宣傳,戶外廣告" /> <link href="css/widget.css" type="text/css" rel="Stylesheet" /> <script type="text/javascript" src="js/design.js"></script> </head><body> <img title="點擊查看大圖" src="1_s.gif" onclick="Showbo.Design.show('1.gif')" /><br > <img title="點擊查看大圖" src="2_s.jpg" onclick="Showbo.Design.show('2.jpg')" /><br ><br > <br ><br ><br > 這張圖片特意傳遞錯誤的地址,測試錯誤回調函數<br > <img title="點擊查看大圖" src="1_s.gif" onclick="Showbo.Design.show('錯誤的圖片地址.gif',event)" /><br > <script type="text/javascript">Showbo.Design.InitDesign();//這里需要手動調用初始化函數,要不在ie6下不能調用flash中的方法,郁悶ing....</script> </body></html><script type="text/javascript">Showbo.initBodyScale(true);</script>
新聞熱點
疑難解答