JavaScript 多图片效果

好的船长�

已于 2022-12-03 14:58:55 修改

阅读量262

点赞数

文章标签： javascript 前端

于 2022-11-28 23:12:19 首次发布

本文链接：https://blog.csdn.net/qq_52781485/article/details/128089360

版权

多图片的缩放

放大效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{width: 100px; height: 100px; background-color: orange; position: absolute; left: 400px; top: 400px;}
        #div2{width: 200px; height: 200px; background-color: yellow; position: absolute; left: 400px; top: 400px;}
    </style>
    <script src="../startMove.js"></script>
    <script>
        window.onload = function(){
            var oDiv1 = document.getElementById("div1");
            oDiv1.onmouseover = function(){
                startMove(this,{
                    width: 200,
                    height: 200
                })
            }
            oDiv1.onmouseout = function(){
                startMove(this,{
                    width: 100,
                    height: 100
                })
            }
        }
    </script>
</head>
<body>
    <div id="div2"></div>
    <div id="div1"></div>
</body>
</html>

问题：不是从中心开始放大

给大的div添加marginLeft与marginTop，在运动时改变div1的marginLeft与marginTop

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{width: 100px; height: 100px; background-color: orange; position: absolute; left: 400px; top: 400px;}
        #div2{width: 200px; height: 200px; background-color: yellow; position: absolute; left: 400px; top: 400px; margin-left: -50px; margin-top: -50px;}
    </style>
    <script src="../startMove.js"></script>
    <script>
        window.onload = function(){
            var oDiv1 = document.getElementById("div1");
            oDiv1.onmouseover = function(){
                startMove(this,{
                    width: 200,
                    height: 200,
                    /* 
                        好处：只需要改marginLeft和marginTop的值等于当前放大宽度和高度的一半即可，不需要看原来的坐标
                    */
                    marginLeft: -50,
                    marginTop: -50
                })
            }
            oDiv1.onmouseout = function(){
                startMove(this,{
                    width: 100,
                    height: 100,
                    marginLeft: 0,
                    marginTop: 0
                })
            }
        }
    </script>
</head>
<body>
    <div id="div2"></div>
    <div id="div1"></div>
</body>
</html>

多图片的缩放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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;}
         #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 oUl1 = document.getElementById("ul1");
            var aLis = oUl1.getElementsByTagName("li");

            /* 
                问题：由于布局的时候是从0，1，2，3...顺序布局，所以除了最后一个图片放大时不会被其他图片遮挡，其他的图片放大都会有层级高的挡住它;增加一个全局变量currentIndex
            */
            var currentIndex = 2;

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

            for(var i = 0; i < aLis.length; i++){
                aLis[i].style.position = 'absolute';
                aLis[i].style.margin = '0px';

                //给每一个li标签添加移入和移出
                aLis[i].onmouseover = function(){
                    this.style.zIndex = currentIndex++;
                    startMove(this, {
                        width: 200,
                        height: 200,
                        marginLeft: -50,
                        marginTop: -50
                    })
                }
                aLis[i].onmouseout = function(){
                    startMove(this, {
                        width: 100,
                        height: 100,
                        marginLeft: 0,
                        marginTop: 0
                    })
                }
            }
        }
    </script>
</head>
<body>
    <ul id="ul1">
        <!-- 3*3布局，在手机端此布局点击方便，不容易造成误触 -->
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

循环播放图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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: 200px; height: 200px; margin: 10px; float: left;}
        #ul1 li img{width: 100%; height: 100%;}
        #ul1{position: absolute; left: 0px;}
        #div1{width: 880px; height: 220px; border: 1px solid black; margin: 50px auto; position: relative; overflow: hidden;}
    </style>
    <script>
        window.onload = function(){
            var oDiv1 = document.getElementById("div1");
            var oUl1 = document.getElementById("ul1");

            /* 直接把这四张图片再添加到末尾 */
            oUl1.innerHTML += oUl1.innerHTML;
            //重新设置一下ul的宽
            oUl1.style.width = 220 * 8 + 'px';

            setInterval(function(){
                oUl1.style.left = oUl1.offsetLeft - 2 + 'px';
                if(oUl1.offsetLeft <= -oUl1.offsetWidth / 2){
                    oUl1.style.left = "0px";
                }
            },30);
        }
    </script>
</head>
<body>
    <div id="div1">
        <ul id="ul1">
            <li>
                <img src="./img/1.jpg" alt="">
            </li>
            <li>
                <img src="./img/2.jpg" alt="">
            </li>
            <li>
                <img src="./img/3.jpg" alt="">
            </li>
            <li>
                <img src="./img/4.jpg" alt="">
            </li>
        </ul>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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: 200px; height: 200px; margin: 10px; float: left;}
        #ul1 li img{width: 100%; height: 100%;}
        #ul1{position: absolute; left: 0px;}
        #div1{width: 880px; height: 220px; border: 1px solid black; margin: 50px auto; position: relative; overflow: hidden;}
    </style>
    <script src="../startMove.js"></script>
    <script>
        window.onload = function(){
            var oDiv1 = document.getElementById("div1");
            var oUl1 = document.getElementById("ul1");

            /* 直接把这四张图片再添加到末尾 */
            oUl1.innerHTML += oUl1.innerHTML;
            //重新设置一下ul的宽
            oUl1.style.width = 220 * 8 + 'px';

            setInterval(function(){
                //让ul向左运动一个图片的宽
                startMove(oUl1,{left: oUl1.offsetLeft - 220}, function(){
                    if(oUl1.offsetLeft <= -oUl1.offsetWidth / 2){
                        oUl1.style.left = '0px';
                    }
                });
            }, 2000);
        }
    </script>
</head>
<body>
    <div id="div1">
        <ul id="ul1">
            <li>
                <img src="./img/1.jpg" alt="">
            </li>
            <li>
                <img src="./img/2.jpg" alt="">
            </li>
            <li>
                <img src="./img/3.jpg" alt="">
            </li>
            <li>
                <img src="./img/4.jpg" alt="">
            </li>
        </ul>
    </div>
</body>
</html>