照片库

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGlhb21vZ2c=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

1.二维函数写法【效果展示】

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        *{margin:0;padding:0;}

        body{background:#939393;}

        #box{width:800px;height:800px;margin:0 auto;background:url(11.jpg);overflow: hidden;}

        .col{width:50px;height:50px;outline:1px solid #fff;float:left;background:url(00.jpg) no-repeat;opacity:0;filter:alpha(opacity:0);}

    </style>

</head>

<body>

<div id="box"></div>

</body>

</html>

        <script type="text/javascript">

            var box=document.getElementById("box");

           var rowDiv=[];

            var tArray=new Array();

            for(var i=0;i<16;i++) {

                tArray[i] = new Array();

                for (var j = 0; j < 16; j++) {

                    rowDiv[j] = document.createElement("div");

                    box.appendChild(rowDiv[j]);

                    rowDiv[j].className = "col";

                    tArray[i][j] = rowDiv[j];

                    var l = -(j * 50) + "px";

                    var T = -(i * 50) + "px";

                        tArray[i][j].style.backgroundPosition =l+" "+T;

                        tArray[i][j].onmouseover = function ()

                        {

                            this.style.opacity = "1";

                            this.style.filter="alpha(opacity:100)";

                        }

                    }









            }

        </script>



2.字符串写法【效果展示】

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        *{margin:0;padding:0;}

        body{background:#939393;}

        #box{width:800px;height:800px;margin:0 auto;background:url(11.jpg);overflow: hidden;}

        .col{width:50px;height:50px;outline:1px solid #fff;float:left;background:url(00.jpg) no-repeat;opacity:0;filter:alpha(opacity:0);}

    </style>

</head>

<script type="text/javascript" src="jquery-1.10.1.min.js"></script>

<body>

<div id="box"></div>

</body>

</html>

<script type="text/javascript">

    var box=document.getElementById("box");

    var col=box.getElementsByTagName("div");

    var rowDiv=[];

    var bg_P=[];

    var str="";

    for(var i=0;i<16;i++)

    {

        for(var j=0;j<16;j++)

        {

            str+='<div class="col" style="background-position:'+-(j*50)+'px '+-(i*50)+'px"></div>';

        }

    }

    box.innerHTML=str;

    for(var i=0;i<col.length;i++)

    {

        col[i].onmouseover=function(){

            this.style.opacity="1";

            this.style.filter="alpha(opacity:100)";

        }

    }

</script>

版权声明：本文博主原创文章，博客，未经同意不得转载。

图片切割工具---产生多个div切割图片 采用for和一的二维阵列设置背景位置的更多相关文章

  1. 图片的URL上传至阿里云OSS操作（微信小程序二维码返回的二进制上传到OSS）

    当我们从网络中获取一个URL的图片我们要存储到本地或者是私有的云时,我们可以这样操作  把url中的图片文件下载到本地(或者上传到私有云中)  public String uploadUrlToOss ...

  2. 扫描项目里没有使用的图片mac工具，删除没有使用的图片以减小包的体积

    [链接]netyouli/WHC_ScanUnreferenceImageToolhttps://github.com/netyouli/WHC_ScanUnreferenceImageTool

  3. Codeforces Round #439 (Div. 2) Problem E (Codeforces 869E) - 暴力 - 随机化 - 二维树状数组 - 差分

    Adieu l'ami. Koyomi is helping Oshino, an acquaintance of his, to take care of an open space around ...

  4. Codeforces Round #369 (Div. 2) A. Bus to Udayland【字符串/二维字符数组求连起来的座位并改为其他字符】

    A. Bus to Udayland time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  5. 图片处理工具类 - ImageUtils.java

    纯JAVA实现的图片处理工具类,提供图片的裁剪.压缩.获取尺寸.制作圆角等方法. 源码如下:(点击下载 -ImageUtils.java .FolderUtils.java .commons-io-2 ...

  6. 验证码图片生成工具类——Captcha.java

    验证码图片生成工具,使用JAVA生成的图片验证码,调用getRandcode方法获取图片验证码,以流的方式传输到前端页面. 源码如下:(点击下载  Captcha.java) import java. ...

  7. java生成二维码，读取（解析）二维码图片

    二维码分为好多种,我们最常用的是qrcode类型的二维码,以下有三种生成方式以及解析方式: 附所需jar包或者js地址 第一种:依赖qrcode.jar import java.awt.Color; ...

  8. Java生成带小图标的二维码-google zxing 工具类

    近期一直忙于开发微信商城项目,应客户要求,要开发个有图标的二维码.经过两次改版,终于实现了该功能(第一次没有小图标,这次才整合好的),如下是完整代码 . 该代码使用Java7开发,另外使用 core- ...

  9. js生成带有logo的二维码并保存成图片下载

    生成二维码,需要依赖jquery,先引入一个jquery,然后需要一个插件改变过了jquery-qrcode.js 插件代码(需要的自己打开看): /*! jquery-qrcode v0.14.0 ...

随机推荐

  1. Photon + Unity3D 在线游戏开发 学习笔记(两)

    本文和大家 和大家说说 Photon 解压后的目录结构 这里面最基本的我们 以后开发要用到的目录 就是  deploy目录,这个目录里 放的是要挂载的 server 当然我们的 server端也要放在 ...

  2. 服务器编程入门（10）TCP回射服务器实现 - 并发

    问题聚焦:     在前面我们大概浏览了一下服务器编程需要掌握的一些知识和技术,以及架构思想.        实践,才是检验真理的唯一标准..从这节起我们将在这些技术的基础上,一步步实现以及完善一个服 ...

  3. malformed or corrupted AST file。。。module file out of date&#39;

    今天打开了曾经用的一个项目,(曾经的程序是对的)弹出了两个红框 malformed or corrupted AST file...module file out of date'. 这种结构. 解决 ...

  4. 升级旧Delphi应用转向支持手机的一个思路

    系统架构改为B/S. 业务规则所有在服务端实现,使用REST服务封装旧有系统,这样可最大程度的利用原有代码. client所实用HTML5+javascript,这样client不须布署PC,可极大减 ...

  5. Install Linux Kernel - AT91SAM9260EK

    两.AT91SAM9260EK 2.1下载 介绍页: http://www.at91.com/linux4sam/bin/view/Linux4SAM/LegacyLinuxKernel 下载页: a ...

  6. 【教你zencart仿站 文章1至6教训 高清1280x900视频下载】[支持手机端]

    [教你zencart仿站 第1至6课 高清晰1280x900视频下载][支持移动端] 经过筹备, 我们的课件最终出来了- 我们 zencart联盟合伙人 项目推出的 在线yy同步演示zencart仿站 ...

  7. Sql还原数据库出现3154错误

    要先知道还原的数据库的名字 然后在数据库中新建一个那个名字的数据库, his 是数据库的名字!! RESTORE DATABASE his FROM DISK = 'E:\RDHL文件\HIS相关文档 ...

  8. 简介支持向量机热门（认识SVM三位置）

    支持向量机通俗导论(理解SVM的三层境地) 作者:July .致谢:pluskid.白石.JerryLead.出处:结构之法算法之道blog. 前言 动笔写这个支持向量机(support vector ...

  9. iOS设备定位

    一.iOS谈到定位 1.SignInSignOutViewController.h @interface SignInSignOutViewController : UIViewController& ...

  10. Android定位功能

    不说废话,直接说说实现android定位有关的API吧. 这些API都在android.location包下,一共有三个接口和八个类.它们配合使用即可实现定位功能. 三个接口: GpsStatus.L ...