小案例-鼠标移入依次显示图片各个部分_html鼠标放到图片的不同区域显示不同数据-优快云博客

本文链接：https://blog.youkuaiyun.com/xiaoshiqi17/article/details/78634584

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #div1 {
            width: 509px;
            height: 509px;
            position: relative;
            background-color: #ccc;
        }
        .box {
            position: absolute;
            width: 50px;
            height: 50px;
            margin-top: 1px;
        }

    </style>
</head>
<body>

<div id="div1" style="">
</div>


<script>
    var oDiv = document.getElementById('div1');
    for( var i=0;i<100;i++ ){
        oDiv.innerHTML += '<div class="box">'+'</div>';
    }
    var aDiv = oDiv.getElementsByTagName('div');
    for(var i=0;i<100;i++){
        //判断第一列的每一行开头图片
        if(i%10==0){
            //计算第一列的位置
            var j = 0;
            aDiv[i].style.top = (5.1*i) + 'px';
            //获取中间值，此列其他图片引用
            var tempt = (5.1*i) + 'px';
            aDiv[i].style.left = (j-1)+'px';
            aDiv[i].style.backgroundPositionX = '-'+j+'px'
            aDiv[i].style.backgroundPositionY = '-'+(5.1*i) + 'px';
        } else {
        //判断其他图片
            aDiv[i].style.top = tempt;
            aDiv[i].style.left = j*51+'px';
            aDiv[i].style.backgroundPositionX = '-'+j*51+'px';
            aDiv[i].style.backgroundPositionY = '-'+tempt;
        }
        j++;
        aDiv[i].onmouseover = function () {
            this.style.backgroundImage = 'url(http://i2.bvimg.com/620364/508fbf8b47365fbc.jpg)';
        }
    }


</script>
</body>
</html>