js基础第二篇（DOM完成运动函数）

冷不防 2022-12-16 09:23 44阅读 0赞

# DOM高级-----运动 #

## tab切换(封装做项目用) ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <style>
    ul,ol{
         
        list-style-type: none;
        padding: 0;
        margin: 0;
    }
    .tab:hover{
         
        cursor: pointer;
    }
    .tab{
         
        width: 500px;
        height: 300px;
        border:1px solid #000;
    }
    .tab ul{
         
        height: 50px;
        display:flex;
        justify-content: space-evenly;
        align-items: center;
        background-color: pink;
    }
    .tab ul li{
         
        width: 100px;
        height: 30px;
        line-height: 30px;
        font-size:20px;
        font-weight:bold;
        background-color: #ff0;
        text-align: center;
    }
    .tab ul li.active{
         
        background-color: #0f0;
        color:#00f;
    }
    .tab ol{
         
        height: 250px;
    }
    .tab ol li,.tab ol li img{
         
        width: 500px;
        height: 250px;
    }
    .tab ol li{
         
        display:none;
    }
    .tab ol li.active{
         
        display:block;
    }
    </style>
    <body>
    <div class="tab">
        <ul>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <ol>
            <li class="active">
                <a href="#">
                    <img src="./images/1.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/2.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/3.jpg" alt="">
                </a>
            </li>
        </ol>
    </div>
    </body>
    <script type="text/javascript">
    // 最先获取元素，要操作的所有的元素，都在这里获取到
    var tab = document.querySelector('.tab');
    var titles = tab.querySelectorAll('ul li'); // 使用父元素来获取后代元素
    var contents = tab.querySelectorAll('ol li');
    // 给3个ul下的li绑定鼠标移入事件
    for(var i=0;i<titles.length;i++){
         
        // 1.给点击事件外面包一个自调用函数
        (function(i){
         
            titles[i].onmouseover = function(){
         
                // 清别人加自己
                for(var j=0;j<titles.length;j++){
         
                    titles[j].className = '';
                }
                this.className = 'active';
                for(var j=0;j<contents.length;j++){
         
                    contents[j].className = '';
                }
                // 给跟自己下标一样的ol下的li加active
                // 关键在于找自己下标 - 此时的i就是自己的下标
                contents[i].className = 'active';
            }
        })(i)
    
    //     // 2.将每个li的下标绑定到自己的一个属性上
    //     // titles[i].setAttribute("index",i);
    //     // titles[i].onmouseover = function(){
         
    //     //     // 清别人加自己
    //     //     for(var j=0;j<titles.length;j++){
         
    //     //         titles[j].className = '';
    //     //     }
    //     //     this.className = 'active';
    //     //     for(var j=0;j<contents.length;j++){
         
    //     //         contents[j].className = '';
    //     //     }
    //     //     // 给跟自己下标一样的ol下的li加active
    //     //     // 关键在于找自己下标 - 此时的i就是自己的下标
    //     //     contents[this.getAttribute("index")].className = 'active';
    //     // }
        
    }
    
    
    // 3.利用let可以创建作用域的特性来获取到下标
    // for(let i=0;i<titles.length;i++){
         
    //     titles[i].onmouseover = function(){
         
    //         // 清别人加自己
    //         for(var j=0;j<titles.length;j++){
         
    //             titles[j].className = '';
    //             contents[j].className = '';
    //         }
    //         titles[i].className = contents[i].className = 'active';
    //     }
    // }
    
    // 4.利用that来清楚别人的active
    // var titleThat = tab.querySelector("ul li.active");
    // var contentThat = tab.querySelector('ol li.active')
    // for(let i=0;i<titles.length;i++){
         
    //     titles[i].onmouseover = function(){
         
    //         titleThat.className = contentThat.className = '';
    //         titles[i].className = contents[i].className = 'active';
    //         titleThat = titles[i]
    //         contentThat = contents[i]
    //     }
    // }
    
    // 5.利用事件委托
    // let ul = tab.querySelector('ul');
    // var titleThat = tab.querySelector("ul li.active");
    // var contentThat = tab.querySelector('ol li.active')
    // for(let i=0;i<titles.length;i++){
         
    //     titles[i].setAttribute("index",i)
    // }
    // ul.addEventListener('mouseover',tabChange);
    // function tabChange(ev){
         
    //     let e = ev || window.event;
    //     let target = e.target || e.srcElement;
    //     if(target.nodeName == 'LI' && target.className != 'active'){
         
    //         titleThat.className = contentThat.className = '';
    //         target.className = 'active';
    //         titleThat = target;
    //         contents[target.getAttribute("index")].className = 'active';
    //         contentThat = contents[target.getAttribute("index")]
    //     }
    // }
    </script>
    </html>

