视频技术

FFmpeg red5 nginx Html5 rtsp rtmp

·您当前的位置：首页 > 技术教程 > AS2与AS3技术 >

[AS3]As3与lightbox显示实时加载图片的进度情况(2)

时间:2013-07-17 09:12CuPlayer.com
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,

design.js源代码

  1. if(typeof(Showbo)=="undefined")Showbo={}; 
  2. Showbo.Design={ 
  3.     lightBox:null, 
  4.     dvPopDesign:null, 
  5.     tool:null, 
  6.     dvpic:null, 
  7.     loading:null, 
  8.     dvpro:null, 
  9.     dvinfo:null, 
  10.     newA:null, 
  11.     step:100, 
  12.     min:300, 
  13.     pos:{x:0,y:0,ex:0,ey:0,drag:false}, 
  14.     /*Flash中调用的js函数*/ 
  15.     Start:function(){ 
  16.       this.dvpro.style.width="1%"; 
  17.       this.dvinfo.innerHTML="准备下载，请等待..."; 
  18.     }, 
  19.     Loading:function(p,loaded,total){ 
  20.       this.dvpro.style.width=p+"%"; 
  21.       this.dvinfo.innerHTML="已下载："+Showbo.round(loaded/1024,1)+"kb，总共"+Showbo.round(total/1024,1)+"kb，完成"+p+'%'; 
  22.     }, 
  23.     Success:function(picurl,w,h){//bmp不能取到w和h参数，汗。。。 
  24.       this.loading.style.display='none'; 
  25.       if(w>100){this.w=w;this.h=h;} 
  26.       thisthis.dvpic.parentNode.style.display=this.tool.style.display='block'; 
  27.       this.dvpic.src=picurl; 
  28.       this.newA.href=picurl; 
  29.       var me=this; 
  30.       setTimeout(function(){me.Org();},100); 
  31.     }, 
  32.     Failure:function(msg){ 
  33.       //RLNotFound：找不到文件或者服务器关闭----当服务器关闭或找不到文件时 
  34.       //LoadNeverCompleted：当下载由于服务器超载、服务器崩溃等原因中断时。 
  35.       this.dvinfo.innerHTML='<font color="red">'+msg+'</font>　<a href="javascript:Showbo.Design.hide();">关闭</a>'; 
  36.     }, 
  37.     //js调用flash中的方法，默认名为forJS 
  38.     JScallSWF:function(picurl){ 
  39.        if(window["swfId"]&&window["swfId"].forJS)window["swfId"].forJS(picurl,'Showbo.Design.Loading','Showbo.Design.Success','Showbo.Design.Failure');//ie 
  40.        else if(Showbo.$("swfId").forJS)Showbo.$("swfId").forJS(picurl,'Showbo.Design.Loading','Showbo.Design.Success','Showbo.Design.Failure'); 
  41.        else if(document["swfId"]&&document["swfId"].forJS)document["swfId"].forJS(picurl,'Showbo.Design.Loading','Showbo.Design.Success','Showbo.Design.Failure');//ff 
  42.     }, 
  43.     Org:function(){ 
  44.       this.dvpic.style.cssText="";//移除所有样式，不要使用removeAttribu("style"),在ie6下速度奇慢 
  45.       thisthis.dvPopDesign.style.height=this.dvPopDesign.style.width='auto'; 
  46.       this.onResize(); 
  47.     }, 
  48.     Drag:function(e){ 
  49.       Showbo.Design.cancelEvent(e); 
  50.       ee=e||event; 
  51.       if((Showbo.IsIE&&e.button!=1)||(!Showbo.IsIE&&e.button!=0))return false; 
  52.       if(e.type.indexOf('mousedown')!=-1){ 
  53.         if(Showbo.IsIE)this.setCapture(); 
  54.         Showbo.Design.pos.x=parseInt(Showbo.Design.dvPopDesign.style.left,10); 
  55.         Showbo.Design.pos.y=parseInt(Showbo.Design.dvPopDesign.style.top,10); 
  56.         Showbo.Design.pos.ex=e.clientX; 
  57.         Showbo.Design.pos.ey=e.clientY; 
  58.         Showbo.Design.pos.drag=true; 
  59.       } 
  60.       else if(e.type.indexOf('mousemove')!=-1){ 
  61.         if(Showbo.Design.pos.drag){ 
  62.           ShowboShowbo.Design.dvPopDesign.style.left=Showbo.Design.pos.x+e.clientX-Showbo.Design.pos.ex+'px'; 
  63.           ShowboShowbo.Design.dvPopDesign.style.top=Showbo.Design.pos.y+e.clientY-Showbo.Design.pos.ey+'px';           
  64.         } 
  65.       } 
  66.       else if(e.type.indexOf('mouseup')!=-1){ 
  67.        if(Showbo.IsIE)this.releaseCapture(); 
  68.         Showbo.Design.onResize(); 
  69.         Showbo.Design.pos.drag=false; 
  70.       } 
  71.     }, 
  72.     mouseWheel:function(e){ 
  73.       Showbo.Design.cancelEvent(e); 
  74.       ee=e||event; 
  75.       var w=this.offsetWidth,h=this.offsetHeight,refH=Showbo.Design.step*h/w; 
  76.       if((Showbo.IsIE&&e.wheelDelta<0)||(!Showbo.IsIE&&e.detail>0)){//往下扩大 
  77.        // if(this.offsetWidth<Showbo.Design.w){ 
  78.            this.style.width=w+Showbo.Design.step+'px'; 
  79.            this.style.height=h+refH+'px'; 
  80.            Showbo.Design.dvPopDesign.style.width=this.offsetWidth+'px'; 
  81.        // } 
  82.       }else{//缩小 
  83.          if(w-Showbo.Design.step>=Showbo.Design.min){ 
  84.            this.style.width=w-Showbo.Design.step+'px'; 
  85.            this.style.height=h-refH+'px'; 
  86.            Showbo.Design.dvPopDesign.style.width=this.offsetWidth+'px'; 
  87.          } 
  88.       } 
  89.      Showbo.Design.onResize(); 
  90.     }, 
  91.     documentMouseWheel:function(e,IsTimer){ 
  92.        var me=Showbo.Design,ds=me.dvPopDesign; 
  93.        if(!IsTimer)setTimeout(function(){me.documentMouseWheel(null,true)},100); 
  94.        else if(ds.offsetHeight<Showbo.BodyScale.y)ds.style.top=document.documentElement.scrollTop+(Showbo.BodyScale.y-ds.offsetHeight)/2+'px'; 
  95.     }, 
  96.     InitDesign:function(){//需要收到调用此方法，要不ie下使用append增加的flash不能调用其方法，奇怪。。。 
  97.       var html='<p id="designTools"><a href="#" title="在新窗口中打开" target="_blank"></a><a class="just"  href="javascript:Showbo.Design.Org()" title="实际大小"></a>' 
  98.         +'<a class="close" title="关闭" href="javascript:Showbo.Design.hide()"></a><span>鼠标滚动缩放图片，按下左键拖动</span></p>' 
  99.         +'<div class="pic"><img  id="designPic"/></div>'+ 
  100.         '<div class="loading" id="designLoading"><div class="pro" id="designPro"></div><div id="designInfo"></div></div>'; 
  101.       document.write('<div class="popdesign" id="dvPopDesign">'+html+'</div>'); 
  102.       this.dvPopDesign=Showbo.$('dvPopDesign'); 
  103.       document.write('<div id="ShowBolightBox"></div>'); 
  104.       this.lightBox=Showbo.$('ShowBolightBox'); 
  105.       this.tool=Showbo.$('designTools'); 
  106.       this.newA=Showbo.$s(this.tool,'a')[0]; 
  107.       this.dvpic=Showbo.$('designPic'); 
  108.       thisthis.dvpic.onmousedown=this.dvpic.onmousemove=this.dvpic.onmouseup=this.Drag; 
  109.       if(Showbo.IsIE)thisthis.dvpic.onmousewheel=this.mouseWheel; 
  110.       else this.dvpic.addEventListener('DOMMouseScroll',this.mouseWheel,false); 
  111.       this.loading=Showbo.$('designLoading'); 
  112.       this.dvpro=Showbo.$('designPro'); 
  113.       this.dvinfo=Showbo.$('designInfo'); 
  114.       document.write('<div class="myloadswf">'); 
  115.       document.write(Showbo.IsIE?'<object id=swfId classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000><param name="src" value="/images/loadSwf.swf"></object>': 
  116.                     '<embed id="swfId" type="application/x-shockwave-flash" src="/images/loadSwf.swf"/>'); 
  117.       document.write('</div>'); 
  118.     }, 
  119.     checkDOMLast:function(){//此方法非常关键，要不无法显示弹出窗口。两个对象dvPopDesign和lightBox必须处在body的最后两个节点内 
  120.       if(document.body.lastChild!=this.lightBox){ 
  121.         document.body.appendChild(this.dvPopDesign); 
  122.         document.body.appendChild(this.lightBox); 
  123.       } 
  124.     }, 
  125.     hideSelects:function(vis){ 
  126.       var sels=Showbo.$s('select'); 
  127.       for(var i=0;i<sels.length;i++)sels[i].style.visibility=vis; 
  128.     }, 
  129.     show:function(picurl,e){ 
  130.       this.checkDOMLast();//检查是否在最后      
  131.       thisthis.lightBox.style.display=this.dvPopDesign.style.display='block'; 
  132.       thisthis.dvpic.parentNode.style.display=this.tool.style.display='none'; 
  133.       this.dvpic.src=''; 
  134.       this.loading.style.display='block'; 
  135.       thisthis.dvPopDesign.style.height=this.dvPopDesign.style.width='auto'; 
  136.       this.onResize(); 
  137.       this.JScallSWF(picurl); 
  138.       this.Start(); 
  139.       this.cancelEvent(); 
  140.       var me=this; 
  141.       //添加事件 
  142.       if(Showbo.IsIE)document.documentElement.onmousewheel=this.documentMouseWheel; 
  143.       else document.documentElement.addEventListener('DOMMouseScroll',this.documentMouseWheel,false); 
  144.       this.hideSelects('hidden'); 
  145.     }, 
  146.     cancelEvent:function(e){ 
  147.       if(e){ 
  148.         e.stopPropagation(); 
  149.         e.preventDefault();         
  150.       } 
  151.       else if(window.event){ 
  152.        window.event.returnValue=false;window.event.cancelBubble=true; 
  153.       } 
  154.     }, 
  155.     hide:function(){ 
  156.       if(!this.dvPopDesign)return false; 
  157.       //移除事件 
  158.       if(Showbo.IsIE)document.documentElement.onmousewheel=null; 
  159.       else document.documentElement.removeEventListener('DOMMouseScroll',this.documentMouseWheel,false); 
  160.       this.dvPopDesign.style.display='none'; 
  161.       this.lightBox.style.display='none'; 
  162.       this.hideSelects('visible'); 
  163.     }, 
  164.     onResize:function(){ 
  165.        Showbo.initBodyScale();  
  166.        var ds=Showbo.Design.dvPopDesign,lbox=Showbo.Design.lightBox,oL,oH,scrollTop=document.documentElement.scrollTop; 
  167.        oL=ds.offsetWidth;oH=ds.offsetHeight; 
  168.        if(!Showbo.Design.pos.drag){ 
  169.         ds.style.left=oL>Showbo.BodyScale.otx?0:Math.floor((Showbo.BodyScale.x-ds.offsetWidth)/2)+'px'; 
  170.         ds.style.top=scrollTop+(oH>Showbo.BodyScale.oty?0:Math.floor((Showbo.BodyScale.y-ds.offsetHeight)/2))+'px'; 
  171.        }else{ 
  172.          oL+=(ds.style.left?parseInt(ds.style.left):0); 
  173.          oH+=(ds.style.top?parseInt(ds.style.top):0); 
  174.        } 
  175.        Showbo.Design.lightBox.style.width=(oL<Showbo.BodyScale.otx?Showbo.BodyScale.otx:oL)+'px'; 
  176.        Showbo.Design.lightBox.style.height=(oH<Showbo.BodyScale.oty?Showbo.BodyScale.oty:oH)+'px';    
  177.     } 
  178. } 

