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

来源：动视网责编：小采时间：2020-11-27 20:38:01

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

javascript模仿百万格子小的一小段代码_javascript技巧:关键是得出每个图片的坐标位置，这只是一个简单的实现，更百万格子的功能还相差甚远。 Untitled Document *{margin:0px;padding:0px} table#tab{ border:solid #ccc; border-width:1px 0px 0px 1px; } table#t

推荐度：

点击下载本文 文档为doc格式

导读javascript模仿百万格子小的一小段代码_javascript技巧:关键是得出每个图片的坐标位置，这只是一个简单的实现，更百万格子的功能还相差甚远。 Untitled Document *{margin:0px;padding:0px} table#tab{ border:solid #ccc; border-width:1px 0px 0px 1px; } table#t

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

<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> </pre>输出表格 } 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("<img src="https://www.gxlcms.com/+url+" />"); } </ script> </head> <body> 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> </body> </html>
[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

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

推荐度：

点击下载本文 文档为doc格式

标签： js 的一 javascript

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