微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > web前端 > js教程 > 正文

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

php中文网

发布： 2016-05-16 19:09:25

原创

1410人浏览过

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

绘蛙-多图成片

绘蛙-多图成片

绘蛙新推出的AI图生视频工具

绘蛙-多图成片

133

绘蛙-多图成片

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

大家都在看：

JavaScript中的代码可维护性有哪些提升方法？ JavaScript日期处理库的封装与优化 JS 代码可读性提升技巧 - 命名约定与代码结构的规范化实践 JavaScript 中 URL 和 URLSearchParams 的陷阱 HMPL - HTMX 的最佳替代品

java速学教程(入门到精通)

java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

来源：php中文网

上一篇：新发现原来documenet.URL也可以实现页面跳转_javascript技巧下一篇：JavaScript延时效果比较不错的_javascript技巧

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

最新问题

React createRef 深度解析：为何推荐使用而非自定义Ref对象？ React的createRef()API用于创建Refs，尽管其内部实现看似简单，仅返回一个带有current属性的普通对象，导致开发者疑惑为何不直接使用自定义对象。实际上，createRef提供了与React机制更佳的兼容性、代码可读性及未来可扩展性。它确保了Ref在Ref转发等高级场景中的一致性和健壮性，是React官方推荐的标准化Ref创建方式，而非简单的语法糖。

2025-11-23 11:35:30

620

掌握JavaScript模块化导入：在HTML中正确引入JS类本文旨在解决在HTML文件中导入JavaScript类时遇到的常见问题，特别是关于ES模块的正确使用。我们将详细讲解如何通过type="module"属性以及在import语句中指定完整的文件扩展名来成功导入和使用JavaScript类，并提供清晰的代码示例和注意事项，确保开发者能够顺利实现模块化开发。

2025-11-23 11:28:02

668

在Go Web应用中通过AJAX发送下拉列表数据至服务器本教程详细阐述了如何在Go语言开发的Web应用中，利用JavaScript和AJAX技术将HTML下拉列表的选中数据发送到服务器。通过客户端监听列表项点击事件，捕获选中值，并使用XMLHttpRequest发起POST请求，实现前后端的数据交互，为进一步的服务器端逻辑处理奠定基础。

2025-11-23 11:08:51

266

解决Outlook插件中按钮事件重复触发的问题：构建配置与缓存管理在Outlook插件开发中，按钮事件重复触发通常源于构建配置不当，导致脚本文件被重复加载。本文将深入探讨此问题的常见原因，特别是Webpack等打包工具可能引起的脚本冗余，并提供一套系统的解决方案，包括优化构建输出、清理Office缓存以及开发最佳实践，确保事件仅被正确注册和执行一次。

2025-11-23 11:08:02

920

使用纯JavaScript实现可持久化用户偏好的暗黑模式切换本教程详细介绍了如何使用纯JavaScript实现一个暗黑模式切换功能。通过一个简单的切换按钮，用户可以轻松地在亮/暗模式之间切换，并且系统会利用localStorage记住用户的选择，确保在页面重新加载后依然保持用户偏好，无需依赖任何第三方库。

2025-11-23 11:04:35

710

深入理解JavaScript中立即调用类表达式（IICE）及其继承机制本文深入探讨JavaScript中立即调用类表达式（ImmediatelyInvokedClassExpression,IICE）的执行机制，特别是当其涉及多层继承时。我们将通过一个嵌套的类表达式实例，详细解析其构造函数调用顺序、this上下文的绑定，以及实例属性的初始化时机，揭示常见的潜在陷阱并提供解决方案，帮助开发者更好地理解和运用复杂的类结构。

2025-11-23 10:52:08

630

JavaScript工程化_Tree Shaking原理 TreeShaking是一种基于ES6模块静态分析的构建优化技术，通过标记清除未使用的导出代码来减小打包体积。它依赖import/export语法，在Webpack、Rollup等工具中启用生产模式后自动生效，要求模块无副作用或在package.json中正确声明sideEffects，以确保未引用代码被安全移除。

2025-11-23 10:52:03

192

解决 Outlook Add-in 按钮重复触发事件的问题本文旨在解决Outlook加载项中按钮点击事件重复触发的问题，其根本原因通常是Webpack配置不当导致同一事件监听器被重复加载，以及Office缓存未及时清理。教程将详细指导如何检查并优化Webpack配置，确保仅加载一次JavaScript逻辑，并强调清理Office缓存的重要性，以保证加载项行为的正确性和一致性。

2025-11-23 10:47:01

263

JavaScript设备方向_陀螺仪数据获取通过监听deviceorientation事件获取alpha、beta、gamma三个角度值，可实现设备方向检测，需处理权限请求与兼容性问题，并应用于游戏、全景浏览等场景。

2025-11-23 10:08:02

513

JavaScript服务端开发_Node.js高并发架构设计 Node.js高并发依赖事件驱动与非阻塞I/O，需结合cluster模块、微服务架构、异步流程控制、缓存、限流及进程管理等系统性设计保障性能与稳定。

2025-11-23 10:07:02

670

相关专题

更多>

热门推荐

开源免费商场系统

广告

热门教程

更多>

相关推荐

热门推荐

最新课程

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

关于我们免责申明举报中心意见反馈讲师合作广告合作最新更新 English: php中文网：公益在线php培训，帮助PHP学习者快速成长！; 关注服务号技术交流群

PHP中文网订阅号: 每天精选资源文章推送

PHP中文网APP: 随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

PHP学习

技术支持

返回顶部