使用js数组和事件完成的一个小玩意儿

「爱情、让人受尽委屈。」 2022-05-30 11:50 190阅读 0赞

#### 图片开始半透明的 ####

![这里写图片描述][70]

#### 鼠标放上去后 ####

![这里写图片描述][70 1]

#### 代码实现 ####

###### 1.样式 ######

*{ margin: 0; padding: 0; }
        .dage{ width: 510px; height: 510px; background: #ccc; margin: 20px auto; position: relative; }
        span{ height: 50px; width: 50px; background-image: url("img/pic.jpg") ; display: block; position: absolute; opacity: 0.2; }

###### dom节点 ######

<div class="dage">
    
    </div>

###### js代码 ######

var oDiv = document.getElementsByTagName("div")[0];
        var str = "";
        for(var i=0; i<100; i++){
            str += "<span></span>";
        }
        oDiv.innerHTML =str;
    
        var oSpan = document.getElementsByTagName("span");
        for(var i=0; i<oSpan.length; i++){
            oSpan[i].style.top = parseInt(i/10)*51+"px";
            oSpan[i].style.left =  (i%10)*51+"px";
            oSpan[i].style.backgroundPosition =(i%10)*-51+"px"+' '+parseInt(i/10)*-51+"px";
            oSpan[i].onmouseover = function(){ 
                this.style.opacity = "1";
            }
    
    
        }

0.0

[70]: /images/20220530/28af401b535c4aa5818c09069d23580a.png
[70 1]: /images/20220530/a6ed2ac5b5ee42b798303d69d2cc4050.png

发表评论取消回复

表情：

评论列表（有 0 条评论，190人围观）

还没有评论，来说两句吧...

相关阅读

相关 Java—小鑫数数儿

Java—小鑫数数儿 Description 某天小鑫忽然得到了许多的数字，他很好学，老师给他布置了一个任务，求出这些数字中，小于他们平均数、等于他们平均数、大于他们

布满荆棘的人生/ 2022年12月12日 13:42/ 0 赞/ 120 阅读

相关 Qt小玩意儿——代码雨

效果： ![在这里插入图片描述][2021052714171877.gif] 头文件 ifndef HACKRAIN_H define HACKRAI

淩亂°似流年/ 2022年10月16日 06:17/ 0 赞/ 210 阅读

相关 Qt小玩意儿——简单仪表盘

效果如下： ![在这里插入图片描述][20210526151733304.gif] 头文件： ifndef DASHBOARD_H define DA

ゝ一世哀愁。/ 2022年10月16日 02:00/ 0 赞/ 694 阅读

相关 Qt小玩意儿——简单图片转字符构成的图像

效果如下： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

港控/mmm°/ 2022年10月15日 12:52/ 0 赞/ 164 阅读

相关 Qt小玩意儿——变色魔法阵（QPainter的部分应用）

效果如下： ![在这里插入图片描述][20210525092920743.gif] 头文件： ifndef MAGIC_H define MAGIC_

不念不忘少年蓝@/ 2022年10月15日 11:58/ 0 赞/ 194 阅读

相关使用js数组和事件完成的一个小玩意儿

图片开始半透明的 ![这里写图片描述][70] 鼠标放上去后 ![这里写图片描述][70 1] 代码实现 1.样式 { margin: 0;

「爱情、让人受尽委屈。」/ 2022年05月30日 11:50/ 0 赞/ 191 阅读

相关浏览器的审查元素，这是一个神奇的玩意儿

在做页面的过程中，应用到一些前端框架，很多时候都需要对框架的原始设计进行微调，但是如果直接在框架文件里面去搜索，有时候一搜就会有一大堆差不多的，还得一个个去比对到底哪个才是我想

悠悠/ 2022年05月23日 06:09/ 0 赞/ 277 阅读

相关 Pythonic到底是什么玩意儿

Pythonic到底是什么玩意儿？<?xml:namespace prefix = o ns = "urn:schemas-microsof

Dear 丶/ 2022年02月17日 09:13/ 0 赞/ 250 阅读

相关连分数中一个有意思的小玩意儿

该结论来自美国新数学丛书《连分数》的第8页.若$p$比$q$大，并且 \\begin\{equation\} \\frac\{p\}\{q\}=\[a\_1,a\_2,

深藏阁楼爱情的钟/ 2021年12月19日 14:59/ 0 赞/ 220 阅读

相关 3106-小鑫数数儿-JAVA

小鑫数数儿 Time Limit: 1000 ms Memory Limit: 65536 KiB -------------------- Problem Desc

忘是亡心i/ 2021年09月27日 13:14/ 0 赞/ 204 阅读