原⽣js实现楼层滚动（界⾯滑动）效果
截取⾃⾃⼰写的代码
思路很简单，就是改编⾃回到顶部效果，控制滚动条位移到指定位置
先有个布局，四个触发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="parallax-test-2.imgix/uploads/download/20161220143400_expose.png?auto=format%252Ccompress&w=1370&h=900&ix lib=imgixjs-3.0.4"class="Img">
</a>
</div>
<div class="right-img-img">
<a href="#">
<img src="parallax-test-2.imgix/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="parallax-test-2.imgix/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="parallax-test-2.imgix/uploads/download/20161220144157_vtop.png?auto=format%252Ccompress&w=1370&h=900&ixlib =imgixjs-3.0.4"class="Img">
</a>
</div>js控制滚动条
</div>
</body>
</html>
下⾯是实现效果的js代码
var isTop =true;
var aCenterLi = ElementsByTagName("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'? und(parseFloat(getStyle(obj,attr))*100): und(getStyle(obj,attr).replace("px",""));
//2.计算速度
var speed=(json[attr]-icur)/times;
speed=speed>il(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? il(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);
}
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))//规定移动到的距离
}
}
⾃⼰测试了⼀下可以运⾏，还可以添加更多效果，如有不⾜欢迎指出

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。