day15 运动（匀速运动函数、非行内样式函数、轮播图动态）

最新推荐文章于 2022-08-02 20:10:15 发布

destiny316_

最新推荐文章于 2022-08-02 20:10:15 发布

阅读量120

点赞数 1

本文链接：https://blog.csdn.net/destiny316_/article/details/118314643

版权

运动

1、匀速运动的left方向移动

思路：
对象点语法和[]方括号语法变量都用[ ]语法
给div添加点击事件设置定时器
1、获取物体的偏移量 var leader = odiv.offsetleft var step = 10;
2、让物理变化 var leader = leader + step
3、设置边界 step>0{leader>target} step<>>0{leader<target}
4、设置样式改变外观 odiv.style.left = leader + ‘px’
封装思路：
调用函数点击事件{ move(oDiv, 260,‘width’) }
函数封装{
清除定时器
定时器{
1、设置物理的偏移量 var leader = odiv.offsetleft var step = 10;
非行内样式 var leader = parseInt(getStyle(obj, attr))
2、让物理变化 var leader = leader + step
3、设置边界 step>0{leader>target} step<>>0{leader<target}
4、设置样式改变外观 odiv.style.left = leader + ‘px’
非行内样式 odiv.style[attr] = leader + ‘px’
}

}

 <style>
     div {
         width: 100px;
         height: 100px;
         background-color: pink;
         position: absolute;
         left: 600px;
     }
 </style>
</head>

<body>
 <button>运动到500px</button>
 <div></div>
 <script>
     var oBtn = document.querySelector('button');
     var oDiv = document.querySelector('div');
     var timer = null;
     /*
     思路：点击按钮，发生什么事了
     1、获取元素的左偏移量   var leader = box.offsetLeft;   var step = 10
     2、让数据变化   leader = leader + step;
     3、设置样式。改变外观
     */
     oBtn.onclick = function () {
         move(oDiv, 10)
     }

     // 任意物体 ，任意目标
     // 哪个物体（div）  目标（target）
     function move(obj, target) {
         clearInterval(timer)
         timer = setInterval(function () {
             // 1、获取元素的左偏移量   
             var leader = obj.offsetLeft;
             // var step = -10;
             // 当目标位置大于起始位置 正向运动，反之 反向运动
             var step = (target > leader) ? 5 : -5;
             // 2、让数据变化   
             leader = leader + step;
             // 3. 边界设置  运动到哪个目标位置，
             // if (step > 0) { // 正向运动
             //     if (leader >= target) { //随着leader越来越大，大到什么程度，大到大于target，一律按目标值来处理
             //         leader = target;
             //         clearInterval(timer)
             //     }
             // } else {
             //     if (leader <= target) { // 反向运动，leader越来越小，小到target时，
             //         leader = target;
             //         clearInterval(timer)
             //     }
             // }
             if (Math.abs(leader - target) <= Math.abs(step)) {
                 leader = target;
                 clearInterval(timer)
             }
             // 4、设置样式。改变外观
             obj.style.left = leader + 'px'
         }, 15)
     }

2、匀速运动的双方运动： function move(obj, target, attr) {}

   //封装函数左右上下移动：
   // // 给div添加点击事件  调用函数
   oBtn.onclick = function () {
       // move(oDiv, 90,'left')
       move(oDiv, 260, 'width')//宽度从100变为260
       move(oDiv, 460, 'height')//高度从100变为460   在这个函数里  没有同时达到目标（只要有一个达到目标，定时器就清除了）

   }

   //封装函数left移动：
   function move(obj, target, attr) {
       //需要每次在定时器开始前清理上一个定时器
       clearInterval(timer)
       // 添加定时器
       timer = setInterval(function () {
           //1、获取物体的偏移量
           // var leader = obj.offsetLeft
           // var leader=getStyle(obj, attr) //带有px单位
           var leader = parseInt(getStyle(obj, attr))  //带有px单位  转为数值
           // var step = 10;
           // 对step进行判断
           var step = (target > leader) ? 10 : -10  //当target>leader时  是正向移动 向右  当target<leader时  是反向移动 向左  leader从大到小
           //2、让物理变化
           leader = leader + step
           //3、设置边界
           // if (step > 0) {
           //     if (leader > target) {
           //         leader = target;
           //         clearInterval(timer)
           //     }

           // } else {
           //     if (leader < target) {
           //         leader = target;
           //         clearInterval(timer)
           //     }
           // }
           // 设置边界的另一种方法：
           if (Math.abs(leader - target) <= Math.abs(step)) {
               leader = target
               clearInterval(timer)
           }

           //4、设置样式 改变外观+px
           obj.style[attr] = leader + 'px'      //对象点语法和[]方括号语法   变量都用[]语法
       }, 15)
   }