## 轮播图 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <style>
    ul,ol,a{
         
        list-style: none;
        padding: 0;
        margin: 0;
        text-decoration: none;
        color:#000;
    }
    .carousel{
         
        width: 500px;
        height: 300px;
        border:1px solid #f00;
        position: relative;
    }
    .carousel ul,.carousel ul li,.carousel ul li a img{
         
        width: 500px;
        height: 300px;
    }
    .carousel ul li{
         
        display:none;
    }
    .carousel ul li.active{
         
        display:block;
    }
    .carousel>a{
         
        position: absolute;
        width: 20px;
        height: 40px;
        color:#fff;
        font-weight: bold;
        text-align: center;
        line-height:40px;
        font-size:18px;
        top:50%;
        transform: translateY(-50%);
        background-color: rgba(10,10,10,.5);
    }
    .carousel>a.leftBtn{
         
        left:0;
    }
    .carousel>a.rightBtn{
         
        right:0;
    }
    .carousel ol{
         
        width: 60px;
        height: 20px;
        background-color: rgba(255,255,255,.3);
        position: absolute;
        left:50%;
        transform: translateX(-50%);
        bottom:10px;
        border-radius:10px;
    }
    .carousel ol li{
         
        width: 10px;
        height: 10px;
        border-radius:50%;
        background-color: #999;
        float:left;
        margin:5px;
    }
    .carousel ol li.active{
         
        background-color: #aa0000;
    }   
    .carousel:hover{
         
        cursor: pointer;
    }
    </style>
    <body>
        <div class="carousel">
            <ul>
                <li class="active"><a href="#"><img src="./images/1.jpg" alt=""></a></li>
                <li><a href="#"><img src="./images/2.jpg" alt=""></a></li>
                <li><a href="#"><img src="./images/3.jpg" alt=""></a></li>
            </ul>
            <ol>
                <li class="active"></li>
                <li></li>
                <li></li>
            </ol>
            <a href="javascript:;" class="leftBtn"><</a>
            <a href="javascript:;" class="rightBtn">></a>
        </div>
    </body>
    <script type="text/javascript">
    // 获取元素
    const carousel = document.querySelector('.carousel');
    const imgsLi = carousel.querySelectorAll('ul li');
    const dotsLi = carousel.querySelectorAll('ol li');
    const leftBtn = carousel.querySelector('a.leftBtn');
    const rightBtn = carousel.querySelector('a.rightBtn');
    // 定义当前显示的li的下标
    var index = 0;
    // 定义定时器变量
    var timerId = null;
    // 先做右按钮点击事件
    rightBtn.onclick = function(){
         
        //  轮播图切换图片其实是在切换当前显示的那个li的下标
        index++;
        if(index==imgsLi.length){
         
            index=0
        }
        for(var i=0;i<imgsLi.length;i++){
         
            imgsLi[i].className = '';
            dotsLi[i].className = '';
        }
        imgsLi[index].className = 'active';
        dotsLi[index].className = 'active';
    }
    
    leftBtn.onclick = function(){
         
        //  轮播图切换图片其实是在切换当前显示的那个li的下标
        index--;
        if(index<0){
         
            index=imgsLi.length-1
        }
        for(var i=0;i<imgsLi.length;i++){
         
            imgsLi[i].className = '';
            dotsLi[i].className = '';
        }
        imgsLi[index].className = 'active';
        dotsLi[index].className = 'active';
    }
    
    for(let i=0;i<dotsLi.length;i++){
         
        dotsLi[i].onclick = function(){
         
            index=i
            for(var j=0;j<imgsLi.length;j++){
         
                imgsLi[j].className = '';
                dotsLi[j].className = '';
            }
            imgsLi[index].className = 'active';
            dotsLi[index].className = 'active';
        }
    }
    
    timerId = setInterval(function(){
         
        //  轮播图切换图片其实是在切换当前显示的那个li的下标
        index++;
        if(index==imgsLi.length){
         
            index=0
        }
        for(var i=0;i<imgsLi.length;i++){
         
            imgsLi[i].className = '';
            dotsLi[i].className = '';
        }
        imgsLi[index].className = 'active';
        dotsLi[index].className = 'active';
    },1500)
    
    carousel.onmouseover = function(){
         
        clearInterval(timerId);
    }
    
    carousel.onmouseout = function(){
         
        timerId = setInterval(function(){
         
            //  轮播图切换图片其实是在切换当前显示的那个li的下标
            index++;
            if(index==imgsLi.length){
         
                index=0
            }
            for(var i=0;i<imgsLi.length;i++){
         
                imgsLi[i].className = '';
                dotsLi[i].className = '';
            }
            imgsLi[index].className = 'active';
            dotsLi[index].className = 'active';
        },1500)
    }
    
    
    </script>
    </html>

