面试 QuarkXPress 底层架构 网络视频直播系统 跨域 阿里巴巴 templates cakephp ssh fonts datagrid nlp vue版本 后台界面 python转16进制 matlab中log函数 oracle取第一条数据 matlab颜色代码 jquery获取兄弟节点 vue与html5 oracle分析函数 python最大值 python环境配置 python中的index python安装 java遍历 java中collection javascript实例 tar文件怎么打开 flash相册制作 stl2stp 今日头条邀请码 数独软件 国都证券官网下载 jsp源代码 梦想世界答题器 0000008e 屏幕录像机 苹果x怎么用 chrome访问助手
当前位置: 首页 > 学习教程  > 编程语言

js排他思想

2020/12/28 19:22:15 文章标签:

js排他思想 排他的意思就是排除所有人(包括自己),然后设置自己 下面让我们通过一个小案例来解释排他思想这是鼠标移入前的效果图 这是鼠标移入后的效果图 话不多说&#xff0c;首先我们先来写HTML和CSS代码 <div class"box" id "box"><ul>&…

js排他思想

排他的意思就是排除所有人(包括自己),然后设置自己
下面让我们通过一个小案例来解释排他思想

这是鼠标移入前的效果图

鼠标移入前的效果图

这是鼠标移入后的效果图

鼠标移入后的效果
话不多说,首先我们先来写HTMLCSS代码

	<div class="box" id = "box">
        <ul>
            <li><img src="images/01.jpg" alt="图片出错"></li>
            <li><img src="images/02.jpg" alt="图片出错"></li>
            <li><img src="images/03.jpg" alt="图片出错"></li>
            <li><img src="images/04.jpg" alt="图片出错"></li>
            <li><img src="images/05.jpg" alt="图片出错"></li>
            <li><img src="images/06.jpg" alt="图片出错"></li>
        </ul>
    </div>
        *{
            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: 640px;
            height: 402px;
            border: 1px solid white;
        }
        ul li{
            margin-top: 10px;
            margin-left: 10px;
            float: left;
            cursor: pointer;
        }
        img{
            display: block;
            border: 0;
        }

静态页面完成了,我们就来写js代码。

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

这样的一个简单的通过排他思想实现小案例就完成了


本文链接: http://www.dtmao.cc/news_show_550216.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?