js进阶（client，scroll，轮播图）

最新推荐文章于 2022-10-16 22:27:17 发布

Isco也是O型腿

最新推荐文章于 2022-10-16 22:27:17 发布

阅读量122

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_53926719/article/details/115508418

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

元素可视区client

在这里插入图片描述

元素滚动系列scroll

在这里插入图片描述
scroll相比client，是实际内容大小，即包含超出边框的部分

案例：返回顶部按钮的多样化设置，在顶部时不显示，开始滑动则显示，滑到底部时，开始页面滑动。（这是一个实体大案例的一小部分，所以css样式不放出来，就是设置成返回顶部的普通样式，此处只摆关键js代码）

// var line = document.querySelector('.picture');
// var height = line.offsetTop
// 用以上方法可计算出到达哪个位置就开始随滚动条移动，不用手动计算

//go为整个返回顶部按钮
document.addEventListener('scroll',function(){
    // 让返回顶部隐藏或消失
    if(document.documentElement.scrollTop== 0){
        go.style.display = 'none';
    }
    //被卷去的位置达到一定距离时，意味着即将到达底部，按键也开始滚动
     else if(document.documentElement.scrollTop >= 4165){
        go.style.display = 'block';
        // window.pageYOffset页面被卷去头部，与上边document.documentElement.scrollTop同样用处
        go.style.bottom = window.pageYOffset -4159 + 'px'
    }
    else{
        go.style.bottom = 40 + 'px'
        go.style.display = 'block';
    }
})

获取距离三者区别

在这里插入图片描述

mouseenter和mouseover区别

在这里插入图片描述

缓动动画js实现

css中可用过渡调节变化时间及速率，现用js实现
缓动动画公式：（目标值-现在的位置）/10，随着靠近目标值，数值越来越小，速率也就越来越小。到达目标位置就停止计时器。

案例，点击按钮盒子移动。封装了一个动画函数

<body>
    <div></div>
    <button>开始</button>
</body>

<script>
    var div = document.querySelector('div')
    var btn = document.querySelector('button')
    function animate(obj,distance,change){
        // 先清除定时器，只留下当前一个定时器，防止一直点按钮不断重复定时器
        clearInterval(obj.timer) 
        
        // 设置当前对象的定时器，调用更方便，相当于给当前对象加了定时器的属性
        obj.timer = setInterval(function(){
            //步长
            //把步长化为整数，不然会有误差,兼顾前进和后退
            var step =(distance - obj.offsetLeft)/10
            step > 0?Math.ceil(step):Math.floor(step)
            if(obj.offsetLeft>=distance){
                clearInterval(obj.timer)
                if(change){
                    change();
                }
            }
            obj.style.left = obj.offsetLeft + step +'px'       
        },100)
    }

    btn.addEventListener('click',function(){
        animate(div,500,function(){
            div.style.backgroundColor = 'pink'
        })
        //此处封装一个函数，输入移动的对象和移动的距离
        //第三个参数为回调函数，及当前函数结束进入下一个函数
    })
    </script>

回调函数： 相当于嵌套函数，执行完一个可以立刻执行下一个，在有连续变化的动画效果可以使用。

轮播图

这里做了个轮播图模板，功能比较齐全，有前进后退箭头，圆点移动。

这周完善了一些js功能，轮播图，还有返回顶部功能。

轮播图：

事先写好了移动函数，套用即可。

因为通过左右按键滑动时，第一张和最后一张需要大幅度跳动，所以不能实现无缝滑动，所以在第一张图片前加入了显示的最后一张图片，跟在最后一张的位置放显示的第一张图片同样的道理，通过滑动到该图片的位置同时，瞬间回到显示的图片的位置，实现滑动效果和切换图片无缝衔接。

小圆点移动：

动态创建小圆点，并将每个小圆点添加序列号，用序列号加一乘以图片宽度，就是左右移动的距离。注意还要另外用一个全局变量，控制小圆点随图片滑动显示。

for(var i = 0;i<len;i++){
    var li = document.createElement('li');
    ul.appendChild(li);
    li.setAttribute("index",i);
    //点击小圆圈变色
    li.onclick = function(){
        for(var i = 0;i<len;i++){
            ul.children[i].style.backgroundColor = 'white'
        }
        this.style.backgroundColor = 'black'
        //移动至相应图片
        //获取自定义元素
        var index = this.getAttribute('index')
        //用同一个索引号避免箭头移动跟圆点移动出现bug
        num = parseInt(index) + 1 ;
        pointNum = parseInt(index);
        animate(slide,-(++index)*width)
     }
}

左（右）按键滑动：

当显示到（倒数）第二张图片时，此时应是看到的第一张图片，切换到最后一张（第一张）图片【与看到的第一张一样】的位置，这时已经是实现了肉眼难见的换位，就可以进行滑动了。滑动就是获取当前小圆点的序列号加一，进行单次滑动。

left.addEventListener('click',function(){
    if(flag === true){
        flag = false;
    //无缝滚动
    if(num == 1){
        num = len;
        slide.style.left = -num* width+'px';
    }
    num--;     
    animate(slide,-num * width,function(){
        flag=true;
    });    
    if(pointNum < 1){
        pointNum = len-1;
    }
    pointNum--;
    for(var i = 0;i<len;i++){
        ul.children[i].style.backgroundColor = 'white'
    }
    ul.children[pointNum].style.backgroundColor = 'black'
    }
    })

节流阀：

通过一个flag标记，控制单次事件发生完成后才进行下一次事件，避免滑动过快。设置flag=ture，然后false掉，这时，如果再点击事件，是不会发生的，通过回调函数，确保事件发生完成，将flag调回ture，可以进行下一次事件。

getAttribute返回值

返回的是一个string，一开始直接进行+1操作，变成了字符+数值进行拼接操作，即得到11，21，31…所以出现bug，将返回值index变成整型即可。

        num = parseInt(index) + 1 ;
        pointNum = parseInt(index);

自动播放：

其实就是手动调用了一次前进按键。

节流阀

防止轮播图按钮连续点击造成播放过快
在这里插入图片描述

Isco也是O型腿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js进阶（client，scroll，轮播图）

元素可视区client元素滚动系列scrollscroll相比client，是实际内容大小，即包含超出边框的部分案例：返回顶部按钮的多样化设置，在顶部时不显示，开始滑动则显示，滑到底部时，开始页面滑动。（这是一个实体大案例的一小部分，所以css样式不放出来，就是设置成返回顶部的普通样式，此处只摆关键js代码）// var line = document.querySelector('.picture');// var height = line.offsetTop// 用以上方法可计算出到达
复制链接

扫一扫