## 简单运动 ##

## 简单函数封装成函数 ##

## 多属性运动 ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .box {
         
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
                left: 0;
                top: 0;
            }
        </style>
        <title></title>
    
    </head>
    
    <body>
        <div class="box"></div>
    </body>
    <script>
        function move(ele, obj) {
         
            for (let attr in obj) {
         
                let timer = setInterval(function () {
         
                    var l = getStyle(ele, attr);
                    l = parseInt(l);
                    l += 2;
                    if (l >= obj[attr]) {
         
                        clearInterval(timer);
                    }
                    ele.style[attr] = l + "px";
                }, 20)
            }
        }
    
        var box = document.querySelector(".box");
        box.onclick = function () {
         
            move(box, {
         
                width:200,
                heigth:400,
                top:200,
                left:400
            });
        }
    
    
    
    
        //获取样式
        function getStyle(ele, attr) {
         
            try {
         
                return window.getComputedStyle(ele)[attr];
            } catch (e) {
         
                return ele.currentStyle[attr];
            }
        }
    
    </script>
    
    </html>

## 解决多属性运动的不均匀 ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .box {
         
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
                left: 0;
                top: 0;
            }
        </style>
        <title></title>
    
    </head>
    
    <body>
        <div class="box"></div>
    </body>
    <script>
        function move(ele, obj) {
         
            for (let attr in obj) {
         
                let target = obj[attr];
                let timer = setInterval(function () {
         
                    var l = getStyle(ele, attr);
                    l = parseInt(l);
                    let speed =target/100;
                    l += speed;
                    if (l >= obj[attr]) {
         
                        clearInterval(timer);
                    }
                    ele.style[attr] = l + "px";
                }, 20)
            }
        }
    
        var box = document.querySelector(".box");
        box.onclick = function () {
         
            move(box, {
         
                width:200,
                heigth:400,
                top:200,
                left:400
            });
        }
    
    
    
    
        //获取样式
        function getStyle(ele, attr) {
         
            try {
         
                return window.getComputedStyle(ele)[attr];
            } catch (e) {
         
                return ele.currentStyle[attr];
            }
        }
    
    </script>
    
    </html>

这种算法可以有这个思路，但是width就是会在left没执行完时先结束

另一种思路：

