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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript模仿百万格子小的一小段代码

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 302 ::

收藏到网摘: n/a

javascript实现的一个自定义长度的文本自动换行的函数。兼容FireFox 用javascript写的一个画图函数

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

点击运行可以看到效果:

<!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 全选提示:你可先修改部分代码,再按运行]

javascript实现的一个自定义长度的文本自动换行的函数。兼容FireFox 用javascript写的一个画图函数

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

评论 (0) All