js小案例(排他)

排他的就是排除所有人,然后设置自己

上案例效果是(其实就运用了一个移入移出事件)


主干结构

<div class="box" id = "box">
        <ul>
            <li><img src="0.jpg" alt=""></li>
            <li><img src="0.jpg" alt=""></li>
            <li><img src="0.jpg" alt=""></li>
            <li><img src="0.jpg" alt=""></li>
            <li><img src="0.jpg" alt=""></li>
            <li><img src="0.jpg" alt=""></li>
        </ul>
    </div>

css代码

<style>
         *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: black;
        }
        .box{
            margin: 150px auto;
            width: 700px;
            height: 430px;
            border: 1px solid white;
        }
        ul li{
            margin-top: 10px;
            margin-left: 10px;
            float: left;
            cursor: pointer;
        }
        img{
            width: 220px;
            height: 200px;
            display: block;
            border: 0;
        }
    </style>

js代码

<script>
        var lis = document.querySelectorAll('li');
        var box = document.getElementById('box');
        for(var i = 0; i < lis.length; i++){
            lis[i].onmouseenter = function (){
            	// 排他思想，让所有的li的透明度为0.4
                for(var j = 0; j < lis.length; j++){
                    lis[j].style.opacity = 0.4;
                }
                // 给自己的透明度设为 1 
                this.style.opacity = 1;
            }
        }
        box.onmouseleave = function (){
            for(var i = 0; i < lis.length; i++){
                lis[i].style.opacity = 1;
            }
        }
    </script>