offset .client. scroll 三大家族

痛定思痛。 2022-12-26 10:19 131阅读 0赞

# 学习目标：网页轮播图的实现 #

1.offset .client. scroll 三大家族  
2.缓动动画的原理和封  
3.网页轮播图实现  
4.节流阀 返回顶部及筋斗云案例  
5.移动端轮播图实现  
6.移动端插件使用 及轮播图的实现  
7.html5本地储存及记住用户名案例

# 学习内容： #

## 注意 ##

1.offset 获取元素大小 style 更改元素样式  
2.元素被卷去头部是element.scrollTop,页面被卷去头部是window.pageYOffset

## 1.鼠标拖拽盒子 拖动模拟框 ##

element.offsetLeft : 返回元素相对**带有定位父元素**上方的偏移

**//关键在于 让offsetleft  offsettop值与鼠标的 x,y 值相关联，即盒子的位置与鼠标移动的关系 。使盒子与鼠标处于一个相对静止的状态**
      
     //(1) 当鼠标按下 就获得鼠标在盒子内的坐标
    
        title.addEventListener('mousedown' , function(e) {
            var x = e.pageX - login.offsetLeft;  //鼠标按下时相对盒子的值
            var y = e.pageY - login.offsetTop;
            
            //(2) 鼠标移动时 把鼠标在页面中的坐标减去 鼠标在盒子内的坐标 就是模拟框的left 和 top 值
            document.addEventListener('mousemove' ,move );
    
            function move(e) {
               login.style.left =  e.pageX - x + 'px';
               login.style.top =  e.pageY - y + 'px';
    
            }
    
            //(3) 鼠标弹起 ，就让鼠标移动事件移除
    
            document.addEventListener('mouseup' , function() {
                document.removeEventListener('mousemove' ,move);
            })
        })

## 2.京东放大镜案例 ##

## 3.仿淘宝固定侧边栏 ##

<div class="slider-bar">
            <span class="goBack">返回顶部</span>
        </div>
        <div class="header w">头部区域</div>
        <div class="banner w">banner区域</div>
        <div class="main w">主体部分</div>
        <script>
            var sliderbar = document.querySelector('.slider-bar');
            var banner = document.querySelector('.banner');
            var bannerTop = banner.offsetTop;//必须在外面写值不会变  在下面滚动事件里，滚动时值就会改变
            var sliderbarTop = sliderbar.offsetTop - bannerTop;
            var main = document.querySelector('.main');
            var goBack = document.querySelector('.goBack');
            var mainTop = main.offsetTop;//值必须在外面取
            document.addEventListener('scroll',function() {
                //d当页面被卷超过banner高度 则侧边栏不动
                if(window.pageYOffset >= bannerTop) {
                    sliderbar.style.position = 'fixed';
                    sliderbar.style.top = sliderbarTop + 'px';
                } else {
                    sliderbar.style.position = 'absolute';
                    sliderbar.style.top = '300px';
                }
    
                //当页面被卷超过main时 显示goback值
                if(window.pageYOffset >= mainTop) {
                    goBack.style.display = 'block';
                } else {
                    goBack.style.display = 'none';
                }
            })
    
           
        </script>