照片库

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. Shell 脚本常用命令

    Shell脚本是Linux开发工作中常用的工具,但是我一直没有找到一个适合自己的简明扼要的HandBook.在工作过程中整理了一下,贴在这里已备查看. 1           Shell中的特殊符号 ...

  2. tomcat启动Flash退出错误不能被视为解决该错误信息

    tomcat 当有错误 启动startup.bat闪存在退出解决方案 打开 startup.bat 文件 最后 该start 阅读run watermark/2/text/aHR0cDovL2Jsb2 ...

  3. 《JavaScript设计模式与开发实践》读书笔记之模板方法模式

    1. 模板方法模式 1.1 面向对象方式实现模板方法模式 以泡茶和泡咖啡为例,可以整理为下面四步 把水煮沸 用沸水冲泡饮料 把饮料倒进杯子 加调料 首先创建一个抽象父类来表示泡一杯饮料 var Bev ...

  4. sort 工具总结

    sort的工作原理 sort将文件的每一行作为一个单位,相互比较,比较原则是从首字符向后,依次按ASCII码值进行比较,最后将他们按升序输出. -u 去除重复行 -r sort默认的排序方式是升序,如 ...

  5. Linux系统部署规范v1.0

    Linux系统部署规范v1.0 目的: 1.尽可能减少线上操作: 2.尽可能实现自动化部署: 3.尽可能减少安装服务和启动的服务: 4.尽可能使用安全协议提供服务: 5.尽可能让业务系统单一: 6.尽 ...

  6. Android系统各版本号及代号

    Android系统各版本号及代号 版本 版本号代号 公布日期 API Android 1.0 阿童木 1 Android 1.1 发条机器人 2008.9 2 Android 1.5 纸杯蛋糕 200 ...

  7. LeetCode: Valid Palindrome [125]

    [题目] Given a string, determine if it is a palindrome, considering only alphanumeric characters and i ...

  8. EJB体系结构

    为了适应企业的快速发展.缩短企业信息系统的设计和开发周期.降低构建信息系统的成本,Sun公司制订了Java2 SDK Enterprise Edition(J2EE)规范,定义基于组件的方式设计.开发 ...

  9. 【Web优化】Yslow优化法则（四）启用Gzip压缩

    Yslow的第4个经验法则指出:启用gzip压缩功能,能够降低HTTP传输的数据和时间,从而降低client请求的响应时间. 本篇是Yslow法则的第四个,主要包含三个方面的内容: 1.      什 ...

  10. vultr centos x64 6.5.x 升级php7.0

    升级前,先卸载 php5.6.x 卸载php5.6.2 从cent 6.5.x 需要卸载: yum remove php56u-mysqlnd-5.6.20-1.ius.centos6.x86_64 ...