2017-12-27 125 views
0

我正在构建一个包含完整页面水平和垂直滚动的小站点。查看一个codepen demo here.演示中存在一个错误,'left'和'up'按钮不能正常工作。 '右'和'下'按钮工作正常。我只是一起扔给你看我在说什么(原谅我的内联样式)。添加touchEvents进行导航

首先,我需要合并touchEvents以在移动设备上进行整页滚动工作。如果用户向左,向右,向下或向上滑动,页面应该相应地移动。我仍然在学习JS的基础知识,我不知道从哪开始。

其次,我对我是否在我的JS中使用最佳实践有一些怀疑。首先,我重复了很多。另一方面,我敢肯定,我正在尝试做的事情有一个更简单的方法。如果你能看看我的代码并给我一些建议,我会很感激。谢谢!

回答

1

您需要在CSS中修改这两个:一是

#center.cslide-up { 
    top: 100vh; 
} 

#center.cslide-left { 
    left: 100vw; 
} 
  • 之一:当点击向上按钮,它会移动100vh下来从顶部位置。
  • 第二个:当点击左键,它将移动100vw右侧从左至右位置。

至于手机,我建议尝试使用:

你可以通过烹饪一个函数来减少代码行数,并像这样调用它:(Make su重新声明全局变量是Panel2)

btnL.addEventListener('click', function() { 
    swiper("left"); 
}); 
btnLBack.addEventListener('click', function() { 
    swiper("left"); 
}); 


function swiper(dir){ 
panelC.classList.toggle('cslide-'+dir); 
if(dir=="up") panel2=panelU; 
else if(dir=="right") panel2=panelR; 
else if(dir=="left") panel2=panelL; 
else if(dir=="down") panel2=panelD; 
panel2.classList.toggle('slide-'+dir); 
} 
  • 功能刷卡只有一个参数dir其确定它具有方向移动。您可以连接dircslide-以移动中心容器。并使用if/else条件来确定哪个面板移动并使用相同的想法。
  • 为了让它更简单和有效一些,如果你没有使用任何其他的按钮或面板的事件监听器,并且唯一的目的是切换类,你可以直接使用内联onClick="swiper('direction');"属性面板和按钮仅在需要时才触发它,而不是在脚本中定义事件侦听器。

var panel2; 
 
var panelC = document.getElementById('center'); 
 
var panelU = document.getElementById('up'); 
 
var panelR = document.getElementById('right'); 
 
var panelD = document.getElementById('down'); 
 
var panelL = document.getElementById('left'); 
 
var btnU = document.getElementById('btn-up'); 
 
var btnR = document.getElementById('btn-right'); 
 
var btnD = document.getElementById('btn-down'); 
 
var btnL = document.getElementById('btn-left'); 
 
var btnUBack = document.getElementById('btn-up-back'); 
 
var btnRBack = document.getElementById('btn-right-back'); 
 
var btnDBack = document.getElementById('btn-down-back'); 
 
var btnLBack = document.getElementById('btn-left-back'); 
 

 
btnU.addEventListener('click', function() { 
 
    swiper("up"); 
 
}); 
 
btnUBack.addEventListener('click', function() { 
 
    swiper("up"); 
 
}); 
 

 
btnR.addEventListener('click', function() { 
 
    swiper("right"); 
 
}); 
 
btnRBack.addEventListener('click', function() { 
 
swiper("right"); 
 
}); 
 

 
btnD.addEventListener('click', function() { 
 
    swiper("down"); 
 
}); 
 
btnDBack.addEventListener('click', function() { 
 
    swiper("down"); 
 
}); 
 

 
btnL.addEventListener('click', function() { 
 
    swiper("left"); 
 
}); 
 
btnLBack.addEventListener('click', function() { 
 
    swiper("left"); 
 
}); 
 

 

 
function swiper(dir){ 
 
panelC.classList.toggle('cslide-'+dir); 
 
if(dir=="up") panel2=panelU; 
 
else if(dir=="right") panel2=panelR; 
 
else if(dir=="left") panel2=panelL; 
 
else if(dir=="down") panel2=panelD; 
 
panel2.classList.toggle('slide-'+dir); 
 
}
* { 
 
    margin: 0; 
 
    padding: 0; 
 
    transition: 1.5s ease; 
 
    -webkit-transition: 1.5s ease; 
 
    overflow: hidden; 
 
    background: white; 
 
} 
 

 
.panel { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    display: block; 
 
    position: absolute; 
 
    border: 1px solid blue; 
 
} 
 

 
.btn { 
 
    position: absolute; 
 
    padding: 16px; 
 
    cursor: pointer; 
 
} 
 

 
#center { 
 
    top: 0px; 
 
    left: 0px; 
 
    right: 0px; 
 
    bottom: 0px; 
 
} 
 

 
#center.cslide-up { 
 
    top: 100vh; 
 
} 
 

 
#center.cslide-left { 
 
    left: 100vw; 
 
} 
 

 
#center.cslide-right { 
 
    left: -100vw; 
 
} 
 

 
#center.cslide-down { 
 
    top: -100vh; 
 
} 
 

 

 

 
#up { 
 
    top: -100vh; 
 
} 
 

 
#up.slide-up { 
 
    top: 0; 
 
} 
 

 
#right { 
 
    right: -100vw; 
 
} 
 

 
#right.slide-right { 
 
    right: 0; 
 
} 
 

 
#down { 
 
    bottom: -100vh; 
 
} 
 

 
#down.slide-down { 
 
    bottom: 0; 
 
} 
 

 
#left { 
 
    left: -100vw 
 
} 
 

 
#left.slide-left { 
 
    left: 0; 
 
}
<div class="panel" id="center"> 
 
    <div class="btn" id="btn-up" style="text-align: center; width: 100%;"> 
 
    up 
 
    </div> 
 
    <div class="btn" id="btn-right" style="right: 0; top: 50%;"> 
 
    right 
 
    </div> 
 
    <div class="btn" id="btn-down" style="text-align: center; bottom: 0; width: 100%;"> 
 
    down 
 
    </div> 
 
    <div class="btn" id="btn-left" style="top: 50%;"> 
 
    left 
 
    </div> 
 
</div> 
 

 
<div class="panel" id="up"> 
 
    <div class="btn" id="btn-up-back" style="bottom: 0; width: 100%; text-align: center;"> 
 
    back 
 
    </div> 
 
</div> 
 

 
<div class="panel" id="right"> 
 
    <div class="btn" id="btn-right-back" style="left: 0; top: 50%;"> 
 
    back 
 
    </div> 
 
</div> 
 

 
<div class="panel" id="down"> 
 
    <div class="btn" id="btn-down-back" style="top: 0; width: 100%; text-align: center;"> 
 
    back 
 
    </div> 
 
</div> 
 

 
<div class="panel" id="left"> 
 
    <div class="btn" id="btn-left-back" style="right: 0; top: 50%;"> 
 
    back 
 
    </div> 
 
</div>

+0

我其实不能使用jQuery或库项目。你对vanilla javascript资源有什么建议吗? – loudenw

+1

@loudenw更新了链接,第一个不使用Jquery,但它是一个JavaScript库,它非常轻便,您可以查看它。另一个是发布在应该工作的旧帖子上的解决方案。希望能帮助到你 :) – 2017-12-28 08:52:29