照片库

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. 读书笔记：《为什么大猩猩比专家高明, How We Decide》

    读书笔记:<为什么大猩猩比专家高明, How We Decide> 英文的书名叫<How We Decide>,可能是出版社的原因,非要弄一个古怪的中文书名<为什么大猩猩 ...

  2. Java学习之道：空指针错误求解救？？？？？？？？？？？？

    运行下面这个主方法红色代码的地方就报如下错: https://api.weibo.com/2/users/show.json?access_token=2.00szM9cCc4R_EC6ebcf150 ...

  3. 基于FFMPEG和SDL实现视频播放器

    这个是雷大牛实现的project. http://download.csdn.net/detail/leixiaohua1020/5122959 有兴趣的能够好好研究研究.

  4. Javascript异步数据的同步处理方法

    数据处理方法封装 var DataWatch=(function(){ var gWatch={},cursor= 0,callback_key = 'callback',gMap={}; var c ...

  5. 微信简单Demo

    新建一个WxHandler.ashx public class WxHandler : IHttpHandler { public static string Msg; public void Pro ...

  6. 2014百度之星第三题Xor Sum(字典树+异或运算)

    Xor Sum Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 132768/132768 K (Java/Others) Total ...

  7. 学习 easyui 之二：jQuery 的 ready 函数和 easyloader 的加载回调函数

    Ready 事件不一定 ready 使用 easyloader 的时候,必须要注意到脚本的加载时机问题,easyloader 会异步加载模块,所以,你使用的模块不一定已经加载了.比如下面的代码. &l ...

  8. 《Javascript高级程序设计》读书笔记之继承

    1.原型链继承 让构造函数的原型对象等于另一个类型的实例,利用原型让一个引用类型继承另一个引用类型的属性和方法 function SuperType() { this.property=true; } ...

  9. Amazon AWS创建RHEL 7实例

    在AWS上登录 如果没有账号的话先注册,参考 http://blog.banban.me/blog/2014/06/09/li-yong-awsmian-fei-zhang-hu-da-jian-vp ...

  10. ExtJs自学教程(1)：从一切API开始

    称号 记得 本系列文章是不是引进全套焦点ExtJs使用,您只需专注于解决ExtJs思考问题.人们不写长篇大论.别人能学会自立.l  有些人只要学会CSS的javascript对于英文不至于很蹩脚(以辅 ...