资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
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> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%20%0D%0A%20%20%20%20%20function%20fnMakeTb()%7B%20%20%2F%2F%E7%94%9F%E6%88%90%E8%A1%A8%E6%A0%BC100%E8%A1%8C50%E5%88%97%EF%BC%8C%E5%AE%9E%E9%99%85%E5%AE%BD%E5%BA%A6%E4%B8%BA20%EF%BC%88%E8%BE%B9%E6%A1%861%2B%E5%AE%BD19%EF%BC%89%20%20%0D%0A%20%20%20%20%20%20var%20sTabStr%3D%22%3Ctable%20cellpadding%3D%5C%220%5C%22%20cellspacing%3D%5C%220%5C%22%20id%3D%5C%22tab%5C%22%3E%22%3B%20%20%0D%0A%20%20%20%20%20%20for(var%20i%3D0%3Bi%3C100%3Bi%2B%2B)%7B%20%20%0D%0A%20%20%20%20%20%20%20%20var%20tempStr%3D%22%3Ctr%3E%22%3B%20%20%0D%0A%20%20%20%20%20%20%20%20for(var%20j%3D0%3Bj%3C50%3Bj%2B%2B)%7B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20tempStr%2B%3D%22%3Ctd%20style%3D%5C%22width%3A19px%3Bheight%3A19px%5C%22%3E%20%3C%2Ftd%3E%22%3B%20%20%0D%0A%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%20%0D%0A%20%20%20%20%20%20%20%20tempStr%2B%3D%22%3C%2Ftr%3E%22%20%20%0D%0A%20%20%20%20%20%20%20%20sTabStr%2B%3DtempStr%3B%20%20%0D%0A%20%20%20%20%0D%0A%20%20%20%20%20%20%7D%20%20%0D%0A%20%20%20%20%20%20document.getElementById(%22aa%22).innerHTML%3DsTabStr%3B%20%20%20%2F%2F%E8%BE%93%E5%87%BA%E8%A1%A8%E6%A0%BC%20%20%0D%0A%20%20%20%20%0D%0A%20%20%20%20%20%7D%20%20%0D%0A%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20var%20iCurX%3D0%3B%20%20%2F%2F%E5%BD%93%E5%89%8D%E5%8F%AF%E7%94%A8x%E5%9D%90%E6%A0%87%20%20%0D%0A%20%20%20%20%20var%20iCurY%3D0%3B%20%20%2F%2F%E5%BD%93%E5%89%8D%E5%8F%AF%E7%94%A8y%E5%9D%90%E6%A0%87%20%20%0D%0A%20%20%20%20%20var%20iMaxY%3D0%3B%20%20%2F%2F%E5%BD%93%E5%89%8D%E6%9C%80%E5%A4%A7y%E5%80%BC%20%20%0D%0A%20%20%20%20%20function%20fnLocatePic(url)%7B%20%20%0D%0A%20%20%20%20%20%20var%20obj%3Ddocument.createElement(%22IMG%22)%3B%20%20%0D%0A%20%20%20%20%20%20obj.src%3Durl%3B%20%20%0D%0A%20%20%20%20%20%20%2F%2F%E8%8E%B7%E5%8F%96%E5%9B%BE%E7%89%87%E7%9A%84%E5%AE%BD%E9%AB%98%20%20%0D%0A%20%20%20%20%20%20var%20w%3Dobj.width%3B%20%20%0D%0A%20%20%20%20%20%20var%20h%3Dobj.height%3B%20%20%0D%0A%20%20%20%20%20%20%2F%2F%E8%AE%A1%E7%AE%97%E5%8D%A0%E7%94%A8%E6%A0%BC%E5%AD%90%E7%9A%84%E5%AE%BD%E9%AB%98%EF%BC%8C%E5%BF%85%E9%A1%BB%E6%98%AF20%E7%9A%84%E5%80%8D%E6%95%B0%20%20%0D%0A%20%20%20%20%20%20var%20divW%3D(w%2520%3E1%3F(Math.floor(w%2F20)*20%2B20)%3Aw)%3B%20%20%0D%0A%20%20%20%20%20%20var%20divH%3D(h%2520%3E1%3F(Math.floor(h%2F20)*20%2B20)%3Ah)%3B%20%20%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20var%20x%2Cy%3B%20%20%2F%2F%E5%BD%93%E5%89%8D%E5%85%83%E7%B4%A0%EF%BC%88%E5%9B%BE%E7%89%87%EF%BC%89%E7%9A%84%E5%9D%90%E6%A0%87%20%20%0D%0A%20%20%20%20%20%20if(iCurX%2BdivW%3E1000)%7B%20%20%2F%2F%E5%BD%93%E5%89%8D%E8%A1%8C%E7%9A%84%E6%A0%BC%E5%AD%90%E4%BD%BF%E7%94%A8%E5%AE%8C%EF%BC%8C%E6%8D%A2%E8%A1%8C%E6%98%BE%E7%A4%BA%EF%BC%8Cx%E9%87%8D%E6%96%B0%E4%BB%8E0%E5%BC%80%E5%A7%8B%E8%AE%A1%EF%BC%8C%E6%9B%B4%E6%96%B0%E5%BD%93%E5%89%8Dy%E5%80%BC%E4%B8%BA%E6%9C%80%E5%A4%A7y%E5%80%BC%20%20%0D%0A%20%20%20%20%20%20%20%20x%3D0%3B%20%20%0D%0A%20%20%20%20%20%20%20%20y%3DiCurY%3DiMaxY%3B%20%20%0D%0A%20%20%20%20%0D%0A%20%20%20%20%20%20%7Delse%7B%20%20%0D%0A%20%20%20%20%20%20%20%20x%3DiCurX%3B%20%20%0D%0A%20%20%20%20%20%20%20%20y%3DiCurY%3B%20%20%0D%0A%20%20%20%20%0D%0A%20%20%20%20%20%20%7D%20%20%0D%0A%20%20%20%20%20%20iCurX%3Dx%2BdivW%3B%20%20%2F%2F%E8%AE%A1%E7%AE%97%E4%B8%8B%E4%B8%80%E4%B8%AA%E5%85%83%E7%B4%A0%EF%BC%88%E5%9B%BE%E7%89%87%EF%BC%89x%E5%9D%90%E6%A0%87%20%20%0D%0A%20%20%20%20%20%20if(y%2BdivH%3EiMaxY)%7B%20%20%0D%0A%20%20%20%20%20%20%20%20iMaxY%3Dy%2BdivH%3B%20%20%2F%2F%E5%B0%86%E5%BD%93%E5%89%8D%E6%9C%80%E5%A4%A7y%E5%80%BC%E8%B5%8B%E4%BA%88iMaxY%20%20%0D%0A%20%20%20%20%0D%0A%20%20%20%20%20%20%7D%20%20%0D%0A%20%20%20%20%20%20document.write(%22%3Cdiv%20style%3D%5C%22position%3Aabsolute%3Bwidth%3A%22%2BdivW%2B%22px%3Bheight%3A%22%2BdivH%2B%22px%3Btop%3A%22%2By%2B%22px%3Bleft%3A%22%2Bx%2B%22px%3B%5C%22%3E%3Cimg%20src%3D%22%2Burl%2B%22%20%2F%3E%3C%2Fdiv%3E%22)%3B%20%20%0D%0A%20%20%20%20%0D%0A%20%20%20%20%20%7D%20%20%0D%0A%20%20%20%20%3C%2Fscript%3E"> </head> <body> <div id="aa"> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%20%0D%0A%20%20%20%20fnMakeTb(50%2C50%2C1)%3B%20%20%0D%0A%20%20%20%20fnLocatePic(%22http%3A%2F%2Fgg.blueidea.com%2F2006%2Fchinaok%2F208x32.gif%22)%3B%20%20%0D%0A%20%20%20%20fnLocatePic(%22http%3A%2F%2Fbbs.blueidea.com%2Fimages%2Fblue%2Fnewtopic.gif%22)%3B%20%20%0D%0A%20%20%20%20fnLocatePic(%22http%3A%2F%2Fbbs.blueidea.com%2Fimages%2Fblue%2Fsmilies%2Fbiggrin.gif%22)%3B%20%20%0D%0A%20%20%20%20fnLocatePic(%22http%3A%2F%2Fbbs.blueidea.com%2Fimages%2Fblue%2Freply.gif%22)%3B%20%20%0D%0A%20%20%20%20fnLocatePic(%22http%3A%2F%2Fbbs.blueidea.com%2Fimages%2Fblue%2Fdiscuz_icon.gif%22)%3B%20%20%0D%0A%20%20%20%20fnLocatePic(%22http%3A%2F%2Fbbs.blueidea.com%2Fimages%2Fblue%2Flogo.gif%22)%3B%20%20%0D%0A%20%20%20%20fnLocatePic(%22http%3A%2F%2Fgg.blueidea.com%2Flogo%2Fnetfriends%2Flogo.gif%22)%3B%20%20%0D%0A%20%20%20%20fnLocatePic(%22http%3A%2F%2Fgg.blueidea.com%2Flogo%2Fcomputerarts%2Flogo.gif%22)%3B%20%20%0D%0A%20%20%20%20fnLocatePic(%22http%3A%2F%2Fpages.blueidea.com%2Farticleimg%2F2007%2F01%2F1403%2Fpreview_s01.jpg%22)%3B%20%20%0D%0A%20%20%20%20fnLocatePic(%22http%3A%2F%2Fgg.blueidea.com%2F2006%2Fqihoo%2Fblueidea.gif%22)%3B%20%20%0D%0A%20%20%20%20fnLocatePic(%22http%3A%2F%2Fgg.blueidea.com%2F2006%2Fchinaok%2F468x60.gif%22)%3B%20%20%0D%0A%20%20%20%20fnLocatePic(%22http%3A%2F%2Fpages.blueidea.com%2Farticleimg%2F2006%2F12%2F1399%2Fpreview_s01.jpg%22)%3B%20%20%0D%0A%20%20%20%20fnLocatePic(%22http%3A%2F%2Fgg.blueidea.com%2Fdesk%2F2006%2F002.jpg%22)%3B%20%20%0D%0A%20%20%20%20fnLocatePic(%22http%3A%2F%2Fwww.blueidea.com%2Farticleimg%2F2006%2F09%2F4088%2F00.gif%22)%3B%20%20%0D%0A%20%20%20%20fnLocatePic(%22http%3A%2F%2Fgg.blueidea.com%2Flogo%2Fnetfriends%2Flogo.gif%22)%3B%20%20%0D%0A%20%20%20%20fnLocatePic(%22http%3A%2F%2Fgg.blueidea.com%2Flogo%2Fcomputerarts%2Flogo.gif%22)%3B%20%20%0D%0A%20%20%20%20fnLocatePic(%22http%3A%2F%2Fbbs.blueidea.com%2Fcustomavatars%2Fhutia.gif%22)%3B%20%20%0D%0A%20%20%20%20fnLocatePic(%22http%3A%2F%2Fbbs.blueidea.com%2Fimages%2Fblue%2Fsmilies%2Ffrown.gif%22)%3B%20%20%0D%0A%20%20%20%20fnLocatePic(%22http%3A%2F%2Fbbs.blueidea.com%2Fimages%2Fblue%2Fsmilies%2Fcool.gif%22)%3B%20%20%0D%0A%20%20%20%20fnLocatePic(%22http%3A%2F%2Fbbs.blueidea.com%2Fimages%2Fblue%2Falipay_icon.gif%22)%3B%20%20%0D%0A%20%20%20%20fnLocatePic(%22http%3A%2F%2Fwww.blueidea.com%2Fgg%2Fblueidea%2F2004%2Fpainter.jpg%22)%3B%20%20%0D%0A%20%20%20%20fnLocatePic(%22http%3A%2F%2Fwww.blueidea.com%2Farticleimg%2F2003%2F07%2F425%2F2003.gif%22)%3B%20%20%0D%0A%20%20%20%20%3C%2Fscript%3E"> </div> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程