今天給我的轉換服務器更新openoffice版本的時候·也順便搜索了下jodconverter的版本·在官網上目前還是 2.2.2 版本·但是在 google 的時候發現了 code 上 有 3.0的版本·就立刻下載下來在虛擬機器上做測試,測試后發現 3.0版本 的 jodconverter 做的很不錯·支持了服務器多進程,也就說明可以多線程轉換了,避免了轉換排隊現象。

          1.下載安裝 openoffice 3.2,我的環境是ubuntu所以下載的是deb包,如果你是centos請下載rpm包。

          ppt2pdf $> wget http://download.services.openoffice.org/files/localized/zh-CN/3.2.1/OOo_3.2.1_Linux_x86_install-deb_zh-CN.tar.gz ppt2pdf $> tar zxvf OOo_3.2.1_Linux_x86_install-deb_zh-CN.tar.gz ppt2pdf $> cd OOO320_m18_native_packed-1_zh-CN.9502 ppt2pdf $> cd DEBS ppt2pdf $> dpkg -i *.deb

          2.然后下載中文字庫防止亂碼

          ppt2pdf $> apt-get install language-pack-zh language-support-fonts-zh

          3.下載jodconverter-core-3.0-beta-3-dist.zip(此步驟可濾過次步驟只是測試轉換是否成功)

          ppt2pdf $> wget http://jodconverter.googlecode.com/files/jodconverter-core-3.0-beta-3-dist.zip ppt2pdf $> unzip jodconverter-core-3.0-beta-3-dist.zip #然后用winscp 上傳一個 ppt上來轉換· ppt2pdf $> ls daodan.ppt   jodconverter-core-3.0-beta-3 ppt2pdf $> java -jar jodconverter-core-3.0-SNAPSHOT/lib/jodconverter-core-3.0-SNAPSHOT.jar daodan.ppt 1.pdf Dec 29, 2010 4:39:29 PM org.artofsolving.jodconverter.office.ProcessPoolOfficeManager  INFO: ProcessManager implementation is UnixProcessManager Dec 29, 2010 4:39:29 PM org.artofsolving.jodconverter.office.OfficeProcess start INFO: starting process with acceptString 'socket,host=127.0.0.1,port=2002,tcpNoDelay=1' and profileDir '/tmp/.jodconverter_socket_host-127.0.0.1_port-2002' Dec 29, 2010 4:39:30 PM org.artofsolving.jodconverter.office.OfficeProcess start INFO: started process; pid = 7108 Dec 29, 2010 4:39:30 PM org.artofsolving.jodconverter.office.OfficeConnection connect INFO: connected: 'socket,host=127.0.0.1,port=2002,tcpNoDelay=1' Dec 29, 2010 4:39:45 PM org.artofsolving.jodconverter.office.ProcessPoolOfficeManager stop INFO: stopping Dec 29, 2010 4:39:45 PM org.artofsolving.jodconverter.office.OfficeConnection$1 disposing INFO: disconnected: 'socket,host=127.0.0.1,port=2002,tcpNoDelay=1' Dec 29, 2010 4:39:45 PM org.artofsolving.jodconverter.office.ManagedOfficeProcess doEnsureProcessExited INFO: process exited with code 0 Dec 29, 2010 4:39:45 PM org.artofsolving.jodconverter.office.ProcessPoolOfficeManager stop INFO: stopped ppt2pdf $> ls 1.pdf  daodan.ppt   jodconverter-core-3.0-beta-3 

          #可以用winscp 下載下來查看。
          4.下載 jodconverter-tomcat-2.2.2.zip 和 jodconverter-sample-webapp

          ppt2pdf $> wget 'http://downloads.sourceforge.net/project/jodconverter/JODConverter/2.2.2/jodconverter-tomcat-2.2.2.zip?r=http%3A%2F%2Fsourceforge.net%2Fprojects%2Fjodconverter%2Ffiles%2FJODConverter%2F2.2.2%2F&ts=1293612042&use_mirror=nchc'  ppt2pdf $> svn checkout http://jodconverter.googlecode.com/svn/trunk/jodconverter-sample-webapp jodconverter-sample-webapp  解壓 jodconverter-tomcat-2.2.2.zip ppt2pdf $> unzip jodconverter-tomcat-2.2.2.zip #刪除 2.2.2版本里的web應用程序 ppt2pdf $> rm jodconverter-tomcat-2.2.2/webapps/converter/* -rf  #編譯jodconverter-sample-webapp ppt2pdf $> cd jodconverter-sample-webapp/ ppt2pdf $> mvn package #復制編譯出來的 web應用程序進 jodconverter-tomcat-2.2.2 ppt2pdf $> cd target/jodconverter-sample-webapp-3.0-SNAPSHOT ppt2pdf $> cp WEB-INF  documentFormats.js  index.jsp ../jodconverter-tomcat-2.2.2/webapps/converter/ -R

          5.啟動服務

          ppt2pdf $> cd jodconverter-tomcat-2.2.2 ppt2pdf $> bin/startup.sh Using CATALINA_BASE:   /root/jodconverter-tomcat-2.2.2 Using CATALINA_HOME:   /root/jodconverter-tomcat-2.2.2 Using CATALINA_TMPDIR: /root/jodconverter-tomcat-2.2.2/temp Using JRE_HOME:       /usr

          6.安裝 apache php php-pear
          #我就用懶人模式安裝了·apt-get

          ppt2pdf $> apt-get install apache2 php5 php-pear

          # 安裝 pear 的 Net_URL2

          ppt2pdf $> pear install Net_URL2-0.3.1 # 下載安裝 HTTP_Request2 ppt2pdf $> wget http://download.pear.php.net/package/HTTP_Request2-0.5.2.tgz ppt2pdf $> tar zxvf HTTP_Request2-0.5.2.tgz ppt2pdf $> cd HTTP_Request2-0.5.2 ppt2pdf $> cp Request2.php /usr/share/php/HTTP/ ppt2pdf $> cp Request2 /usr/share/php/HTTP/ -R

          7.創建一個convert.php轉換 ppt2pdf 的例子
          #打開瀏覽查看交互頁面

          #下面我們創建無交互php程序。

          ppt2pdf $> cd /var/www ppt2pdf $> vim convert.php
          < ?php require_once 'HTTP/Request2.php';  class DocumentConverterClient {      var $url = 'http://localhost:8080/converter/converted/document.pdf';      function convert($inputFile, $outputType) {         $request = new HTTP_Request2($this->url);         $request->setMethod(HTTP_Request2::METHOD_POST)             ->setHeader('Content-Type', 'multipart/form-data')             ->addPostParameter('outputFormat', $outputType)             ->setBody($inputData);         $request->addUpload('inputDocument', $inputFile);          return $request->send()->getBody();     } }  $documentConverter = new DocumentConverterClient();  $inputFile = 'daodan.ppt';               # 要轉換的 ppt|doc|pptx|docx $outputFile = 'daodan.pdf';             # 轉出來的 pdf $outputType = 'pdf';  $outputData = $documentConverter->convert($inputFile, $outputType); file_put_contents($outputFile, $outputData); ?>

          #把傳進來的ppt 復制到 www 目錄下,給 www 賦予 apache 可寫權限

          ppt2pdf $> cp ../daodan.ppt /var/www/ ppt2pdf $> chown www-data /var/www

          8.打開瀏覽器測試。

          #使用 winscp 下載 轉好的 pdf 本地查看

          PS:他的多線程,我還未測試,我是從編譯的時候,發現可以多線程的,再我測試后,會發布。

          轉載請注明:文章轉載自:Eric's linux and nginx! (http://www.nginxs.com)
          本文地址:http://www.nginxs.com/linux/393.html

          posted @ 2012-02-11 20:47 小馬歌 閱讀(2696) | 評論 (0)編輯 收藏
           

          1.首先下載FlexPaper的源碼。下載地址

          2.本人不懂flash,只是百度下,然后自己瞎弄弄的。我用的flash build 4.5

          提供個key:1499-4181-9296-6452-2998-3656

          首先在flash build中新建一個flex項目,第一步填寫項目名稱-flexpaper,第二步直接默認,最后一步需要注意下。

          選擇合并到代碼中,要不然你的bin-debug目錄下面會出現很多其他的swf文件

          然后把你1步下載下來的源碼解壓。

          把這三個目錄全部復制到你剛才建立的flex項目根目錄下。最后結果是這樣的:

          這時候打開src目錄下面默認包下的flexpaper.mxml文件,加入如下代碼,里面paper.swf是從pdf轉換過來的,不懂的就看看我說flexpaper的文章。

          <?xml version="1.0" encoding="utf-8"?> 
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
          layout="absolute"
          width="100%" height="100%"
          xmlns:flexpaper="com.devaldi.controls.flexpaper.*">



          <!--Scale為瀏覽文檔的放大比率-->
          <flexpaper:FlexPaperViewer width="100%" height="100%"
          Scale="1.0" SwfFile="Paper.swf" />

          </mx:Application>

          然后點擊項目的屬性,將附加的編譯參數修改成如下所示,-source-path=locale/{locale}

           

          我記得這些全部完成以后,好像有個文件一處會有錯誤,如果出錯文件前面會有個紅×,找到它,然后把那句話去掉,就是一個屬性設置。沒什么影響。

          然后就可以run了。

          修改:

          1.右上角有一個FP,點擊以后出現about

          找到如下所示的文件:


          打開,搜索bttnInfo,一共就三句,全部注釋掉。然后在run,就會發現右上角的FP沒了。(print也是在這個文件里面修改的,大家自己看看吧)

          2.修改右下角的logo,如下

          找到如下文件,打開,找到sizeChanged這個函數。把里面的兩句話都注釋掉就OK了。(雖然不懂,但是這些看看也都能知道個大概)

          好了。修改完畢。至于其他的修改,大家可以自己看看源文件。反正功能老外都幫我們現實了,我們只要修修改改而已。

          補充一點,如果想用,入下圖:

          找到項目bin-debug下面的flexpaper.swf。(其他的swf就是我之前沒有合并到代碼中的那些swf,如果沒有合并的需要把這些swf文件全部一起拷貝)

          放在你下載回來的例子中,替換如下:

          把剛才的文件改成這個名字就OK了。然后在運行就會發現可以了。

           

          上面的方法似乎是把flash已經寫死了,下面的這種方法編譯出來的swf應該是可以動態加載flash的。(從網上找到的)

          <?xml version="1.0" encoding="utf-8"?>  
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
          xmlns:fp="com.devaldi.controls.flexpaper.*"
          layout="absolute" width="100%" height="100%"
          applicationComplete="initApp();">

          <mx:Script>
          <![CDATA[
          import mx.controls.Alert;

          public var _aid = 0;//文檔ID

          [Bindable]
          public var _Scale:Number = 1;//縮放比例

          [Bindable]
          public var _SwfFile:String = "";//SWF文件路徑

          [Bindable]
          public var _ZoomTransition:String = "easeOut";

          [Bindable]
          public var _ZoomTime:Number = 0.6;

          [Bindable]
          public var _ZoomInterval:Number = 0.1;

          [Bindable]
          public var _FitPageOnLoad:Boolean = false;//加載后適合高度

          [Bindable]
          public var _FitWidthOnLoad:Boolean = false;//加載后適合寬度

          [Bindable]
          public var _PrintEnabled:Boolean = true;//是否支持打印

          [Bindable]
          public var _FullScreenAsMaxWindow:Boolean = false;//是否支付全屏

          [Bindable]
          public var _ProgressiveLoading:Boolean = false;//是否延遲加載

          [Bindable]
          public var _localeChain:String = "zh_CN";//語言

          private var isFocus:Boolean = false;

          //初始化參數
          private function initApp():void{
          var params:Object = Application.application.parameters;
          _Scale = getNumber(params, "Scale", 1);
          _SwfFile = getString(params, "SwfFile", "Paper.swf");
          _ZoomTransition = getString(params, "ZoomTransition", "easeOut");
          _ZoomTime = getNumber(params, "ZoomTime", 0.6);
          _ZoomInterval = getNumber(params, "ZoomInterval", 0.1);
          _FitPageOnLoad = getBoolean(params, "FitPageOnLoad", false);
          _FitWidthOnLoad = getBoolean(params, "FitWidthOnLoad", false);
          _PrintEnabled = getBoolean(params, "PrintEnabled", true);
          _FullScreenAsMaxWindow = getBoolean(params, "FullScreenAsMaxWindow", false);
          _ProgressiveLoading = getBoolean(params, "ProgressiveLoading", true);
          _localeChain = params["localeChain"];

          //注冊事件監聽
          this.addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
          this.addEventListener(MouseEvent.MOUSE_OUT, onMouseOut);

          //開放給外部(javascript)調用
          ExternalInterface.addCallback("hasFocus", hasFocus);
          //ExternalInterface.addCallback("focus", focus);
          ExternalInterface.addCallback("setViewerFocus", setViewerFocus);
          }



          private function onMouseOver(event:MouseEvent):void{
          this.isFocus = true;
          }

          private function onMouseOut(event:MouseEvent):void{
          this.isFocus = false;
          }

          public function hasFocus():Boolean{
          //Alert.show("hasFocus");
          return isFocus;
          }

          public function setViewerFocus(isFocus:Boolean):void{
          //Alert.show("setViewerFocus");
          this.paperViewer.setViewerFocus();
          }

          /**
          *
          * 獲取String類型參數
          * 如果沒有,則返回默認值
          *
          */
          private function getString(params:Object, name:String, def:String):String{
          if(params[name] != null){
          return params[name];
          }
          return def;
          }

          private function getNumber(params:Object, name:String, def:Number):Number{
          if(params[name] != null){
          return params[name];
          }
          return def;
          }

          private function getBoolean(params:Object, name:String, def:Boolean):Boolean{
          //Alert.show("比較:"+name);
          if(params[name] != null){
          return params[name] == "true";
          }
          return def;
          }
          ]]>
          </mx:Script>
          <!--mx:Panel x="165" y="76" width="250" height="200" layout="absolute" title="一個人">
          <mx:Label x="59" y="37" text="{Scale}" width="88"/>
          </mx:Panel-->

          <fp:FlexPaperViewer id="paperViewer"
          width="100%"
          height="100%"
          Scale="{_Scale}"
          SwfFile="{_SwfFile}"
          ZoomTransition="{_ZoomTransition}"
          ZoomTime="{_ZoomTime}"
          ZoomInterval="{_ZoomInterval}"
          FitPageOnLoad="{_FitPageOnLoad}"
          FitWidthOnLoad="{_FitWidthOnLoad}"
          PrintEnabled="{_PrintEnabled}"
          FullScreenAsMaxWindow="{_FullScreenAsMaxWindow}"
          ProgressiveLoading="{_ProgressiveLoading}" />
          </mx:Application>


          但是按照上述方法試了下,就無法調用官方提供的API接口了。原因是上述的程序并沒有提供接口(接口在FlexPaperViewer_Base.mxml)這個文件中

          只需要加入如下的語句,就可以調用gotoPage接口了

          public function gotoPage(p:Number):void{
          paperViewer.gotoPage(p);
          }

          別忘了增加一句監聽,給js調用

          ExternalInterface.addCallback("gotoPage", gotoPage);
          到此OK。編譯出來的可以加載API了。
          posted @ 2012-02-11 12:10 小馬歌 閱讀(1800) | 評論 (0)編輯 收藏
           

          導語:前年圣誕節上,西班牙程序員Roman Cortes帶來了用純javascript腳本編寫的神奇3D圣誕樹,令人印象深刻。2月14日情人節就要來臨了,還是Roman Cortes,這次他又帶來了用javascript腳本編寫的紅色玫瑰花。用代碼做出的玫瑰花,這才是牛逼程序員送給女友的最好情人節禮物呢!(提示:在不同瀏覽器下觀看效果、速度會有很大的不同)








          圖片是由代碼生成,用戶可以刷新該頁面,重復觀看這朵玫瑰的呈現過程。

          3D玫瑰花的實現代碼如下:

          with(m=Math)C=cos,S=sin,P=pow,R=random;c.width=c.height=f=500;h=-250;function p(a,b,c){if(c>60)return[S(a*7)*(13+5/(.2+P(b*4,4)))-S(b)*50,b*f+50,625+C(a*7)*(13+5/(.2+P(b*4,4)))+b*400,a*1-b/2,a];A=a*2-1;B=b*2-1;if(A*A+B*B<1){if(c>37){n=(j=c&1)?6:4;o=.5/(a+.01)+C(b*125)*3-a*300;w=b*h;return[o*C(n)+w*S(n)+j*610-390,o*S(n)-w*C(n)+550-j*350,1180+C(B+A)*99-j*300,.4-a*.1+P(1-B*B,-h*6)*.15-a*b*.4+C(a+b)/5+P(C((o*(a+1)+(B>0?w:-w))/25),30)*.1*(1-B*B),o/1e3+.7-o*w*3e-6]}if(c>32){c=c*1.16-.15;o=a*45-20;w=b*b*h;z=o*S(c)+w*C(c)+620;return[o*C(c)-w*S(c),28+C(B*.5)*99-b*b*b*60-z/2-h,z,(b*b*.3+P((1-(A*A)),7)*.15+.3)*b,b*.7]}o=A*(2-b)*(80-c*2);w=99-C(A)*120-C(b)*(-h-c*4.9)+C(P(1-b,7))*50+c*2;z=o*S(c)+w*C(c)+700;return[o*C(c)-w*S(c),B*99-C(P(b, 7))*50-c/3-z/1.35+450,z,(1-b/1.2)*.9+a*.1, P((1-b),20)/4+.05]}}setInterval('for(i=0;i<1e4;i++)if(s=p(R(),R(),i%46/.74)){z=s[2];x=~~(s[0]*f/z-h);y=~~(s[1]*f/z-h);if(!m[q=y*f+x]|m[q]>z)m[q]=z,a.fillStyle="rgb("+~(s[3]*h)+","+~(s[4]*h)+","+~(s[3]*s[3]*-80)+")",a.fillRect(x,y,1,1)}',0)

          當然,感興趣的人可以了解下面的實現過程與相關理論:

          這朵三維代碼玫瑰的呈現效果采用了蒙特卡羅方法,創造者對蒙特卡羅方法非常推崇,他表示在功能優化和采樣方面,蒙特卡羅方法是“令人難以置信的強大工具”。關于蒙特卡羅方法可以參考:Monte Carlo method 。

          具體操作:

          外觀采樣呈現效果繪制

          我用了多個不同的形狀圖來組成這朵代碼玫瑰。共使用了31個形狀:24個花瓣,4個萼片,2個葉子和1根花莖,其中每一個形狀圖都用代碼進行描繪。

          首先,來定義一個采樣范圍:

          function surface(a, b) { // I'm using a and b as parameters ranging from 0 to 1.

          return {

          x: a*50,

          y: b*50

          };

          // this surface will be a square of 50x50 units of size

          }

          然后,編寫形狀描繪代碼:

          var canvas = document.body.appendChild(document.createElement("canvas")),

          context = canvas.getContext("2d"),

          a, b, position;

          // Now I'm going to sample the surface at .1 intervals for a and b parameters:

          for (a = 0; a < 1; a += .1) {

          for (b = 0; b < 1; b += .1) {

          position = surface(a, b);

          context.fillRect(position.x, position.y, 1, 1);

          }

          }

          這時,看到的效果是這樣的:

          現在,嘗試一下更密集的采樣間隔:

          正如現在所看到的,因為采樣間隔越來越密集,點越來越接近,到最高密度時,相鄰點之間的距離小于一個像素,肉眼就看不到間隔(見0.01)。為了不造成太大的視覺差,再進一步縮小采樣間隔,此時,繪制區已經填滿(比較結果為0.01和0.001)。

          接下來,我用這個公式來繪制一個圓形:(X-X0)^ 2 +(Y-Y0)^ 2 <半徑^ 2,其中(X0,Y0)為圓心:

          function surface(a, b) {

          var x = a * 100,

          y = b * 100,

          radius = 50,

          x0 = 50,

          y0 = 50;

          if ((x - x0) * (x - x0) + (y - y0) * (y - y0) < radius * radius) {

          // inside the circle

          return {

          x: x,

          y: y

          };

          } else {

          // outside the circle

          return null;

          }

          }

          為了防止溢出,還要加上一個采樣條件:

          if (position = surface(a, b)) {

          context.fillRect(position.x, position.y, 1, 1);

          }

          結果如下:

          有不同的方法來定義一個圓,其中一些并不需要拒絕采樣。我并無一定要使用哪一種來定義圓圈的意思,所以下面用另一種方法來定義一個圓:

          function surface(a, b) {

          // Circle using polar coordinates

          var angle = a * Math.PI * 2,

          radius = 50,

          x0 = 50,

          y0 = 50;

          return {

          x: Math.cos(angle) * radius * b + x0,

          y: Math.sin(angle) * radius * b + y0

          };

          }

          如圖:

          (此方法相比前一個方法需要密集采樣以進行填充。)

          好了,現在讓圓變形,以使它看起來更像是一個花瓣:

          function surface(a, b) {

          var x = a * 100,

          y = b * 100,

          radius = 50,

          x0 = 50,

          y0 = 50;

          if ((x - x0) * (x - x0) + (y - y0) * (y - y0) < radius * radius) {

          return {

          x: x,

          y: y * (1 + b) / 2 // deformation

          };

          } else {

          return null;

          }

          }

          結果:

          這看起來已經很像一個玫瑰花瓣的形狀了。在這里也可以試試通過修改一些函數數值,將會出現很多有趣的形狀。

          接下來應該給它添加色彩了:

          function surface(a, b) {

          var x = a * 100,

          y = b * 100,

          radius = 50,

          x0 = 50,

          y0 = 50;

          if ((x - x0) * (x - x0) + (y - y0) * (y - y0) < radius * radius) {

          return {

          x: x,

          y: y * (1 + b) / 2,

          r: 100 + Math.floor((1 - b) * 155), // this will add a gradient

          g: 50,

          b: 50

          };

          } else {

          return null;

          }

          }

          for (a = 0; a < 1; a += .01) {

          for (b = 0; b < 1; b += .001) {

          if (point = surface(a, b)) {

          context.fillStyle = "rgb(" + point.r + "," + point.g + "," + point.b + ")";

          context.fillRect(point.x, point.y, 1, 1);

          }

          }

          }

          結果:

          一片帶色的花瓣就出現了。

          3D曲面和透視投影

          定義三維表面很簡單,比如,來定義一個管狀物體:

          function surface(a, b) {

          var angle = a * Math.PI * 2,

          radius = 100,

          length = 400;

          return {

          x: Math.cos(angle) * radius,

          y: Math.sin(angle) * radius,

          z: b * length - length / 2, // by subtracting length/2 I have centered the tube at (0, 0, 0)

          r: 0,

          g: Math.floor(b * 255),

          b: 0

          };

          }

          接著添加投影透視圖,首先需要我們定義一個攝像頭:

          如上圖,將攝像頭放置在(0,0,Z)位置,畫布在X / Y平面。投影到畫布上的采樣點為:

          var pX, pY, // projected on canvas x and y coordinates

          perspective = 350,

          halfHeight = canvas.height / 2,

          halfWidth = canvas.width / 2,

          cameraZ = -700;

          for (a = 0; a < 1; a += .001) {

          for (b = 0; b < 1; b += .01) {

          if (point = surface(a, b)) {

          pX = (point.x * perspective) / (point.z - cameraZ) + halfWidth;

          pY = (point.y * perspective) / (point.z - cameraZ) + halfHeight;

          context.fillStyle = "rgb(" + point.r + "," + point.g + "," + point.b + ")";

          context.fillRect(pX, pY, 1, 1);

          }

          }

          }

          效果為:

          z-buffer

          z-buffer在計算機圖形學中是一個相當普遍的技術,在為物件進行著色時,執行“隱藏面消除”工作,使隱藏物件背后的部分就不會被顯示出來。

          上圖是用z-buffer技術處理后的玫瑰。(可以看到已經具有立體感了)

          代碼如下:

          var zBuffer = [],

          zBufferIndex;

          for (a = 0; a < 1; a += .001) {

          for (b = 0; b < 1; b += .01) {

          if (point = surface(a, b)) {

          pX = Math.floor((point.x * perspective) / (point.z - cameraZ) + halfWidth);

          pY = Math.floor((point.y * perspective) / (point.z - cameraZ) + halfHeight);

          zBufferIndex = pY * canvas.width + pX;

          if ((typeof zBuffer[zBufferIndex] === "undefined") || (point.z < zBuffer[zBufferIndex])) {

          zBuffer[zBufferIndex] = point.z;

          context.fillStyle = "rgb(" + point.r + "," + point.g + "," + point.b + ")";

          context.fillRect(pX, pY, 1, 1);

          }

          }

          }

          }

          旋轉

          你可以使用任何矢量旋轉的方法。在代碼玫瑰的創建中,我使用的是歐拉旋轉。現在將之前編寫的管狀物進行旋轉,實現繞Y軸旋轉:

          function surface(a, b) {

          var angle = a * Math.PI * 2,

          radius = 100,

          length = 400,

          x = Math.cos(angle) * radius,

          y = Math.sin(angle) * radius,

          z = b * length - length / 2,

          yAxisRotationAngle = -.4, // in radians!

          rotatedX = x * Math.cos(yAxisRotationAngle) + z * Math.sin(yAxisRotationAngle),

          rotatedZ = x * -Math.sin(yAxisRotationAngle) + z * Math.cos(yAxisRotationAngle);

          return {

          x: rotatedX,

          y: y,

          z: rotatedZ,

          r: 0,

          g: Math.floor(b * 255),

          b: 0

          };

          }

          效果:

          蒙特卡羅方法

          關于采樣時間,間隔過大過小都會引起極差的視覺感受,所以,需要設置合理的采樣間隔,這里使用蒙特卡羅方法。

          var i;

          window.setInterval(function () {

          for (i = 0; i < 10000; i++) {

          if (point = surface(Math.random(), Math.random())) {

          pX = Math.floor((point.x * perspective) / (point.z - cameraZ) + halfWidth);

          pY = Math.floor((point.y * perspective) / (point.z - cameraZ) + halfHeight);

          zBufferIndex = pY * canvas.width + pX;

          if ((typeof zBuffer[zBufferIndex] === "undefined") || (point.z < zBuffer[zBufferIndex])) {

          zBuffer[zBufferIndex] = point.z;

          context.fillStyle = "rgb(" + point.r + "," + point.g + "," + point.b + ")";

          context.fillRect(pX, pY, 1, 1);

          }

          }

          }

          }, 0);

          設置a和b為隨機參數,用足夠的采樣完成表面填充。我每次繪制10000點,然后靜待屏幕完成更新。

          另外需要注意的是,如果隨機數發生錯誤時,表面填充效果會出錯。有些瀏覽器中,Math.random的執行是線性的,這就有可能導致表面填充效果出錯。這時,就得使用類似Mersenne Twister(一種隨機數算法)這樣的東西去進行高質量的PRNG采樣,從而避免錯誤的發生。

          完成

          為了使玫瑰的每個部分在同一時間完成并呈現,還需要添加一個功能,為每部分設置一個參數以返回值來進行同步。并用一個分段函數代表玫瑰的各個部分。比如在花瓣部分,我用旋轉和變形來創建它們。

          雖然表面采樣方法是創建三維圖形非常著名的、最古老的方法之一,但這種把蒙特卡羅、z-buffer加入到表面采樣中的方法并不常見。對于現實生活場景的制作,這也許算不上很有創意,但它簡易的代碼實現和很小的體積仍令人滿意。

          希望這篇文章能激發計算機圖形學愛好者來嘗試不同的呈現方法,并從中獲得樂趣。(Roman Cortes)

          英文原址:romancortes.com 

          posted @ 2012-02-10 11:59 小馬歌 閱讀(381) | 評論 (0)編輯 收藏
           
               摘要: 最近嘗試將做的一個Android項目web化,而其中的一個方案,就是做成html5的。于是做了一些Demo,也做了一些簡單的研究。其中一個比較重要的問題,就是HTML5在Android和IOS的兼容性如何。找到下面的表格,很好的解答了我的問題。與看到這篇博文的好友一起分享。FeatureSafari on iOSAndroid BrowserBlackBerry BrowserNokia...  閱讀全文
          posted @ 2012-02-09 16:07 小馬歌 閱讀(1315) | 評論 (0)編輯 收藏
           

          無論是從技術角度還是開發視角,對于web前端開發規范文檔都有一定規范,本文就css3和html5的發展前景總結了一系列的web開發文檔,僅供大家參考。

          規范目的

          為提高團隊協作效率, 便于后臺人員添加功能及前端后期優化維護, 輸出高質量的文檔, 特制訂此文檔. 本規范文檔一經確認, 前端開發人員必須按本文檔規范進行前臺頁面開發. 本文檔如有不對或者不合適的地方請及時提出, 經討論決定后方可更改.

          基本準則

          符合web標準, 語義化html, 結構表現行為分離, 兼容性優良. 頁面性能方面, 代碼要求簡潔明了有序, 盡可能的減小服務器負載, 保證最快的解析速度.

          文件規范

          1. html, css, js, images文件均歸檔至<系統開發規范>約定的目錄中;

          2. html文件命名: 英文命名, 后綴.htm. 同時將對應界面稿放于同目錄中, 若界面稿命名為中文, 請重命名與html文件同名, 以方便后端添加功能時查找對應頁面;

          3. css文件命名: 英文命名, 后綴.css. 共用base.css, 首頁index.css, 其他頁面依實際模塊需求命名.;

          4. Js文件命名: 英文命名, 后綴.js. 共用common.js, 其他依實際模塊需求命名.

          html書寫規范

          1. 文檔類型聲明及編碼: 統一為html5聲明類型<!DOCTYPE html>; 編碼統一為<meta charset=”utf-8″ />, 書寫時利用IDE實現層次分明的縮進;

          2. 非特殊情況下樣式文件必須外鏈至<head>…</head>之間;非特殊情況下JavaScript文件必須外鏈至頁面底部;

          3. 引入樣式文件或JavaScript文件時, 須略去默認類型聲明, 寫法如下:

          <link rel=”stylesheet” href=”…” />

          <style>…</style>

          <script src=”…”></script>

          4. 引入JS庫文件, 文件名須包含庫名稱及版本號及是否為壓縮版, 比如jquery-1.4.1.min.js; 引入插件, 文件名格式為庫名稱+插件名稱, 比如jQuery.cookie.js;

          5. 所有編碼均遵循xhtml標準, 標簽 & 屬性 & 屬性命名 必須由小寫字母及下劃線數字組成, 且所有標簽必須閉合, 包括br (<br />), hr(<hr />)等; 屬性值必須用雙引號包括;

          6. 充分利用無兼容性問題的html自身標簽, 比如span, em, strong, optgroup, label,等等; 需要為html元素添加自定義屬性的時候, 首先要考慮下有沒有默認的已有的合適標簽去設置, 如果沒有, 可以使用須以”data-”為前綴來添加自定義屬性,避免使用”data:”等其他命名方式;

          7. 語義化html, 如 標題根據重要性用h*(同一頁面只能有一個h1), 段落標記用p, 列表用ul, 內聯元素中不可嵌套塊級元素;

          8. 盡可能減少div嵌套, 如<div class=”box”><div class=”welcome”>歡迎訪問XXX, 您的用戶名是<div class=”name”>用戶名</div></div></div>完全可以用以下代碼替代: <div class=”box”><p>歡迎訪問XXX, 您的用戶名是<span>用戶名</span></p></div>;

          9. 書寫鏈接地址時, 必須避免重定向,例如:href=”http://itaolun.com/”, 即須在URL地址后面加上“/”;

          10. 在頁面中盡量避免使用style屬性,即style=”…”;

          11. 必須為含有描述性表單元素(input, textarea)添加label, 如<p>姓名: <input type=”text” id=”name” name=”name” /></p>須寫成:<p><label for=”name”>姓名: </label><input type=”text” id=”name” /></p>

          12. 能以背景形式呈現的圖片, 盡量寫入css樣式中;

          13. 重要圖片必須加上alt屬性; 給重要的元素和截斷的元素加上title;

          14. 給區塊代碼及重要功能(比如循環)加上注釋, 方便后臺添加功能;

          15. 特殊符號使用: 盡可能使用代碼替代: 比如 <(<) & >(&gt;) & 空格( ) & ?(?) 等等;

          16. 書寫頁面過程中, 請考慮向后擴展性;

          17. class & id 參見 css書寫規范.

          css書寫規范

          1. 編碼統一為utf-8;

          2. 協作開發及分工: i會根據各個模塊, 同時根據頁面相似程序, 事先寫好大體框架文件, 分配給前端人員實現內部結構&表現&行為; 共用css文件base.css由i書寫, 協作開發過程中, 每個頁面請務必都要引入, 此文件包含reset及頭部底部樣式, 此文件不可隨意修改;

          3. class與id的使用: id是唯一的并是父級的, class是可以重復的并是子級的, 所以id僅使用在大的模塊上, class可用在重復使用率高及子級中; id原則上都是由我分發框架文件時命名的, 為JavaScript預留鉤子的除外;

          4. 為JavaScript預留鉤子的命名, 請以 js_ 起始, 比如: js_hide, js_show;

          5. class與id命名: 大的框架命名比如header/footer/wrapper/left/right之類的在2中由i統一命名.其他樣式名稱由 小寫英文 & 數字 & _ 來組合命名, 如i_comment, fontred, width200; 避免使用中文拼音, 盡量使用簡易的單詞組合; 總之, 命名要語義化, 簡明化.

          6. 規避class與id命名(此條重要, 若有不明白請及時與i溝通):

          a, 通過從屬寫法規避, 示例見d;

          b, 取父級元素id/class命名部分命名, 示例見d;

          c, 重復使用率高的命名, 請以自己代號加下劃線起始, 比如i_clear;

          d, a,b兩條, 適用于在2中已建好框架的頁面, 如, 要在2中已建好框架的頁面代碼<div id=”mainnav”></div>中加入新的div元素,

          按a命名法則: <div id=”mainnav”><div class=”firstnav”>…</div></div>,

          樣式寫法:  #mainnav  .firstnav{…….}

          按b命名法則: <div id=”mainnav”><div class=”main_firstnav”>…</div></div>,

          樣式寫法:  .main_firstnav{…….}

          7. css屬性書寫順序, 建議遵循 布局定位屬性–>自身屬性–>文本屬性–>其他屬性. 此條可根據自身習慣書寫, 但盡量保證同類屬性寫在一起. 屬性列舉: 布局定位屬性主要包括: margin & padding & float(包括clear) & position(相應的 top,right,bottom,left) & display & visibility & overflow等; 自身屬性主要包括: width  &  height  &  background  &  border; 文本屬性主要包括: font & color & text-align & text-decoration & text-indent等;其他屬性包括: list-style(列表樣式) & vertical-vlign & cursor & z-index(層疊順序)  & zoom等. 我所列出的這些屬性只是最常用到的, 并不代表全部;

          8. 書寫代碼前, 考慮并提高樣式重復使用率;

          9. 充分利用html自身屬性及樣式繼承原理減少代碼量, 比如:

          <ul class=”list”><li>這兒是標題列表<span>2010-09-15</span></ul>

          定義

          ul.list li{position:relative}  ul.list li span{position:absolute; right:0}

          即可實現日期居右顯示

          10. 樣式表中中文字體名, 請務必轉碼成unicode碼, 以避免編碼錯誤時亂碼;

          11. 背景圖片請盡可能使用sprite技術, 減小http請求, 考慮到多人協作開發, sprite按模塊制作;

          12. 使用table標簽時(盡量避免使用table標簽), 請不要用width/ height/cellspacing/cellpadding等table屬性直接定義表現, 應盡可能的利用table自身私有屬性分離結構與表現, 如thead,tr,th,td,tbody,tfoot,colgroup,scope; (cellspaing及cellpadding的css控制方法: table{border:0;margin:0;border-collapse:collapse;} table th, table td{padding:0;} , base.css文件中我會初始化表格樣式)

          13. 杜絕使用<meta http-equiv=”X-UA-Compatible” content=”IE=7″ /> 兼容ie8;

          14. 用png圖片做圖片時, 要求圖片格式為png-8格式,若png-8實在影響圖片質量或其中有半透明效果, 請為ie6單獨定義背景:

          _background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’img/bg.png’);

          15. 避免兼容性屬性的使用, 比如text-shadow || css3的相關屬性;

          16. 減少使用影響性能的屬性, 比如position:absolute || float ;

          17. 必須為大區塊樣式添加注釋, 小區塊適量注釋;

          18. 代碼縮進與格式: 建議單行書寫, 可根據自身習慣, 后期優化i會統一處理;

          JavaScript書寫規范

          1. 文件編碼統一為utf-8, 書寫過程過, 每行代碼結束必須有分號; 原則上所有功能均根據XXX項目需求原生開發, 以避免網上down下來的代碼造成的代碼污染(沉冗代碼 || 與現有代碼沖突 || …);

          2. 庫引入: 原則上僅引入jQuery庫, 若需引入第三方庫, 須與團隊其他人員討論決定;

          3. 變量命名: 駝峰式命名. 原生JavaScript變量要求是純英文字母, 首字母須小寫, 如iTaoLun;

          jQuery變量要求首字符為’_’, 其他與原生JavaScript 規則相同, 如: _iTaoLun;

          另, 要求變量集中聲明, 避免全局變量.

          4. 類命名: 首字母大寫, 駝峰式命名. 如 ITaoLun;

          5. 函數命名: 首字母小寫駝峰式命名. 如iTaoLun();

          6. 命名語義化, 盡可能利用英文單詞或其縮寫;

          7. 盡量避免使用存在兼容性及消耗資源的方法或屬性, 比如eval() & innerText;

          8. 后期優化中, JavaScript非注釋類中文字符須轉換成unicode編碼使用, 以避免編碼錯誤時亂碼顯示;

          9. 代碼結構明了, 加適量注釋. 提高函數重用率;

          10. 注重與html分離, 減小reflow, 注重性能.

          圖片規范

          1. 所有頁面元素類圖片均放入img文件夾, 測試用圖片放于img/demoimg文件夾;

          2. 圖片格式僅限于gif || png || jpg;

          3. 命名全部用小寫英文字母 || 數字 || _ 的組合,其中不得包含漢字 || 空格 || 特殊字符;盡量用易懂的詞匯, 便于團隊其他成員理解; 另, 命名分頭尾兩部分, 用下劃線隔開, 比如ad_left01.gif || btn_submit.gif;

          4. 在保證視覺效果的情況下選擇最小的圖片格式與圖片質量, 以減少加載時間;

          5. 盡量避免使用半透明的png圖片(若使用, 請參考css規范相關說明);

          6. 運用css sprite技術集中小的背景圖或圖標, 減小頁面http請求, 但注意, 請務必在對應的sprite psd源圖中劃參考線, 并保存至img目錄下.

          注釋規范

          1. html注釋: 注釋格式 <!–這兒是注釋–>, ’–’只能在注釋的始末位置,不可置入注釋文字區域;

          2. css注釋: 注釋格式 /*這兒是注釋*/;

          3. JavaScript注釋, 單行注釋使用’//這兒是單行注釋’ ,多行注釋使用 /* 這兒有多行注釋 */;

          開發及測試工具約定

          建議使用Aptana || Dw || Vim , 亦可根據自己喜好選擇, 但須遵循如下原則:

          1. 不可利用IDE的視圖模式’畫’代碼;

          2. 不可利用IDE生成相關功能代碼, 比如Dw內置的一些功能js;

          3. 編碼必須格式化, 比如縮進;

          測試工具: 前期開發僅測試FireFox & IE6 & IE7 & IE8 , 后期優化時加入Opera & Chrome & Safari;

          建議測試順序: FireFox–>IE7–>IE8–>IE6–>Opera–>Chrome–>Safari, 建議安裝firebug及IE Tab Plus插件.

          其他規范

          1. 開發過程中嚴格按分工完成頁面, 以提高css復用率, 避免重復開發;

          2. 減小沉冗代碼, 書寫所有人都可以看的懂的代碼. 簡潔易懂是一種美德. 為用戶著想, 為服務器著想.

          posted @ 2012-02-02 21:51 小馬歌 閱讀(268) | 評論 (0)編輯 收藏
           
          posted @ 2012-02-02 21:02 小馬歌 閱讀(148) | 評論 (0)編輯 收藏
           

          移動這一塊目前是iPhone遙遙領先,程序員是愛買Android,一般老百姓還是偏向iPhone。現在做手機程序的統統是iPhone優先策略——做一個程序,先寫iPhone版,第二才考慮Android。在iPhone的帶動下,Mac OS 在美國市場占有率都上升到9%了,相當可怕,有人認為蘋果將成為九十年代帶的微軟。

            從根子上來講,谷歌是一家廣告公司,蘋果是一家設計公司,如果只是他們倆在競爭,鹿死誰手還真不好說;可Android是一個開源程序,開源是IT界的傾銷手段,因為它免費的正大光明。真正在背后支持Android的力量,是三星、摩托羅拉這些被蘋果搶了市場分額的手機公司,沒有Android,這些手機公司就活不了了(當然,現在又有了WP7……)。此外,因為Android是開源的,它會被大量應用到其他產品上,就是所謂的物聯網。Android以后會成為高端的設備上的嵌入式開發平臺,比如汽車App或者其他什么的。應用廣就意味著更大的程序員群體,更大的群體意味著技術發展的更快……形成一種良性循環。蘋果的系統只能在iPhone上跑,應用面就窄的多。所以筆者認為蘋果不會成為就九十年代的微軟,筆者認為蘋果將成為……還是九十年代的蘋果。孤芳自賞是沒有好下場的。

            不過,筆者覺得這倆平臺都不是未來的Windows,Windows是一個不能被重復的傳說。你看,就算Android能打贏iOS,它能壟斷市場嗎?不能。蘋果也不是吃素的,Android和iOS在未來一段時間內應該都是齊頭并進,更何況現在又出了Windows Phone,還有黑莓和諾基亞……不能因為過氣了你就當人家不存在呀,俗話說瘦死的駱駝比馬大不是?也就是說,移動平臺注定是百花齊放的局面,不可能出現當年Windows一統江山的情景。那么,如果沒有統一的操作系統,開發程序就是一件麻煩的事情,同一個軟件要寫好幾個版本,這事兒效率太低。當多平臺并存已成定局的時候,群眾最需要的就是跨平臺的技術。

            目前開發移動程序框架選擇很多,從Web App,到PhoneGap,Titanium,MonoTouch,再到Native App,總有一款適合你。規律是,兼容性越強的技術,成本越低,性能越差;兼容性越差的技術,成本越高,性能越好。在眾多框架里,筆者最看好PhoneGap。有以下兩個原因:

            1、兼容性。完全做到了written once, run everywhere。

            2、標準化。PhoneGap用W3C標準,特別標準,Web App直接一字不改就能運行。尤其是和JQ Mobile結合在一起使用,實在是威力無窮啊!

            3、用JavaScript+HTML5。你說這和iOS以及Anroid的代碼加XML有區別嗎?我看都差不多。

            當然目前PhoneGap缺陷還是蠻多的,比如運行速度慢,UI反應延時——這是個致命傷。不過嘛,這種問題是會隨著技術的進步而消失的。它的優勢是無以倫比的:開發成本低——筆者個人估計,至多是Native App的五分之一吧。偉大導師馬克思教導我們說,資本有了300%的利潤,就敢踐踏一切人間法律。跨平臺的流行是不可避免的。當然,Native App永遠會有一席之地,比如高端游戲。

            有的技術雖然高明,如果找不到切入點也流行不起來。就算再有潛力的種子,沒有生存的土壤也長不成大樹。最典型的例子就是標準Qwerty鍵盤,再不好使大家也一直在用。PhoneGap是不會成為空中樓閣的,它現在已經遍地開花了,網上很多招工都指明要PhoneGap做。表面上看來,做PhoneGap的是溫哥華的一家小公司,但是……和Android一樣,PhoneGap也是開源項目,這里頭貓膩可就多了去啦。現在,IBM給PhoneGap貢獻的代碼,比PhoneGap母公司還多!為啥大家這么支持PhoneGap呢?筆者覺得JQ Mobile主頁上的一張合作伙伴的圖特別說明問題,請看:

          PhoneGap移動開發框架

            這張圖片的名字就叫……找找少了誰?咦,怎么沒有谷歌呀。谷歌不是一直支持JQuery,最Web Centric嗎,怎么不支持JQ Mobile了?是了,谷歌有Android,不需要Web App也可以分到一大塊市場,甚至Web App會降低開發門檻,反而會削弱Android的競爭力。利益當前,谷歌把不作惡這事兒也忘了。但是,就像新聞聯播里經常說的,人民,只有人民才是這世界的主人。歷史潮流是擋不住的,誰都不行,谷歌也不行。看看上面圖片里這些公司,黑莓、諾基亞、Palm……他們都是曾經的強者,現在卻是被Android和iOS邊緣化的弱者。如果你想做移動開發,你可能選擇Android,也可能選擇iOS,但你會選擇黑莓嗎?諾基亞?——沒有應用程序是操作系統最大的痛啊。因此,他們才是最需要跨平臺技術的。每多一個跨平臺技術的程序員,就等于多了一個黑莓程序員、諾基亞程序員……跨平臺也是符合生產力發展規律的,是進步的,是革命的,是人民的呼聲!弱者單獨看起來很弱,團結起來便力量驚人,可以戰勝一切,可以推翻霸權,偉大領袖都是這么做的。


          PhoneGap前景

            Adobe最近公開表示將會為HTML5開發推出更多有意義的工具。有業內人士表示,Adobe的HTML5戰略特別值得注意,此外Adobe對于喬布斯的此番公開批評曾積極地回應道:“喬布斯說的不都是對的。”可一年半后,Adobe棄Flash而去,轉投封閉王國蘋果支持的為數不多的開放標準之一——HTML5。這是個好的信號,在flash和html5之間猶豫的開發者可以大膽的使用phonegap了,另外html5更注重移動平臺,flash更適合pc端。在html5移動應用的架構選擇上,PhoneGap無疑是最佳的開發模式。

          posted @ 2012-02-02 16:15 小馬歌 閱讀(208) | 評論 (0)編輯 收藏
           
               摘要: 一種 動態 樣式 語言.LESS 將 CSS 賦予了動態語言的特性,如 變量, 繼承,運算, 函數. LESS 既可以在 客戶端 上運行 (支持IE 6+, Webkit, Firefox),也可一在服務端運行 (借助Node.js).網站地址:http://www.lesscss.net/變量變量允許我們單獨定義一系...  閱讀全文
          posted @ 2012-02-02 11:00 小馬歌 閱讀(710) | 評論 (0)編輯 收藏
           

              今日,Twitter 在 Github 公布了 Bootstrap 2.0 版本的源代碼(源碼鏈接)。

              Bootstrap 是 Twitter 推出的一套用于快速搭建網頁應用的輕量級前端開發工具。它由 Twitter 設計師 Mark Otto 和 Jacob Thornton 合作開發。Bootstrap 是一套用于開發網頁應用,符合 HTML 和 CSS 簡潔但優美規范的庫。Bootstrap 由動態 CSS 語言 Less 寫成,在很多方面類似 CSS 框架 Blueprint。經過編譯后,Bootstrap 就是眾多 CSS 的合集。

          輕量級前端開發工具Bootstrap重大改進,Twitter發布Bootstrap 2.0

          Twitter今日在開發者博客上公布消息,6個月前發布的輕量級前端開發工具Bootstrap迎來重大改進,正式升級為Bootstrap 2.0(下載源碼)。和原來一樣,Bootstrap 2.0仍然是一個托管在GitHub上的開源項目。

          去年8月,Twitter推出了用于快速搭建網頁應用的輕量級前端開發工具Bootstrap,由Twitter的設計師Mark OttoJacob Thornton合作完成。Bootstrap是一套用于開發網頁應用,符合HTML和CSS簡潔但優美規范的庫。Bootstrap由動態CSS語言Less寫成,在很多方面類似CSS框架Blueprint。經過編譯后,Bootstrap就是眾多CSS的合集。想要了解Bootstrap的細節,開發者請參考Twitter的官方指南演示示例

          Bootstrap 2.0的開發過程中, Mark Otto參考了不少來自社區的意見和Twitter前端重新設計過程中積累的經驗。 除了增加新樣式外,Bootstrap 2.0修改了一些網頁元素的默認樣式,除去了上一版本中的幾十個Bug,同時完善了說明文檔。目前,使用Bootstrap的案例有NASA和MSNBC的Breaking News

          此次升級的細節請參考這里

           

          posted @ 2012-02-02 10:58 小馬歌 閱讀(235) | 評論 (0)編輯 收藏
           

          img的lowsrc是指當網速比較慢時,先加載一個小的圖片,等大圖加載完了再顯示大圖。

          雖然現有的網速已經很快了,但是lowsrc的思想在提高用戶體驗上還是有很大好處,尤其是圖片比較大的時候。

          當然img的lowsrc沒有出現在Web標準里面,那么如何去模擬呢?

          主要有兩種形式:

          一、給img一個背景色或背景圖片,這樣也能達到類似的效果,雖然不是最理想的;

          二、使用JS,實現上應該還是是比較容易的,以下是我的一種寫法(當然不同的需求有不同的寫法):

          Code   ViewPrint
          1. <script type="text/javascript">  
          2. function load_img(url,url_s,o) {  
          3.     var img = new Image();  
          4.     img.src = url;  
          5.     o.src=url_s;  
          6.    if (img.complete) {  
          7.         o.src=img.src;  
          8.         return;  
          9.     }  
          10.     img.onload = function () {  
          11.         o.src=img.src;  
          12.     };  
          13. };  
          14. </script>  
          15. <input type="button" value="開始加載" onclick="load_img('http://blog.xhlv.com/wp-content/uploads/2008/09/20080927_02.jpg','http://blog.xhlv.com/wp-content/uploads/2008/09/20080927_01.jpg',document.getElementById('img'))" />  
          16. <div><img src="" width="500" height="321" id="img"/></div>  
          posted @ 2012-02-01 18:36 小馬歌 閱讀(1542) | 評論 (0)編輯 收藏
          僅列出標題
          共95頁: First 上一頁 42 43 44 45 46 47 48 49 50 下一頁 Last 
           
          主站蜘蛛池模板: 乌审旗| 宜兰市| 油尖旺区| 宝鸡市| 孝昌县| 建昌县| 澳门| 喀喇沁旗| 宜兰县| 葫芦岛市| 益阳市| 始兴县| 密云县| 南涧| 连南| 甘孜| 昌吉市| 科技| 潼关县| 蒲城县| 蓬安县| 合江县| 罗山县| 海盐县| 宣武区| 琼海市| 德安县| 伊吾县| 巨野县| 齐齐哈尔市| 武川县| 甘谷县| 德安县| 神木县| 通州区| 北安市| 诏安县| 日照市| 河源市| 南澳县| 沙坪坝区|