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

更新时间：2007年08月28日 20:37:35 作者：

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  <html>    <head>      <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\"> </td>";              }          tempStr+="</tr>"          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+" /></div>");           }      </script>    </head>    <body>      <div id="aa">      <script type="text/javascript">      fnMakeTb(50,50,1);      fnLocatePic("http://gg.blueidea.com/2006/chinaok/208x32.gif");      fnLocatePic("http://bbs.blueidea.com/images/blue/newtopic.gif");      fnLocatePic("http://bbs.blueidea.com/images/blue/smilies/biggrin.gif");      fnLocatePic("http://bbs.blueidea.com/images/blue/reply.gif");      fnLocatePic("http://bbs.blueidea.com/images/blue/discuz_icon.gif");      fnLocatePic("http://bbs.blueidea.com/images/blue/logo.gif");      fnLocatePic("http://gg.blueidea.com/logo/netfriends/logo.gif");      fnLocatePic("http://gg.blueidea.com/logo/computerarts/logo.gif");      fnLocatePic("http://pages.blueidea.com/articleimg/2007/01/1403/preview_s01.jpg");      fnLocatePic("http://gg.blueidea.com/2006/qihoo/blueidea.gif");      fnLocatePic("http://gg.blueidea.com/2006/chinaok/468x60.gif");      fnLocatePic("http://pages.blueidea.com/articleimg/2006/12/1399/preview_s01.jpg");      fnLocatePic("http://gg.blueidea.com/desk/2006/002.jpg");      fnLocatePic("http://www.blueidea.com/articleimg/2006/09/4088/00.gif");      fnLocatePic("http://gg.blueidea.com/logo/netfriends/logo.gif");      fnLocatePic("http://gg.blueidea.com/logo/computerarts/logo.gif");      fnLocatePic("http://bbs.blueidea.com/customavatars/hutia.gif");      fnLocatePic("http://bbs.blueidea.com/images/blue/smilies/frown.gif");      fnLocatePic("http://bbs.blueidea.com/images/blue/smilies/cool.gif");      fnLocatePic("http://bbs.blueidea.com/images/blue/alipay_icon.gif");      fnLocatePic("http://www.blueidea.com/gg/blueidea/2004/painter.jpg");      fnLocatePic("http://www.blueidea.com/articleimg/2003/07/425/2003.gif");      </script>      </div>    </body>  </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

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

详解JS变量存储深拷贝和浅拷贝
这篇文章主要介绍了JS变量存储深拷贝和浅拷贝,想深入了解JS的同学，可以参考下
2021-05-05
javawscript 三级菜单的实现原理
javawscript 三级菜单的实现代码。
2009-07-07
JS如何操作DOM基于表格动态展示数据
这篇文章主要介绍了JS如何操作DOM基于表格动态展示数据,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-10-10
js 排序动画模拟冒泡排序
在js中，想让线程sleep一下确实不是一件简单的事情，过多的使用定时器或者回调函数，会让复杂，凌乱，这时，可以考虑能否使用队列来做一些简
2012-07-07
js实现模拟计算器退格键删除文字效果的方法
这篇文章主要介绍了js实现模拟计算器退格键删除文字效果的方法,涉及javascript字符串截取操作的相关技巧,需要的朋友可以参考下
2015-05-05
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
最近发现的Web项目在IE6下出现背景图片不缓存的问题，在网上搜索了一番，发现已经是众所周知的BUG，这里就总结一下各种解决办法
2012-05-05
js倒计时简单实现代码
这篇文章主要为大家详细介绍了js倒计时简单实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-08-08
JS中art-template模板使用过滤器问题
这篇文章主要介绍了JS中art-template模板使用过滤器问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
JavaScript RegExp 对象用法详解
这篇文章主要介绍了JavaScript RegExp 对象用法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-09-09
JavaScript实现通讯录功能
这篇文章主要为大家详细介绍了JavaScript实现通讯录功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-12-12

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具