[分享]css3按住鼠标向上滑动翻页

随着网页内容的不断扩充，传统的滚动条方式翻页显得越发不够优雅，而css3的出现为我们带来了一种全新的翻页方式：按住鼠标向上滑动翻页。通过设置一些简单的css属性，我们可以让网页更加美观、流畅地展现。h...

随着网页内容的不断扩充，传统的滚动条方式翻页显得越发不够优雅，而css3的出现为我们带来了一种全新的翻页方式：按住鼠标向上滑动翻页。通过设置一些简单的css属性，我们可以让网页更加美观、流畅地展现。

html,body{
  height:100%;
  overflow:hidden;
}
.page{
  height:100%;
  width:100%;
  transition:all 0.5s ease;
}
.page:nth-child(odd){
  background:#f1f1f1;
}
.page:nth-child(even){
  background:#fff;
} 

首先，我们通过设置html和body的高度为100%，将页面的可视范围充满。然后，给每一个页面元素添加一个.page的class，并将transition动画时间设置为0.5s，使得页面切换时具有过渡效果。

接着，我们通过:nth-child伪类对页面元素进行分组，并对奇数、偶数的页面元素设置不同的背景色，以增加页面的视觉层次感。

var current = 1;
$(document).on('mousewheel DOMMouseScroll',function(e){
  var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));
  if(delta > 0 && current > 1){
    current--;
    $('html,body').animate({scrollTop:$('.page:nth-child('+current+')').offset().top}, 500);
  }else if(delta < 0 && current < $('.page').length){
    current++;
    $('html,body').animate({scrollTop:$('.page:nth-child('+current+')').offset().top}, 500);
  }
}); 

最后，在JavaScript中通过监听鼠标滚轮事件，获取滚轮滚动的方向和当前页面的索引。根据方向判断页面是否切换，并在切换时使用scrollTop和animate方法平稳滚动到下一个页面。

通过以上几个简单步骤，我们就实现了一个优雅流畅的页面翻页效果。同时，在页面元素布局上，我们还可以进行更多的优化和创意设计，以打造不同风格的页面效果。