Maison > Article > interface Web > javascript模仿百万格子小的一小段代码_javascript技巧

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

WBOYoriginal: 2016-05-16 19:09:251246parcourir

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

<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éå·æ°æè½æ§è¡]

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：新发现原来documenet.URL也可以实现页面跳转_javascript技巧Article suivant：JavaScript延时效果比较不错的_javascript技巧

Articles Liés

Voir plus