登录  /  注册
博主信息
博文 145
粉丝 7
评论 7
访问量 157723
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
02月28日作业:JS实战(选项卡、懒加载、渐隐效果、轮播图)
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
原创
1445人浏览过

作业一:相关知识点:

一、选项卡相关知识点:
1、document.querySeclertorAll();:返回NOdeList集合,可以直接使用NodeList.forEach(function(item,key,arr){});
2、addEventListener(‘事件行为字符串’,函数,false);
3、弹窗:alert();
4、冒泡事件:事件从下往上触发
   委托事件:父级添加事件监听,判断触发事件的对象
5、ev.target:触发事件的对象;ev.type:事件的行为
6、控制class的新对象:classList
classList.add();:为标签元素添加class的样式值
classList.remove():移除元素已有的class样式
classList.replace('foo','bar'):将类值 “foo” 替换成 “bar”;
classList.contains('active'):检索当前类属性中有无active属性值;
7、自定义html标签的自定义属性:data-index='1'
data:系统默认的
index:用户自定义的
二、懒加载相关知识点
1、元素的移动偏量:offsetTop,offsetLeft
元素在页面空间中的可见空间大小:offsetWidth,offsetHeight;(包含内边距和boder)
2、元素客户区大小:视窗大小(包含内边距)
clientHeight,clientWidth;
3、ev.target.srollTop:当前事件对象的滚动大小;
4、判断对象是否进入可视区域,对象的偏移量是否小于可视区域和滚动大小之和;
三、渐隐效果和轮播图相关知识点
1、css中透明度属性:opacity:0;
2、获取对象的生成的样式属性对象集合:window.getComputedStyle();
3、parseInt():转换为整数;
4、setInterval(function(){},1000); 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。setInterval() 方法会不停地调用函数,直到 clearInterval(timer); 被调用或窗口被关闭;
5、document.createElement();创建元素;
6、自定义html标签的自定义属性:data-index='1'
data:系统默认的i
index:用户自定义的
调用:setdata.index;
7、nextElementSibling:下一个元素;previousElmentSibling;上一个元素;
8、dispatchEvent() 方法给节点分派一个合成事件。

作业二:代码演示

一、选项卡案例
1、代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>选项卡</title>    <style>        * {            margin: 0;            padding: 0;        }        .shows {            margin:auto;            width: 600px;            height: 500px;            background-color: red;        }        .shows>ul {            margin: auto;            width: 400px;            height: 50px;            background-color: bisque;            display: flex;            justify-content: space-around;            /* text-align: center; */        }        .shows>ul> .li {            list-style: none;            text-align: center;            line-height: 50px;            cursor:pointer;        }        .shows> ul > .act{            color:coral;        }        .shows > .img {            width: 600px;            height: 500px;        }        .shows > .imgs > .img {            width: 600px;            height: 450px;            /* display: none; */            display: none;        }        .shows> .imgs >.active{            display:block;        }    </style></head><body>    <div class="shows">        <ul>            <li class="li act" data-index="1">图片1</li>            <li class="li" data-index="2">图片2</li>            <li class="li" data-index="3">图片3</li>        </ul>        <div class="imgs">            <img src="images/1.jpg" alt="" class="img active" data-index="1">            <img src="images/2.jpg" alt="" class="img" data-index="2">            <img src="images/5.jpg" alt="" class="img" data-index="3">        </div>    </div>    <script>        var ul=document.querySelector('ul');        uls=Array.from(ul.children);        // console.log(ul);        var imgs=document.querySelector('.imgs');        imgss=Array.from(imgs.children);        // imgss.forEach(element => {        //     console.log(element);        // });        // console.log(imgs);        ul.addEventListener('click',showimg,false);        function showimg(ev){            if(ev.target.nodeName==='LI'){            uls.forEach(function(tab){tab.classList.remove('act')});            ev.target.classList.add('act');            imgss.forEach(function(img){                // console.log(img);                img.classList.remove('active')                });            imgss.forEach(function(img){                if(img.dataset.index===ev.target.dataset.index){                    img.classList.add('active');                }            })}        }    </script></body></html>

