zoukankan      html  css  js  c++  java
  • JavaScript侧边悬浮框

    <script>
        window.onscroll=function(){
    
            var oDiv=document.getElementById('div1');
            var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
            oDiv.style.top=(document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop+'px';
            startMove((document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop);
            
        };
        
            var timer=null;
    
        function startMove(iTarget){
    
            var oDiv=document.getElementById('div1');
            clearInterval(timer);
    
    
            timer=setInterval(function(){
    
                var speed=(iTarget-oDiv.offsetTop)/8;
                speed=speed>0?Math.ceil(speed):Math.floor(speed);
                if(oDiv.offsetTop==iTarget)
                    clearInterval(timer);
                    
                else
                    odiv.style.top=oDiv.offsetTop+speed+'px';
                
            },30);
        }
    
        
    
        </script>

    一个小小的js悬浮框,也是有很多很多的细节要注意。。。

    基础的运动框架套路不能忘记。。。 

    使用math函数解决可能存在的因为数学问题而导致鼠标停止时的闪烁。。。

    代码本质其实是用缓冲运动解决掉悬浮框闪烁的问题,提高视觉体验。。。

    如果不用debug,还是撸代码撸到要死。。。。

  • 相关阅读:
    Nginx入门(三)——正向代理
    Nginx入门(二)——双机热备
    Socket
    TCP和UDP
    主线程等待子线程结束后再运行
    H5s播放rtsp和rtmp视频
    Thread.sleep()和Thread.currentThread().sleep()区别
    OpenLayer3入门——[一]
    事件绑定
    cmake和json安装
  • 原文地址:https://www.cnblogs.com/jokerspace/p/5719045.html
Copyright © 2011-2022 走看看