截取自自己寫的代碼
思路很簡單，就是改編自回到頂部效果，控制滾動條位移到指定位置
先有個佈局，四個觸發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)) //規定移動到的距離
}
}
自己測試了一下可以運行，還可以添加更多效果，如有不足歡迎指出