js案例：节流阀、返回顶部案例、筋斗云案例

邓六日

于 2023-08-07 16:14:39 发布

阅读量126

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/daisyboom/article/details/132148758

版权

九、节流阀

防止轮播图按钮点击造成播放过快

9.1目的

当上一个函数动画内容执行完毕，再去执行下一个函数动画，使得事件无法连续触发。

9.2思路

利用回调函数，添加一个变量来控制，锁住函数和解锁函数。

设置flag变量，初始值为true
利用if判断，先将flag=false关闭节流阀，再执行事件

if（flag）{//关闭水龙头

flag=false;

do something;

}
最后，利用回调函数动画执行完毕，在将flag=true，打开节流阀

以此达到本张图片轮播完毕后，再切换下一张图片。

十、短路与

短路与的性质就是，当左边为真，才执行右边的。

所以

if(条件表达式){

执行代码

}其中的执行代码只有一句时，就可以写成短路与的形式。

 // if (callback) {
            //     callback(); //回调函数
            // }
            callback && callback();

十一、返回顶部

滚动浏览器窗口到文档特定位置

10.1window.scroll(x,y)

表示让窗口滚动到的x坐标+y坐标

为直接瞬移滚动，不带缓冲
其中x,y不带单位

10.1缓动动画上下滚动

①把动画函数中的left相关值改为 --> 页面垂直滚动距离相关

②window.pageYOffset得到页面滚动的距离

animate.js(上下)

//缓动动画---上下滑动
function animate(obj, targt, callback) {
    // 当我们不断地点击按钮，元素的速度越来越快，因为开启了太多定时器
    // 解决方案，让元素只有一个定时器(清除上一个定时器，只保留当前的定时器)
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        // 步长值
        // 把步长值改为正直 ,向上取整
        var step = (targt - window.pageYOffset) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (window.pageYOffset == targt) {
            // 停止定时器
            clearInterval(obj.timer);
            // if (callback) {
            //     callback(); //回调函数
            // }
            callback && callback();
        }
        // 把每次+1这个步长值逐渐变小，步长公式  (目标位置值 - 现在的位置)/10 
        // obj.style.left = obj.offsetLeft + step + 'px';
        window.scroll(0,window.pageYOffset + step);//函数不带单位
    }, 15);
}

10.2筋斗云

1679745405636

功能：

鼠标经过某个li，筋斗云跟到当前小li位置

鼠标离开这个li，筋斗云复原为原来的位置

鼠标点击了某个li，筋斗云就会留在这个li的位置

思路：

①利用动画函数做动画效果

②原先筋斗云起始位置为0

③鼠标经过哪个小li，就将当前小li的offsetLeft值作为目标值

④鼠标离开后，就将目标值设为0

⑤鼠标点击哪个li，就将当前li存起来，赋做cloud的初始值

定义current变量，存储cloud的当前位置，初始值0
点击li后，将li.offsetLeft赋给current,使cloud会从当前点击的li为起点移动

html+css代码

<style>
    * {
        margin: 0;
        padding: 0
    }
    
    ul {
        list-style: none;
    }
    
    body {
        background-color: black;
    }
    
    .c-nav {
        width: 900px;
        height: 42px;
        background: #fff url(./rss.png) no-repeat right center;
        margin: 100px auto;
        border-radius: 5px;
        position: relative;
    }
    
    .c-nav ul {
        position: absolute;
    }
    
    .c-nav li {
        float: left;
        width: 83px;
        text-align: center;
        line-height: 42px;
    }
    
    .c-nav li a {
        color: #333;
        text-decoration: none;
        display: inline-block;
        height: 42px;
    }
    
    .c-nav li a:hover {
        color: white;
    }
    
    .cloud {
        position: absolute;
        left: 0;
        top: 0;
        width: 83px;
        height: 42px;
        background: url(./cloud.png) no-repeat;
        background-color: #fff;
    }
</style>
<body>
    <div id="c_nav" class="c-nav">
        <span class="cloud"></span>
        <ul>
            <li><a href="#">首页新闻</a></li>
            <li><a href="#">师资力量</a></li>
            <li><a href="#">活动策划</a></li>
            <li><a href="#">企业文化</a></li>
            <li><a href="#">招聘信息</a></li>
            <li><a href="#">公司简介</a></li>
            <li><a href="#">我是佩奇</a></li>
            <li><a href="#">啥是佩奇</a></li>
        </ul>
    </div>

筋斗云js代码

因为要调用动画函数，所以要引入animate.js文件

 <script src="./animate.js"></script>
     <script>
        window.addEventListener('load',function(){
        //1.获取元素
        var cloud = document.querySelector('.cloud');
        var c_nav = document.querySelector('.c-nav');
        var ul = c_nav.querySelector('ul');
        //cloud原先的位置
        var current = 0; 
        //2.给所有li绑定事件
        for(var i = 0; i < ul.children.length;i++){
            //（1）鼠标经过,跟随至小li
            ul.children[i].addEventListener('mouseenter',function(){
                // cloud.style.left = this.offsetLeft + 'px'; 瞬间移动
                animate(cloud,this.offsetLeft);
            })
            //（2）鼠标离开，恢复至原位
            ul.children[i].addEventListener('mouseleave',function(){
                // cloud.style.left = 0 ;  瞬间移动
                animate(cloud,current);
            
            })
            //（3）鼠标点击，将当前li的位置赋值给cloud的初始位置
            ul.children[i].addEventListener('click',function(){
                console.log(this.offsetLeft);
                current = this.offsetLeft;
        
            })
        }
        })
     </script>