擦除图片（JavaScript）

最新推荐文章于 2023-09-05 17:04:07 发布

chexijing7210

最新推荐文章于 2023-09-05 17:04:07 发布

阅读量272

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/3402290/blog/1535949

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #bDiv{
            width:500px;
            height: 700px;
            border:#cccccc  1px solid;
            background-image: url(img1/psb.jpg);
            background-size:500px 700px;
            position: relative;
        }
        #sDiv{
            width: 50px;
            height: 50px;
            border:#cccccc 1px solid;
            background-image: url("img1/x.jpg");
            background-size: 50px 50px ;
            position: absolute;

        }
    </style>
</head>
<body>
<div id="bDiv"><div id="sDiv" style="top: 0px; left: 0px"></div></div>

</body>
<script>
var bDiv=document.getElementById("bDiv");
    var str="";
    var l=0;
    var t=0;
    for(var i=0;i<100;i ++){

        l=(i%10)*50;
        t=Math.floor(i/10)*50;
        str +='<div id="sDiv" style="top: '+t+'px; left: '+l+'px"></div>';
    }
        bDiv.innerHTML=str;
    var sDiv=bDiv.getElementsByTagName("sDiv");
    for(var i=0;i<100;i ++){
    sDiv[i].οnmοuseοver=function () {
            this.style.tranform="scale(0)";
            this.style.opacity=0;

    }}
</script>
</html>

转载于:https://my.oschina.net/u/3402290/blog/1535949