widget.css样式表

  1. #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;} 
  2. .popdesign{position:absolute;color:#999999;padding:5px 10px 10px 10px;z-index:999;background:#ffffff;font-size:12px;display:none;} 
  3. .popdesign p{margin:0px;padding:0px;display:none;} 
  4. .popdesign p a{float:left;background:transparent url(../images/imgzoom.gif) no-repeat 0px 0px;width:17px;height:17px;margin:5px;} 
  5. .popdesign p a:hover{background-position:0px -39px;} 
  6. .popdesign p a.just{background-position:-40px -0px;} 
  7. .popdesign p a.just:hover{background-position:-40px -39px;} 
  8. .popdesign p a.close{background-position:-80px -0px;} 
  9. .popdesign p a.close:hover{background-position:-80px -39px;} 
  10. .popdesign p span{float:left;margin:8px auto auto 20px;} 
  11. .popdesign div.pic{clear:both;display:none;} 
  12. .popdesign div.pic img{cursor:move;} 
  13. .popdesign div.loading{margin:40px;width:300px;display:block;} 
  14. .popdesign div.loading .pro{height:10px;width:1%;background:#ff0000;line-height:10px;overflow:hidden;} 
  15. .myloadswf{position:absolute;left:200px;top:1px;height:1px;width:1px;overflow:hidden;line-height:1px;z-index:-2;} 
  16. .myloadswf object,.myloadswf embed{width:1px;height:1px;} 

测试页面index.html

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
  5. <title>编程设计网--设计作品title> 
  6. <meta id="metaKey" name="Keywords" content="平面设计，网页设计，的士广告，单页宣传，户外广告" /> 
  7. <meta id="metaDes" name="Description" content="平面设计，网页设计，平面设计，网页设计，的士广告，单页宣传，户外广告" /> 
  8. <link href="css/widget.css" type="text/css" rel="Stylesheet" /> 
  9. <script type="text/javascript" src="js/design.js"></script> 
  10. </head> 
  11. <body> 
  12. <img title="点击查看大图" src="1_s.gif" onclick="Showbo.Design.show('1.gif')" /><br > 
  13. <img title="点击查看大图" src="2_s.jpg" onclick="Showbo.Design.show('2.jpg')" /><br ><br > 
  14. <br ><br ><br > 这张图片特意传递错误的地址，测试错误回调函数<br > 
  15. <img title="点击查看大图" src="1_s.gif" onclick="Showbo.Design.show('错误的图片地址.gif',event)" /><br > 
  16. <script type="text/javascript">Showbo.Design.InitDesign();//这里需要手动调用初始化函数，要不在ie6下不能调用flash中的方法，郁闷ing....</script> 
  17. </body> 
  18. </html> 
  19. <script type="text/javascript"> 
  20. Showbo.initBodyScale(true); 
  21. </script>  

 

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器