jQuery通过插件实现鼠标滚动页面-jquery案例-前端日记簿

首页 jquery案例正文

jQuery通过插件实现鼠标滚动页面

2023-11-21 80

效果图：

通过mousewheel插件进行一个页面滚动当鼠标向下滚动的时候页面进行一个切换包括右侧的小按钮进行一个高亮显示并且文字进行一个动画显示我们也可以通过点击小按钮进行页面的跳转

html：

    <div class="slide-wrapper">
      <div class="section section-1">
        <div class="title active">
          <p class="tit">CSS3 纵向滚屏翻页，支持键盘，鼠标滚轮操作</p>
        </div>
      </div>
      <div class="section section-2">
        <div class="title">
          <p class="tit">随便写写意思下!</p>
        </div>
      </div>
      <div class="section section-3">
        <div class="title">
          <p class="tit">随便写写意思下</p>
        </div>
      </div>
      <div class="section section-4">
        <div class="title">
          <p class="tit">随便写写意思下</p>
        </div>
      </div>
      <div class="section section-5">
        <div class="title">
          <p class="tit">随便写写意思下</p>
        </div>
      </div>
    </div>
    <ul class="section-btn">
      <li class="on"></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <div class="arrow">&laquo;</div>

在js中我们先声明一个变量作为计数器然后对其封装俩个函数up和down分别是num++和num--

然后我们封装一个函数为scroll 当调动它的时候给对应的标点添加样式进行高亮显示

然后对页面以及对应的文字进行颜色的更改以及动画的添加

对应的css样式：

页面移动

文字过渡动画：

点击右侧按钮进行对应的页面滚动并且将点击的下标对num进行赋值

预览：

同样给我们的翻页按钮也设置一个点击事件当点击时调动up()和scroll()函数向下进行页面的滚动这里将需要调动插件中封装滑动one函数了向里面传入我们的鼠标·事件以及一个函数

设置一个定时器延时一秒才能进行下一次点击

最后就是对鼠标的上下轮滚动进行一个监听获取到对应的滚动进行up或者down函数的调动

完整代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jquery通过插件实现鼠标滚动页面</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      li {
        list-style: none;
      }
      body {
        color: #222;
        width: 100%;
        height: 100vh;
        overflow: hidden;
      }
      .slide-wrapper {
        width: 100%;
        height: 100%;
        overflow: visible;
        transition: transform 1s cubic-bezier(0.86, 0, 0.03, 1);
      }
      .slide-wrapper .section {
        position: relative;
        width: 100%;
        height: 100%;
      }
      .slide-wrapper .section .title {
        width: 100%;
        position: absolute;
        top: 10%;
        color: #fff;
        font-size: 38px;
        text-align: center;
      }
      .slide-wrapper .section .title p {
        padding: 0 4%;
        opacity: 0;
      }
      .slide-wrapper .section .title.active .tit {
        opacity: 1;
        transform: translateY(-25px);
        transition: all 2s cubic-bezier(0.86, 0, 0.8, 1);
      }
      .slide-wrapper .section-1 {
        background-color: #337ab7;
      }
      .slide-wrapper .section-2 {
        background-color: #5cb85c;
      }
      .slide-wrapper .section-3 {
        background-color: #5bc0de;
      }
      .slide-wrapper .section-4 {
        background-color: #f0ad4e;
      }
      .slide-wrapper .section-5 {
        background-color: #d9534f;
      }
      .put-0 {
        transform: translateY(0);
      }
      .put-1 {
        transform: translateY(-100%);
      }
      .put-2 {
        transform: translateY(-200%);
      }
      .put-3 {
        transform: translateY(-300%);
      }
      .put-4 {
        transform: translateY(-400%);
      }
      .section-btn {
        width: 14px;
        cursor: pointer;
        position: fixed;
        right: 4%;
        top: 50%;
      }
      .section-btn li {
        user-select: none;
        height: 14px;
        width: 14px;
        border-radius: 50%;
        margin-bottom: 12px;
        background: #bd362f;
        text-align: center;
        color: #fff;
        cursor: pointer;
      }
      .section-btn li.on {
        background-color: #fff;
      }
      .arrow {
        opacity: 1;
        animation: arrow 3s cubic-bezier(0.5, 0, 0.1, 1) infinite;
        transform: translateX(-50%) rotate(-90deg);
        position: absolute;
        bottom: 10px;
        left: 50%;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        line-height: 60px;
        text-align: center;
        font-size: 24px;
        color: #fff;
        border: 1px solid #fff;
        cursor: pointer;
        overflow: hidden;
      }
      .arrow:hover {
        animation-play-state: paused;
      }
      @keyframes arrow {
        0%,
        100% {
          bottom: 10px;
          opacity: 1;
        }
        50% {
          bottom: 50px;
          opacity: 0.5;
        }
      }
    </style>
  </head>
  <body>
    <div class="slide-wrapper">
      <div class="section section-1">
        <div class="title active">
          <p class="tit">CSS3 纵向滚屏翻页，支持键盘，鼠标滚轮操作</p>
        </div>
      </div>
      <div class="section section-2">
        <div class="title">
          <p class="tit">随便写写意思下!</p>
        </div>
      </div>
      <div class="section section-3">
        <div class="title">
          <p class="tit">随便写写意思下</p>
        </div>
      </div>
      <div class="section section-4">
        <div class="title">
          <p class="tit">随便写写意思下</p>
        </div>
      </div>
      <div class="section section-5">
        <div class="title">
          <p class="tit">随便写写意思下</p>
        </div>
      </div>
    </div>
    <ul class="section-btn">
      <li class="on"></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <div class="arrow">&laquo;</div>
  </body>
</html>
<script src="./js/jquery.js"></script>
<script src="./js/mousewheel.js"></script>
<script>
  $(function () {
    var num = 0;
    // i++
    function up() {
      num++;
      if (num == $(".section-btn li").length) {
        num = 0;
      }
    }
    // i--
    function down() {
      num--;
      if (num <= 0) {
        num = $(".section-btn li").length - 1;
      }
    }
    // 页面滑动时
    function scroll() {
      //   对右侧标点进行高亮显示;
      $(".section-btn li").eq(num).addClass("on").siblings().removeClass("on");
      //对页面进行更换
      $(".slide-wrapper")
        .attr("class", "slide-wrapper")
        .addClass(function () {
          return "put-" + num;
        })
        .find(".section")
        .eq(num)
        .find(".title")
        .addClass("active");
    }
    // 右侧按钮点击
    $(".section-btn li").each(function (index) {
      $(this).click(function () {
        num = index;
        console.log(num);
        scroll();
      });
    });
    // 翻页按钮点击
    $(".arrow").one("click", go);
    function go() {
      up();
      scroll();
      setTimeout(function () {
        $(".arrow").one("click", go);
      }, 1000);
    }
    // 响应鼠标
    $(".slide-wrapper").one("mousewheel", mouse_);
    function mouse_(event) {
      if (event.deltaY < 0) {
        up();
      } else {
        down();
      }
      scroll();
      setTimeout(function () {
        $(".slide-wrapper").one("mousewheel", mouse_);
      }, 1000);
    }
  });
</script>

标签：

发表评论：取消回复

原文链接：http://1.15.94.33/?id=220

=========================================

http://1.15.94.33/ 为 “前端日记簿” 唯一官方服务平台，请勿相信其他任何渠道。