js楼层滚动

妖狐艹你老母 2023-06-25 10:06 4阅读 0赞

**布局**

< div id="center">
        < ul>                           
                < li> 1</ li>
                < li> 2</ li>
                < li> 3</ li>
                < li> 4</ li>
        </ ul>
    </ div>
    < div id="right-img">
            < div class="right-img-img">
                < a href="#">
                    < div style="background: #ffb6b9">1</ div>
    
                </a>            
            </div>              
            <div class="right-img-img">
                <a href="#">
                    <div style="background: #fae3d9">2</div>
                </a>                           
            </div>
            <div class="right-img-img">
                <a href="#">
                    <div style="background: #bbded6">3</div>
                </a>              
            </div>
            <div class="right-img-img">
                <a href="#">
                    <div style="background: #8ac6d1">4</div>
                </a>
            </div>
        </div>

**css样式**

< style>  
\*\{  
padding: 0;  
margin: 0;  
list-style: none;  
text-decoration: none;  
\}  
\#center\{  
position:fixed;  
top:400px;  
right:600px;  
\}  
a>div\{  
height: 900px;  
line-height: 900px;  
text-align: center;  
color: \#fff;  
font-size: 40px;  
\}  
ul\{  
width: 40px;  
height: 160px;  
position: fixed;  
left: 0;  
top: 0;  
bottom: 0;  
margin: auto;  
background: \#ddd;  
\}  
ul>li \{  
height: 40px;  
line-height: 40px;  
text-align: center;  
color: \#fff;  
\}  
</ style>

**js代码**

<  script>
          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(){
                for(var i = 0;i< aCenterLi.length;i++){
            aCenterLi[i].style.backgroundColor = ''
        }
                movescroll(aCenterLi[l],(l * 900))   //规定移动到的距离
                aCenterLi[l].style.backgroundColor = 'red'
         }     
        }
        </script>

最后是效果图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpb28xMjE_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpb28xMjE_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019122720123023.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpb28xMjE=,size_16,color_FFFFFF,t_70