2、演示结果:

3、问题委托事件:委托父级式,在判断事件行为是,空白处的行为会到结果造成干扰,所有对于触发事件对象进行判断!免费干扰!
二、懒加载
1、代码:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <div>        <img src="images/temp.jpg" alt="" data-src="images/1.jpg">        <img src="images/temp.jpg" alt="" data-src="images/2.jpg">        <img src="images/temp.jpg" alt="" data-src="images/3.jpg">        <img src="images/temp.jpg" alt="" data-src="images/4.jpg">        <img src="images/temp.jpg" alt="" data-src="images/5.jpg">        <img src="images/temp.jpg" alt="" data-src="images/6.jpg">        <img src="images/temp.jpg" alt="" data-src="images/7.jpg">        <img src="images/temp.jpg" alt="" data-src="images/8.jpg">        <img src="images/temp.jpg" alt="" data-src="images/9.jpg">        <img src="images/temp.jpg" alt="" data-src="images/10.jpg">        <img src="images/temp.jpg" alt="" data-src="images/11.jpg">        <img src="images/temp.jpg" alt="" data-src="images/12.jpg">        <img src="images/temp.jpg" alt="" data-src="images/13.jpg">        <img src="images/temp.jpg" alt="" data-src="images/14.jpg">        <img src="images/temp.jpg" alt="" data-src="images/15.jpg">        <img src="images/temp.jpg" alt="" data-src="images/16.jpg">        <img src="images/temp.jpg" alt="" data-src="images/17.jpg">        <img src="images/temp.jpg" alt="" data-src="images/18.jpg">        <img src="images/temp.jpg" alt="" data-src="images/19.jpg">        <img src="images/temp.jpg" alt="" data-src="images/20.jpg">        <img src="images/temp.jpg" alt="" data-src="images/21.jpg">    </div>    <script>        var imgs=document.querySelectorAll('img');        // console.log(imgs);        var height=document.documentElement.clientHeight;        // console.log(height);        window.addEventListener('scroll',function(){            var scroll=document.documentElement.scrollTop;            imgs.forEach(function(img){                // console.log(img);                if(img.offsetTop<=(height+scroll)){                    img.src=img.dataset.src;                }            })        },false);    </script></body></html>

2效果运行图:

三、渐隐效果
1、代码:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>渐隐效果</title>    <style>        .img{            width: 400px;            height: 400px;            opacity: 0.5;        }    </style></head><body>    <img src="images/1.jpg" alt="" class="img"><br>    <button>显示</button>    <button>隐藏</button>      <script>        var img=document.querySelector('img');        // console.log(img);        var opacity=parseInt(window.getComputedStyle(img).opacity);        var btu1=document.querySelectorAll('button').item(0);        var btu2=document.querySelectorAll('button').item(1);        btu1.addEventListener('click',fadeIn,false);        btu2.addEventListener('click',fadeOut,false);        function fadeIn(){            var timer=setInterval(function () {                opacity+=0.05;                img.style.opacity=opacity;                if(opacity>=1){                    clearInterval(timer);                }            },200)        }        function fadeOut(){            var timer=setInterval(function () {                opacity-=0.05;                img.style.opacity=opacity;                if(opacity<=0){                    clearInterval(timer);                }            },200)        }    </script>  </body></html>

2、运行结果