每次走剩下的百分之1

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .box {
         
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
                left: 0;
                top: 0;
            }
        </style>
        <title></title>
    
    </head>
    
    <body>
        <div class="box"></div>
    </body>
    <script>
        function move(ele, obj) {
         
            for (let attr in obj) {
         
                let target = obj[attr];
                let timer = setInterval(function () {
         
                    var l = getStyle(ele, attr);
                    l = parseInt(l);
                    let speed =(target-l)/20;//不除以100是因为慢，换成20快点
                    speed = Math.ceil(speed);
                    l += speed;
                    if (l >= target) {
         //只能从左往右，改成==，最终1个像素一个像素的移动，从右往左但是停不下来（因为负数向上取整会到达0，停不下来，所以需要对speed判断：大于0向上取整，小于0向下取整）
                        clearInterval(timer);
                    }
                    ele.style[attr] = l + "px";
                }, 20)
            }
        }
    
        var box = document.querySelector(".box");
        box.onclick = function () {
         
            move(box, {
         
                width:200,
                heigth:400,
                top:200,
                left:400
            });
        }  //获取样式
        function getStyle(ele, attr) {
         
            try {
         
                return window.getComputedStyle(ele)[attr];
            } catch (e) {
         
                return ele.currentStyle[attr];
            }
        }
    
    </script>
    
    </html>

修改后：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .box {
         
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
                left: 0;
                top: 0;
            }
        </style>
        <title></title>
    
    </head>
    
    <body>
        <div class="box"></div>
    </body>
    <script>
        function move(ele, obj) {
         
            for (let attr in obj) {
         
                let target = obj[attr];
                let timer = setInterval(function () {
         
                    var l = getStyle(ele, attr);
                    l = parseInt(l);
                    let speed =(target-l)/20;//不除以100是因为慢，换成20快点
                  if(speed>0){
         
                      Math.ceil(speed);
                  }else {
         
                      speed=Math.floor(speed);
                  }
                    l += speed;
                    if (l >= target) {
         //只能从左往右，改成==，最终1个像素一个像素的移动，从右往左但是停不下来（因为负数向上取整会到达0，停不下来，所以需要对speed判断：大于0向上取整，小于0向下取整）
                        clearInterval(timer);
                    }
                    ele.style[attr] = l + "px";
                }, 20)
            }
        }
    
        var box = document.querySelector(".box");
        box.onclick = function () {
         
            move(box, {
         
                width:200,
                heigth:400,
                top:200,
                left:400
            });
        }
    
    
    
    
    
    
        //获取样式
        function getStyle(ele, attr) {
         
            try {
         
                return window.getComputedStyle(ele)[attr];
            } catch (e) {
         
                return ele.currentStyle[attr];
            }
        }
    
    </script>
    
    </html>

## 透明度处理(上述方法处理透明度会造成停不下来，透明度不断循环) ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <style>
        .box {
         
            width: 100px;
            height: 100px;
            background-color: #f00;
            position: absolute;
            left: 400px;
            top: 0;
        }
    </style>
    
    <body>
        <div class="box"></div>
    </body>
    <script type="text/javascript">
    var box = document.querySelector('.box');
    box.onclick = function () {
         
        move(box, {
         
            width:300,
            left:0,
            top:200,
            opacity:0.5
        })
        // 该函数，让这个函数支持多个属性的运动
    }
    
    // 如果参数多了，就使用对象来代替他
    function move(ele, obj){
         
        for(let attr in obj){
         
            let timerId = setInterval(function () {
         
                let target = obj[attr]; 
                if(attr=="opacity"){
         
                    target *= 100
                }
                let l = getStyle(ele, attr);
                if(attr == "opacity"){
         
                    l *= 100 
                } 
                l = parseInt(l); 
                let speed = (target-l)/20
                if(speed>0){
         
                    speed = Math.ceil(speed) 
                }else{
         
                    speed = Math.floor(speed) 
                }
                l += speed; 
                if(l==target){
          
                    clearInterval(timerId);
                  
                }else{
         
                    if(attr == "opacity"){
         
                        ele.style[attr] = l/100 
                    }else{
         
                        ele.style[attr] = l + "px"
                    }
                    console.log(123);
                }
            }, 50) 
        }
    }
    
    // 获取样式的函数
    function getStyle(ele, attr) {
         
        try {
         
            return window.getComputedStyle(ele)[attr];
        } catch (e) {
         
            return ele.currentStyle[attr];
        }
    }
    </script>
    
    </html>

