小案例-鼠标移入依次显示图片各个部分

最新推荐文章于 2023-06-19 14:12:48 发布

能吃一大碗

最新推荐文章于 2023-06-19 14:12:48 发布

阅读量446

点赞数

分类专栏： js 文章标签： js html 前端

本文链接：https://blog.csdn.net/xiaoshiqi17/article/details/78634584

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!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>