图片切割工具—产生多个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)
blank

相关推荐

  • Win10 桌面美化

    Win10 桌面美化Win10桌面美化最近发现了几款Win10界面美化的软件,看了看别人家的Win10操作界面,瞬间觉得自己的low了,关键是赏心悦目啊!废话不多说,先看看我原来桌面和美化后的桌面对比图原始桌面美化桌面1.安装RocketDockRocketDock可以提供类似macos的操作系统图标特效,打开安装包进行安装,完毕后启动得到效果如下:可以发现切换效果与mac类似,他默认的主题是C…

  • MySQL中concat函数

    MySQL中concat函数

  • 究竟什么是可重入锁?

    究竟什么是可重入锁?经历很久之前就听说了可重入锁,可重入锁究竟是什么意思,以前是囫囵吞枣的,只要记住ReentrantLock和sychronized是可重入锁就行了,爱咋用咋用,好吧,原谅我的无知,最近对基础查漏补缺,发现竟然对其一问三不知,赶紧预习一波,觉得有必要写一篇博客来讲解,就当做什么都没有发生吧,嘿嘿。。。释义广义上的可重入锁指的是可重复可递归调用的锁,在外层使用锁之后,在内层仍然可以使用,并且不发生死锁(

  • YIQ颜色空间_简述RGB颜色

    YIQ颜色空间_简述RGB颜色首先,我们先来了解下有关颜色的基本概念一、色彩的基本概念1、彩色的三要素亮度:即人眼对光的明亮程度的感受。色调:人眼能看到的颜色种类,与光的波长有关饱和度:颜色深浅程度。与各种颜色混入白光的比例有关。以上色调+饱和度=色度2、三基色原理三基色可以通过适当比例的混合组成自然界中任何一种颜色由于人眼对于红绿蓝三种色光最为敏感,并且由这三种颜色能组成的颜色范围最广,故一般选用…

    2022年10月28日
  • BZOJ1915[USACO 2010 Open Gold 1.Cow Hopscotch]——DP+斜率优化

    BZOJ1915[USACO 2010 Open Gold 1.Cow Hopscotch]——DP+斜率优化

  • MySQL数据库备份的4种方式「建议收藏」

    MySQL数据库备份的4种方式「建议收藏」MySQL备份的4种方式总结:备份方法备份速度恢复速度便捷性功能一般用于cp快快一般、灵活性低很弱少量数据备份mysqldump慢慢一般、可无视存储引擎的差异一般中小型数据

发表回复

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

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