用JS实现多个图片的放大和缩小

最新推荐文章于 2022-12-20 17:30:40 发布

OrdnAry

最新推荐文章于 2022-12-20 17:30:40 发布

阅读量936

点赞数

分类专栏：学习文章标签： js html css

本文链接：https://blog.youkuaiyun.com/OrdnAry/article/details/108404359

版权

学习专栏收录该内容

59 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
            *{margin: 0px; padding: 0px}
            #ul1 li{list-style: none; width: 100px; height: 100px; border: 1px solid black; margin: 10px; float: left; background-color: gray}
            #ul1{width: 366px; height: 366px;border: 1px solid black; margin: 100px auto; position: relative;}
            #ul1 li img{width: 100%; height: 100%}
    </style>
    <script src="../startMove.js"></script>
    <script>
        window.onload = function(){
            var ul = document.getElementById("ul1");
            var lis = document.getElementsByTagName("li");

            var currentIndex = 2;

            for(var i = 0; i <lis.length; i ++){
                lis[i].style.left = lis[i].offsetLeft + "px";
                lis[i].style.top = lis[i].offsetTop + "px";
                var img = document.createElement("img");
                img.src = "img/" + (i + 1) + ".jpg";
                lis[i].appendChild(img);
            }
            for(var i = 0; i < lis.length; i++){
                lis[i].style.position = 'absolute';
                lis[i].style.margin = '0px';

                lis[i].onmouseover = function(){
                    this.style.zIndex = currentIndex++;
                    startMove(this,{
                        width: 200,
                        height: 200,
                        marginLeft: -50,
                        marginTop: -50
                    })
                }
                lis[i].onmouseout = function(){
                        startMove(this, {
                            width: 100,
                            height: 100,
                            marginLeft: 0,
                            marginTop: 0
                        })
                    }
            }
        }
    </script>
</head>
<body>
    <ul id = 'ul1'>
        <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
    </ul>
</body>
</html>

在这里插入图片描述