照片库

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. 使用NFS安装oracle软件

    昨天.使用openfiler创建nas存储系统,安装oracle软件,在所有正面最好,要创建一个数据库时报ora错,原来使用nfs安装oracle数据库,mount选项有特殊要求,如以下.以备查: R ...

  2. deinstall oracle 11g on linux

    deinstall oracle 11g on linux   From 11gR2, oracle provide us an deinstall tool. With that now we ca ...

  3. namespace命名空间

    在讨论如何使用命名空间之前,必须了解 PHP 是如何知道要使用哪一个命名空间中的元素的.可以将 PHP 命名空间与文件系统作一个简单的类比.在文件系统中访问一个文件有三种方式: 相对文件名形式如foo ...

  4. java注解（一）

    虽然平时有使用注解,不过没有深入了解,今天无聊,重新从基础深入了解整理下: java注解是附加在代码中的一些元信息,用于一些工具在编译.运行时进行解析和使用,起到说明.配置的功能.     注解不会也 ...

  5. Kruskal(克鲁斯卡尔)

    设有一个有n个顶点的连通网N={V,E},最初先构造一个只有n个顶点, 没有边的非 连通图 T={V, E}, 图中每个顶点自成一个连通分量. 当在E中选到一条具有最小权值的边时,若该边的两个顶点落在 ...

  6. 王立平--Failed to push selection: Read-only file system

    往android模拟器导入资源,失败. 提示:仅仅读文件. mnt是仅仅读文件.应点击sdcard.,在导入

  7. 勾股数组及其应用uva106

    勾股数组 设三元组(a,b,c)满足a^2 + b^2 = c^2的勾股数组,那么是否存在无穷多个勾股数组呢, 答案是肯定的,将三元组乘以d,可以得到新的三元组(da,db,dc) 即(da)^2 + ...

  8. 【原创】poj ----- 3009 curling 2 解题报告

    题目地址: http://poj.org/problem?id=3009 题目内容: Curling 2.0 Time Limit: 1000MS   Memory Limit: 65536K Tot ...

  9. WPF命令參数CommandParameter

    XAML代码例如以下: <Window x:Class="Demo006.MainWindow" xmlns="http://schemas.microsoft.c ...

  10. 【HDU】5256 系列转换（上涨时间最长的序列修饰）

    假设a[i]和a[j]我想的一样,满足条件的需要是 a[j] - a[i] > j - i 也就是说,a[i] - i < a[j] - j 例1 4 2 不满意,所以1和2必须有必要之间 ...