zoukankan      html  css  js  c++  java
  • js网页返回顶部和楼层跳跃的实现原理

         这是简单的效果图。

     (实现楼层间的跳跃,主要依靠的是 window.scrollTo(x,y)方法 ,将浏览器的可见区域移动到指定的x,y坐标上。)

        说楼层跳跃前,先温习下,一般网页在高度较大时,都会在页面的底部位置放个放回顶部的按钮或图片,一点击便有如做火箭般瞬间回到页面的顶部(说时迟,那时快,一句 btn.onclick = function(){window.scrollTo(0,0)} 就搞定了)。

           但是这种瞬间就回到顶部的效果,略显突然,不符合人体工程学,如果要先快后慢,如坐电梯一般回到顶部,该如何实现呢?

      

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
           #but{
                 position:fixed;
                 bottom:20px;
                 right:20px;
                 display:none;
           }
        </style>
    </head>
    <body>
         <button id="but">返回顶部</button>
         <p>两情若是长久时,又岂在朝朝暮暮</p>
         <p>两情若是长久时,又岂在朝朝暮暮</p>
         <!--省略若干个 -->
    </body>
    <script>
        var weizhi = 0;
        var timer = null;
        var target = 0;
        var but = document.getElementById("but");
    
        window.onscroll = function(){
            weizhi = scroll().top;
            if(weizhi>1000){
                but.style.display = "block";
            }else{
                but.style.display = "none";
            }
        }
    
        but.onclick = function(){
            clearInterval(timer);
            timer = setInterval(function(){
                var step = Math.floor((target - weizhi)/10);
                weizhi = weizhi + step;
                window.scrollTo(0,weizhi);
                if(weizhi == 0){
                    clearInterval(timer);
                }
            },30);
        }
    function scroll(){
                 return {
                     "top":window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,
                      "left":window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft
                 };
           }
    </script> </html>

      如何缓动,第一次移动的距离大点,之后依次递减,整体上给人的感觉就是移动先是很快,然后逐渐变慢。

       var step = Math.floor((target - weizhi)/10);

      设置步长,因为目标是回到顶部,所以target的值为0。两者间距离的十分之一作为步长。

            weizhi = weizhi + step;

           每一次当前的位置都加上了步长,(这里step为负数),所以当前位置就会越来越接近顶部。

      了解了底部缓动返回顶部,楼层间的跳跃道理是一样的。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
           *{
                 margin:0px;
                 padding:0px;
                 list-style:none;
           }
           body,html{
               height:100%;
           }
           ul{
               height:100%;
           }
           ul li{
               height:100%;
           }
           ol{
                position:fixed;
                top:100px;
             left:30px;
           }
           ol li{
                 50px;
                 height:30px;
                 border:1px solid #aaa;
                 margin-top:10px;
                 line-height:30px;
                 text-align:center;
                 cursor:pointer;
           }
        </style>
    </head>
    <body>
        <ul>
            <li>袜子</li>
            <li>裤子</li>
            <li>鞋子</li>
            <li>帽子</li>
            <li>包包</li>
        </ul>
        <ol>
            <li>袜子</li>
            <li>裤子</li>
            <li>鞋子</li>
            <li>帽子</li>
            <li>包包</li>
        </ol>
    </body>
    <script>
        var timer;
        var target;
        var leader=0;
        var ul = document.getElementsByTagName("ul")[0];
        var ol = document.getElementsByTagName("ol")[0];
        var ulLi = ul.children;
        var olLi = ol.children;
        var arrColor = ["pink","blue","green","red","yellow"];
        for(var i=0;i<ulLi.length;i++){
            ulLi[i].style.background = arrColor[i];
            olLi[i].style.background = arrColor[i];
            olLi[i].index = i;  //重点,为元素增加一个index属性,之后再点击时,可以通过获取这个属性来判断是点击了那个li元素
            olLi[i].onclick = function(){
                clearInterval(timer);
                target = ulLi[this.index].offsetTop; //通过ol中的li元素的index属性判断对应的ul的li元素距离顶部的距离。
                timer = setInterval(function(){
                   var step = (target - leader) / 10 ;
                   step = step > 0 ? Math.ceil(step) : Math.floor(step);
                   leader = leader + step;
                   window.scrollTo(0,leader);
                   if(Math.abs(target - leader) <= Math.abs(step)){
                          window.scrollTo(0,target);
                          clearInterval(timer);
                   }
                },30);
            }
        }
        window.onscroll=function(){
            leader = scroll().top;
        }

    function scroll(){
    //将获取scrollTop和scrollLeft的属性进行封装
                 return {
                     "top":window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,
                      "left":window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft
                 };
           }
    </script> </html>
  • 相关阅读:
    使用PhantomJS报warnings.warn('Selenium support for PhantomJS has been deprecated, please use headless '解决方法
    案例:执行 JavaScript 语句
    案例:网站模拟登录
    爬虫中Selenium和PhantomJS
    爬虫中采集动态HTML介绍
    Oracle系列十五 控制用户权限
    Oracle系列十四 序列、索引和同义词
    Oracle系列十三 视图
    多线程爬虫案例
    CentOS7静默安装Oracle 18g数据库(无图形化界面)
  • 原文地址:https://www.cnblogs.com/sujianfeng/p/8310242.html
Copyright © 2011-2022 走看看