照片库

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. C++ Preprosessor import

    #import Attributes Provides links to attributes used with the #import directive. Microsoft Specific ...

  2. VS2010升级VS2013后，出现没有定义类型“PowerPacks.ShapeContainer”错误解决方法

    开发说明: http://msdn.microsoft.com/zh-tw/library/microsoft.visualbasic.powerpacks.aspx Microsoft.Visual ...

  3. iOS UITableView的Section Footer加入button

    郝萌主倾心贡献,尊重作者的劳动成果.请勿转载. 假设文章对您有所帮助,欢迎给作者捐赠.支持郝萌主,捐赠数额任意.重在心意^_^ 我要捐赠: 点击捐赠 Cocos2d-X源代码下载:点我传送 在处理UI ...

  4. maven 项目中使用 jstl标签

    在pom.xml文件下面增加如下的依赖包: <dependency> <groupId>javax.servlet</groupId> <artifactId ...

  5. linux 除了某个文件或某个目录以外所有删除

    rm `ls | grep -v "aa"`    //删除除带aa字符串的全部文件 ls | grep -v keep | xargs rm //除keep字符串的以外全删除 r ...

  6. ThinkPHP实现用户登录

    ThinkPHP实现用户登录 ? //默认url入口 ? class IndexAction extends Action{ function index() { //检查用户是否登录 if(isse ...

  7. NSUserDefaults写作和阅读对象定义自己

    需要编写对象必须实现NSCoding protocol Person Class Person.h #import <Foundation/Foundation.h> #import &q ...

  8. hdu1005 Number Sequence（寻找循环节）

    主题链接: pid=1005">huangjing 题意: 就是给了一个公式,然后求出第n项是多少... 思路: 题目中n的范围实在是太大,所以肯定直接递推肯定会超时,所以想到的是暴力 ...

  9. google多语言通信框架gRPC

    google多语言通信框架gRPC系列(一)概述 gRPC概述 3/26/2016 9:16:08 AM 目录 一.概述 二.编译gRPC 三.C#中使用gRPC 四.C++中使用gRPC 一直在寻找 ...

  10. Foursquare 8.0 ：聪明人给互联网公司上的流量转化课

    今年 5 月上线的 Swarm 虽然应用制作精良,但不免让人怀疑是 Foursquare一次失败的互联网公司服务越界和用户忠诚度试水.但非常快这群聪明人让我们发现事情并没有这么简单:他们给互联网公司们 ...