四、轮播图案例
1、代码:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        * {            margin:0;            padding:0;        }        .shows{            width: 1000px;            height: 350px;            margin: auto;            position: relative;        }        .shows > div:nth-child(2){            position: absolute;            top:40%;            width: 1000px;            height: 350px;            display: flex;            justify-content: space-between;        }        .skip{            display: inline-block;            width: 40px;            height:60px;            background-color: rgba(253, 253, 253,0.3);            text-align: center;            line-height: 60px;            font-size: 30px;            font-style: 500;            color:rgba(0,0,0,0.2);            cursor: pointer;        }        .skip:hover{            background-color: rgba(253, 253, 253,0.6);         }        .shows > .banner > .img {            width: 1000px;            height: 350px;            display:none;        }        .shows > .banner > .act{            display:block;        }        .shows > .points{            position:absolute;            top:330px;            left:45%;            /* width: 200px; */            /* background-color: red; */            display: flex;        }        .shows > .points > .point{            display: inline-block;            width: 12px;            height: 12px;            margin: 0 5px;            background-color: white;            border-radius: 100%;            cursor: pointer;        }        .shows > .points > .active{            background-color: black;        }    </style></head><body>    <div class="shows">        <div class="banner">            <img src="banner/banner1.jpg" class="img act" alt="" data-index="1">            <img src="banner/banner2.jpg" class="img" alt="" data-index="2">            <img src="banner/banner3.jpg" class="img" alt="" data-index="3">            <img src="banner/banner4.jpg" class="img" alt="" data-index="4">        </div>        <div>            <span class="skip prev" >&lt;</span>            <span class="skip next">&gt;</span>        </div>        <div class="points">            <!-- 小圆点位置 -->        </div>    </div>    <script>        var imgs=document.querySelectorAll('img');        var points=document.querySelector('.points');        imgs.forEach(function(img,index){            var span=document.createElement('span');            if(index===0){                span.classList.add('point', 'active');            }else{                span.classList.add('point');            }            span.dataset.index=img.dataset.index;            points.appendChild(span);        });        points=document.querySelectorAll('.point');        Array.from(points).forEach(function(point){            point.addEventListener('click',function(ev){                // console.log(ev);                imgs.forEach(function(img){                    if(img.dataset.index===ev.target.dataset.index){                        imgs.forEach(function(img){                            img.classList.remove('act');                        });                        img.classList.add('act');                        pointBlcak(img.dataset.index);                    }                });            },false);        })        function pointBlcak(img){            points.forEach(function(point){                point.classList.remove('active');            });            points.forEach(function(point){                if(point.dataset.index===img){                    point.classList.add('active');                }            });        }    var skip=document.querySelectorAll('.skip');    skip.item(0).addEventListener('click',skipimg,false);       skip.item(1).addEventListener('click',skipimg,false);    function skipimg(ev){        var currentimg=null;        // console.log(imgs);        imgs.forEach(function(img){            if(img.classList.contains('act')){                currentimg=img;            }        })        // console.log(ev.target);        if(ev.target.classList.contains('prev')){            currentimg.classList.remove('act');            currentimg=currentimg.previousElementSibling;            // console.log(currentimg);            if(currentimg!==null && currentimg.nodeName==="IMG"){                currentimg.classList.add('act');            }else{                currentimg=imgs[imgs.length-1];                currentimg.classList.add('act');            }        }        if(ev.target.classList.contains('next')){            currentimg.classList.remove('act');            currentimg=currentimg.nextElementSibling;            // console.log(currentimg);            if(currentimg!==null && currentimg.nodeName==="IMG"){                currentimg.classList.add('act');            }else{                currentimg=imgs[0];                currentimg.classList.add('act');            }        }        pointBlcak(currentimg.dataset.index);    }     var shows=document.querySelector('.shows');    var timer=null;    shows.addEventListener('mouseover',function(){        clearInterval(timer);    },false);    shows.addEventListener('mouseout',function(){        var clickEvent=new Event('click');        timer=setInterval(function(){            skip.item(0).dispatchEvent(clickEvent);        },1500);    },false);    </script></body></html>

2、运行结果图:

批改老师:天蓬老师天蓬老师

批改状态:合格

老师批语:这几个案例, 很经典, 基本覆盖了常用的技巧 , 多练习
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学