Heim >Web-Frontend >js-Tutorial >javascript模仿百万格子小的一小段代码_javascript技巧

javascript模仿百万格子小的一小段代码_javascript技巧

WBOYOriginal: 2016-05-16 19:09:251265Durchsuche

关键是得出每个图片的坐标位置，这只是一个简单的实现，更百万格子的功能还相差甚远。

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  
    <title>Untitled Document</title>  
    <style type="text/css">  
      *{margin:0px;padding:0px}  
      table#tab{  
        border:solid #ccc;  
        border-width:1px 0px 0px 1px;  
      }  
      table#tab tr td{  
        border:solid #ccc;  
        border-width:0px 1px 1px 0px;  
      }  
    </style>  
    <script type="text/javascript">  
     function fnMakeTb(){  //çæè¡¨æ ¼100è¡50åï¼å®éå®½åº¦ä¸º20ï¼è¾¹æ¡1+å®½19ï¼  
      var sTabStr="<table cellpadding=\"0\" cellspacing=\"0\" id=\"tab\">";  
      for(var i=0;i<100;i++){  
        var tempStr="<tr>";  
        for(var j=0;j<50;j++){  
          tempStr+="<td style=\"width:19px;height:19px\"> ";  
    
        }  
        tempStr+=""  
        sTabStr+=tempStr;  
    
      }  
      document.getElementById("aa").innerHTML=sTabStr;   //è¾åºè¡¨æ ¼  
    
     }  
       
     var iCurX=0;  //å½åå¯ç¨xåæ   
     var iCurY=0;  //å½åå¯ç¨yåæ   
     var iMaxY=0;  //å½åæå¤§yå¼  
     function fnLocatePic(url){  
      var obj=document.createElement("IMG");  
      obj.src=url;  
      //è·åå¾ççå®½é«  
      var w=obj.width;  
      var h=obj.height;  
      //è®¡ç®å ç¨æ ¼åçå®½é«ï¼å¿é¡»æ¯20çåæ°  
      var divW=(w%20>1?(Math.floor(w/20)*20+20):w);  
      var divH=(h%20>1?(Math.floor(h/20)*20+20):h);  
        
      var x,y;  //å½ååç´ ï¼å¾çï¼çåæ   
      if(iCurX+divW>1000){  //å½åè¡çæ ¼åä½¿ç¨å®ï¼æ¢è¡æ¾ç¤ºï¼xéæ°ä»0å¼å§è®¡ï¼æ´æ°å½åyå¼ä¸ºæå¤§yå¼  
        x=0;  
        y=iCurY=iMaxY;  
    
      }else{  
        x=iCurX;  
        y=iCurY;  
    
      }  
      iCurX=x+divW;  //è®¡ç®ä¸ä¸ä¸ªåç´ ï¼å¾çï¼xåæ   
      if(y+divH>iMaxY){  
        iMaxY=y+divH;  //å°å½åæå¤§yå¼èµäºiMaxY  
    
      }  
      document.write("<div style=\"position:absolute;width:"+divW+"px;height:"+divH+"px;top:"+y+"px;left:"+x+"px;\"><img  src="+url+" / alt="javascript模仿百万格子小的一小段代码_javascript技巧" ></script>

"); }

[Ctrl+A å¨é æ³¨:å¦éå¼å¥å¤é¨Jséå·æ°æè½æ§è¡]

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：新发现原来documenet.URL也可以实现页面跳转_javascript技巧Nächster Artikel：JavaScript延时效果比较不错的_javascript技巧

In Verbindung stehende Artikel

Mehr sehen