## 处理运动函数 ##

希望全部结束的时候完成一件事：

如何判定完全结束，怎么执行那件事

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <style>
        .box {
         
            width: 100px;
            height: 100px;
            background-color: #f00;
            position: absolute;
            left: 400px;
            top: 0;
        }
    </style>
    
    <body>
        <div class="box"></div>
    </body>
    <script type="text/javascript">
    var box = document.querySelector('.box');
    box.onclick = function () {
         
        move(box, {
         
            width:300,
            left:0,
            top:200,
            opacity:0.5
        },function(){
         
            box.style.backgroundColor = '#0f0'
            move(box,{
         
                width:100,
                left:400,
                top:400,
                opacity:1
            },function(){
         
                console.log("第二次运动结束");
            })
        })
    }
    
    // 等到所有属性都运动结束以后，做一件事
    function move(ele, obj, handler){
         
        let k = 0;
        for(let attr in obj){
         
            let timerId = setInterval(function () {
         
                let target = obj[attr]; 
                if(attr=="opacity"){
         
                    target *= 100
                }
                let l = getStyle(ele, attr);
                if(attr == "opacity"){
         
                    l *= 100 
                } 
                l = parseInt(l); 
                let speed = (target-l)/20
                if(speed>0){
         
                    speed = Math.ceil(speed) 
                }else{
         
                    speed = Math.floor(speed) 
                }
                l += speed; 
                if(l==target){
          
                    clearInterval(timerId);
                    k++;
                    let i = 0;
                    for(let a in obj){
         
                        i++
                    }
                    if(i==k){
         
                        handler()
                    }
                    if(attr == "opacity"){
         
                        ele.style[attr] = l/100 
                    }else{
         
                        ele.style[attr] = l + "px"
                    }
                }else{
         
                    if(attr == "opacity"){
         
                        ele.style[attr] = l/100 
                    }else{
         
                        ele.style[attr] = l + "px"
                    }
                }
            }, 50) 
        }
    }
    
    // 获取样式的函数
    function getStyle(ele, attr) {
         
        try {
         
            return window.getComputedStyle(ele)[attr];
        } catch (e) {
         
            return ele.currentStyle[attr];
        }
    }
    </script>
    
    </html>

## 运动函数的封装 ##

// 运动函数
    function move(ele,obj,handler=()=>{}){
        let k = 0;
        for(let attr in obj){
            let target = obj[attr];
            if(attr == 'opacity'){
                target *= 100
            }
            let timerId = setInterval(function(){
                let currentStyle = getStyle(ele,attr);
                if(attr == 'opacity'){
                    currentStyle *= 100
                }
                currentStyle = parseInt(currentStyle);
                let speed = (target - currentStyle)/10
                if(speed>0){
                    speed = Math.ceil(speed)
                }else{
                    speed = Math.floor(speed);
                }
                currentStyle += speed;
                if(currentStyle == target){
                    if(attr == 'opacity'){
                        ele.style[attr] = currentStyle/100
                    }else{
                        ele.style[attr] = currentStyle + "px"
                    }
                    clearInterval(timerId);
                    k++;
                    let i = 0;
                    for(let _ in obj){
                        i++
                    }   
                    if(k==i){
                        handler()
                    }
                }else{
                    if(attr == 'opacity'){
                        ele.style[attr] = currentStyle/100
                    }else{
                        ele.style[attr] = currentStyle + "px"
                    }
                }
            },50)
        }
    }
    
    // 获取样式的函数
    function getStyle(ele,attr){
        try{
            return getComputedStyle(ele)[attr];
        }catch(e){
            return ele.currentStyle[attr];
        }
    }

引入直接用