原生js实现楼层滚动（界面滑动）效果

2023年8月2日10:07:13

截取自自己写的代码

思路很简单，就是改编自回到顶部效果，控制滚动条位移到指定位置

先有个布局，四个触发li和四张图片

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <style>
        #center{
            position:fixed;
            top:400px;
            right:600px;
        }
    </style>
</head>
<body>
    <div id="center">
        <lu>                           
                <li> Expose</li>
                <li> jsPDF</li>
                <li> BaySentry</li>
                <li> vtop</li>
        </lu>
    </div>
    <div id="right-img">
            <div class="right-img-img">
                <a href="#">
                    <img src="https://parallax-test-2.imgix.net/uploads/download/20161220143400_expose.png?auto=format%252Ccompress&w=1370&h=900&ixlib=imgixjs-3.0.4" class="Img">
                </a>            
            </div>              
            <div class="right-img-img">
                <a href="#">
                    <img src="https://parallax-test-2.imgix.net/uploads/download/20161220144443_jspdf.png?auto=format%252Ccompress&w=1370&h=900&ixlib=imgixjs-3.0.4" class="Img">
                </a>                           
            </div>
            <div class="right-img-img">
                <a href="#">
                    <img src="https://parallax-test-2.imgix.net/uploads/download/20161220144253_baysentry.png?auto=format%252Ccompress&w=1370&h=900&ixlib=imgixjs-3.0.4" class="Img">
                </a>              
            </div>
            <div class="right-img-img">
                <a href="#">
                    <img src="https://parallax-test-2.imgix.net/uploads/download/20161220144157_vtop.png?auto=format%252Ccompress&w=1370&h=900&ixlib=imgixjs-3.0.4" class="Img">
                </a>
            </div>
        </div>
</body>
</html>

下面是实现效果的js代码

            var isTop = true;  
            var aCenterLi = document.getElementsByTagName("li");  //使用时记得修改所选范围
            //运动框架
            function startMove(obj,json,times,endfn){  
            
            clearInterval(obj.timer);
            obj.timer=setInterval(function(){
                var iFlag=true;//假设所有运动都到达目标
                for(var attr in json){
        
                //1.取当前值
                var icur=0;
                attr=='opacity'? icur=Math.round(parseFloat(getStyle(obj,attr))*100) : icur=Math.round(getStyle(obj,attr).replace("px",""));
                //2.计算速度
                var speed=(json[attr]-icur)/times;
                speed=speed>0?Math.ceil(speed):Math.floor(speed);
                //3.检测停止
                if(icur-json[attr]>1||icur-json[attr]<-1){
                    iFlag=false;
                }
                if(attr=='opacity'){
                        obj.style.filter='alpha(opacity:'+icur+speed+')';
                        obj.style.opacity=(icur+speed)/100;
                    }else{
                        obj.style[attr]=icur+speed+'px';
                    }                    
                }
                if(iFlag){
                    clearInterval(obj.timer);
                    endfn && endfn.apply(obj);
                }
            },30)
        
        }
        function getStyle (obj,attr){ return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle(obj,false)[attr]; }
        //滚动条运动
        function movescroll(obj,y){
            for (let l = 0; l < aCenterLi.length; l++) { 
                clearInterval(aCenterLi[l].timer5);  //清除上一个效果
                }         
            obj.timer5 = setInterval(function() {        
                var osTop = document.documentElement.scrollTop || document.body.scrollTop;
                var speed2=(y - osTop)/4;   //计算速度
                speed2 = speed2 > 0 ? Math.ceil(speed2):Math.floor(speed2); 
                document.documentElement.scrollTop = osTop + speed2;  
                isTop = true;       
                if (speed2 == 0) {
                    for (let l = 0; l < aCenterLi.length; l++) { 
                    clearInterval(aCenterLi[l].timer5);    //结束后关闭定时器
                    }           
                }   
            }, 30);
        }
        window.onscroll = function() { 
        scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        if (!isTop) {
			for (let l = 0; l < aCenterLi.length; l++) { 
                clearInterval(aCenterLi[l].timer5);    //移动滚动条则停止之前运动，避免bug
                }         
		}
		isTop = false;      
        }
        for (let l = 0; l < aCenterLi.length; l++) { 
            aCenterLi[l].onmouseover = function(){
                movescroll(aCenterLi[l],(l * 900))   //规定移动到的距离
         }     
        }

自己测试了一下可以运行，还可以添加更多效果，如有不足欢迎指出

  • 作者：隰有游龙
  • 原文链接：https://blog.csdn.net/qq_44616044/article/details/86626876
    更新时间：2023年8月2日10:07:13 ，共 2859 字。