js进阶之照片墙

最新推荐文章于 2024-02-27 22:47:48 发布

頑張ってちしじょ

最新推荐文章于 2024-02-27 22:47:48 发布

阅读量692

点赞数 1

本文链接：https://blog.csdn.net/weixin_45170547/article/details/91458209

版权

思路：都是动态的获取标签应该用到 createElement()比较多
1.获取需要的标签
2.动态的获取li标签（li是ul的子集）
3.动态的获取img标签（img是li的子集）
4.求出所有的li标签
5.求出所需的屏幕的高度和宽度（要主要防止照片的超出）
6.遍历，求出单个li的，随机的坐标分布，随机角度
7.监听点击事件（运用到排他思想）

    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        html, body, ul{
            width:100%;
            height:100%;
        }
        #pic{
            position:relative;
        }
        #pic li{
            width:200px;
            height:300px;
            box-shadow: 0 0 10px #000;
            position: absolute;
            transition: all 1s;
        }
        #pic li.current{    /*li.current：给li添加一个类选择current*/
            top:50% !important;
            left:50% !important;
            transform: rotate(0deg) translate(-50%, -50%) scale(1.5 ,1.5) !important;
            z-index: 999;
        }
    </style>
</head>
<body>
    <ul id="pic"></ul>
    <script src="js/underscore.js"></script>
    <script>
        window.onload = function (){
            //1.获取需要的标签
            var pic = document.getElementById("pic");
            //2.动态的创建Li标签  根据照片的多少进行创建
            for(var i = 0; i < 6; i++){
                //2.1创建Li标签
                var li = document.createElement("li");
                pic.appendChild(li);
                //2.2创建img标签
                var img = document.createElement("img");
                img.src = "img/"+(i+1)+".jpg";
                li.appendChild(img);
                img.style.width = "200px";
                img.style.height = "300px";
            }
            //3.求出所有的Li标签
            var allLis = pic.children;
            //4.求出屏幕和宽和高
            var screenW = document.documentElement.clientWidth - 200;
            var screenH = document.documentElement.clientHeight - 300;
            //5.遍历
            for(var j =0; j < allLis.length; j++){
                //5.1单个Life
                var li = allLis[j];
                //5.2随机分布  (第一种方法)
                li.style.left =_.random(0, screenW) + 'px';
                li.style.top = _.random(0, screenH) + 'px';
                // //5.2随机坐标 （第二种方法）
                // var x = Math.random() * screenW;
                // var y = Math.random() * screenH;
                // //5.3随机分布
                // li.style.left = x + "px";
                // li.style.top = y + "px";
                //5.3随机角度
                li.style.transform = 'rotate('+ _.random(0, 60) +'deg)';
                //监听点击事件
                li.onclick = function (){
                    //排他思想
                    for(var z = 0; z<allLis.length; z++){
                        allLis[z].className = "";
                    }
                    this.className = "current";
                }
            }
        }
    </script>

2.个人感觉：对于这种随机的事件，在css的属性上都要进行position属性
复合选择器： li.current： li.current：给li添加一个类选择current
排他思想就是：让所有都没有，然后让当前的有。