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

图片开始半透明的

鼠标放上去后

代码实现

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