3、匀速运动的多方向同时进行：json

    <script>
        var oBtn = document.querySelector('button');
        var oDiv = document.querySelector('div');
        var timer = null;
        /*
        思路：点击按钮，发生什么事了
        1、获取元素的左偏移量   var leader = box.offsetLeft;   var step = 10
        2、让数据变化   leader = leader + step;
        3、设置样式。改变外观
        */
        oBtn.onclick = function () {
            // move(oDiv, 400,'top')
            // move(oDiv, 400,'width')
            // move(oDiv, 400,'height')
            move(oDiv, { "width": 200, "height": 300, "left": 100, 'top': 100 }, function () {
                move(oDiv, { "width": 600, "height": 500, "left": 300, 'top': 300 })
            })
        }
        // 没有同时达到目标（只要有一个达到目标，定时器就清除了）
        // 所有的达到目标。再清除定时
        //  fn的执行：当清理完定时器之后，会执行fn函数
        function move(obj, json, fn) {// {"width":400,"height":500,"left":300}
            clearInterval(timer)
            timer = setInterval(function () {
                var flag = true;  //假设全部都到达目标
                for (var k in json) {
                    var leader = parseInt(getStyle(obj, k)); //100
                    var step = (json[k] > leader) ? 5 : -5;
                    leader = leader + step;
                    if (Math.abs(leader - json[k]) <= Math.abs(step)) {
                        leader = json[k];
                    }
                    // 假设有一个未达到目标，就设置为false，等到全部走完，falg = true
                    if (leader != json[k]) {
                        flag = false;
                    }
                    obj.style[k] = leader + 'px'
                }

                if (flag) {
                    clearInterval(timer)
                    // if (fn) {
                    //     fn();// 结束动画之后调用
                    // }
                    fn&&fn(); //等价于上面代码（fn为true，调用fn()）
                }
            }, 15)
        }


        // 获取非行间样式的那段代码
        function getStyle(obj, attr) {
            if (obj.currentStyle) {
                return obj.currentStyle[attr]
            } else {
                return window.getComputedStyle(obj, null)[attr]
            }
        }


        console.log(getStyle(oDiv, 'width')); //100px
        console.log(getStyle(oDiv, 'height'));//100px
        console.log(getStyle(oDiv, 'left'));//600px

4、获取菲行间样式的封装函数

        // 获取非行间样式的那段代码
        function getStyle(obj, attr) {
            if (obj.currentStyle) {
                return obj.currentStyle[attr]
            } else {
                return window.getComputedStyle(obj, null)[attr]
            }
        }

案例（轮播图动态滚动）

思路：写出css样式获取元素
遍历ol.li for (var i = 0; i < oOlLis.length; i++) {
1.给ol.li 添加下标 oOlLis[i].index = i;
2.添加点击事件 oOlLis[i].onclick = function () {
3.二次遍历ol.li for (var j = 0; j < oOlLis.length; j++) {
点击元素下标的类名为空} oOlLis[j].className = ‘’
点击元素下标的类名为设置样式的类名 oOlLis[this.index].className = ‘current’
调用运动的封装函数move(oUl,-500*this.index)}
}

    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            border: 0;
        }

        .all {
            width: 500px;
            height: 200px;
            padding: 7px;
            border: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
        }

        .screen {
            width: 500px;
            height: 200px;
            overflow: hidden;
            position: relative;
        }

        .screen li {
            width: 500px;
            height: 200px;
            overflow: hidden;
            float: left;
        }

        .screen ul {
            position: absolute;
            left: 0;
            top: 0px;
            width: 3000px;
        }

        .all ol {
            position: absolute;
            right: 10px;
            bottom: 10px;
            line-height: 20px;
            text-align: center;
        }

        .all ol li {
            float: left;
            width: 20px;
            height: 20px;
            background: #fff;
            border: 1px solid #ccc;
            margin-left: 10px;
            cursor: pointer;
        }

        .all ol li.current {
            background: yellow;
        }

        #arr {
            display: none;
        }

        #arr span {
            width: 40px;
            height: 40px;
            position: absolute;
            left: 5px;
            top: 50%;
            margin-top: -20px;
            background: #000;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-family: '黑体';
            font-size: 30px;
            color: #fff;
            opacity: 0.3;
            border: 1px solid #fff;
        }

        #arr #right {
            right: 5px;
            left: auto;
        }
    </style>
</head>

<body>
    <div class="all" id='box'>
        <div class="screen">
            <ul>
                <li value="0"><img src="images/1.jpg" width="500" height="200" /></li>
                <li value="1"><img src="images/2.jpg" width="500" height="200" /></li>
                <li value="2"><img src="images/3.jpg" width="500" height="200" /></li>
                <li value="3"><img src="images/4.jpg" width="500" height="200" /></li>
                <li value="4"><img src="images/5.jpg" width="500" height="200" /></li>
            </ul>
            <ol>
                <li class="current">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ol>
        </div>
        <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
    </div>
</body>
<script src="./tools.js"></script>
<script>
    var oBox = document.querySelector('#box'); //获取大盒子
    // var oScreen = oBox.getElementsByClassName('screen')[0]
    var oScreen = oBox.children[0]; //获取屏幕
    var oUl = oScreen.children[0];// 获取ul
    var oOl = oScreen.children[1];// 获取ol
    var oUlLis = oUl.children;//获取ul下li的
    var oOlLis = oOl.children;//获取ol下li的
    console.log(oOlLis);

    // 点击 小点进行运动
    for (var i = 0; i < oOlLis.length; i++) {
        oOlLis[i].index = i; // 下面点击谁就可以用this.index来获取下标了
        oOlLis[i].onclick = function () {
            for (var j = 0; j < oOlLis.length; j++) {
                oOlLis[j].className = ''
            }
            oOlLis[this.index].className = 'current'
            // 让物体运动(让)
            move(oUl,-500*this.index)

        }
    }

destiny316_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day15 运动（匀速运动函数、非行内样式函数、轮播图动态）

运动1、匀速运动的left方向移动思路：对象点语法和[]方括号语法变量都用[ ]语法给div添加点击事件设置定时器1、获取物体的偏移量 var leader = odiv.offsetleft var step = 10;2、让物理变化 var leader = leader + step3、设置边界 step>0{leader>target} step<>>0{leader<target}4、设置样式改变外观 odiv.style
复制链接

扫一扫