图片切割工具—产生多个div切割图片 采用for和一的二维阵列设置背景位置

图片切割工具—产生多个div切割图片 采用for和一的二维阵列设置背景位置

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

照片库

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

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>

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/117004.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • linux ettercap,CentOS下安装ettercap

    linux ettercap,CentOS下安装ettercapCentOS下安装ettercapettercap下载地址http://ettercap.sourceforge.net/download.php下载好之后解压出来,进入到解压目录#tarzxvfettercap-NG-0.7.3.tar.gz#cdettercap-NG-0.7.3阅读README#vimREADMEMANDATORY://安装必须依赖的libpcap>=…

  • linux polkitd 漏洞,CVE-2011-1485 Red Hat PolicyKit pkexec功能和polkitd守护进程竞争条件漏洞-漏洞情报、漏洞详情、安全漏洞、CVE – 安全客…「建议收藏」

    linux polkitd 漏洞,CVE-2011-1485 Red Hat PolicyKit pkexec功能和polkitd守护进程竞争条件漏洞-漏洞情报、漏洞详情、安全漏洞、CVE – 安全客…「建议收藏」/*polkit-pwnage.c***==============================*=PolicyKitPwnage=*=byzx2c4=*=Sept2,2011=*==============================***Howdyfolks,**T…

  • 数据分析之数据预处理、分析建模、可视化[通俗易懂]

    概述:简介、思路、发展历程、应用领域、开发流程;数据类型:结构化与非结构化、定性与定量、截面数据与时间序列数据;数据来源:外部来源、内部来源;数据预处理:数据清洗、数据集成、数据规约、数据变换;数据分析模型:对比分析、漏斗分析、留存分析、A/B测试、用户行为路径分析、用户分群、用户画像分析等;数据分析方法:描述统计、假设检验、信度分析、相关分析、方差分析、回归分析、聚类分析、判别分析、主成分分析、因子分析、时间序列分析等;数据可视化:Excel、PowerBI、Tableau、Python;

  • 使用StopWatch计算耗时[通俗易懂]

    使用StopWatch计算耗时[通俗易懂]一、传统计算耗时方式一般采用System.currentTimeMillis()来获取时间,然后打印当前时间与任务开始执行时间的差值。记录开始时间点记录结束时间点输出当前时间与任务开始执行时间的差值代码如下:publicstaticvoidmain(String[]args)throwsInterruptedException{longstartTime=System.currentTimeMillis();//dos

  • js push string in array

    js push string in array

  • 3D机房效果图制作|创建步骤过程分步简述[通俗易懂]

    3D机房效果图制作|创建步骤过程分步简述[通俗易懂]三维机房效果图创建过程步骤,制作教程原创文章发布,多年实战经验简述:A:客户提供机房布置方案规划图之后,先沟通好,例如角落里是七氟丙烷柜,右侧是精密空调,后边是UPS配电柜,冷通道是双排还是单排的,这个要搞清楚,不然后边修改就麻烦了。B:思路理清之后就可以整理CAD图纸了,删除辅助线,标注尺寸,地面和墙面填充,删除多余线条,然后复制好整理的图纸。机房整体鸟瞰角度效果图案例C:打开三维软件,用脚本粘贴刚才的图纸,一键归零合并冻结。D:确定好角度,这个需要反复测试几十次,看了网上很多的.

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号