jQuery 实现活动页面消息滚动样式4条

巴沟旮旯儿
853 阅读2分钟

scrollTop 消息滚动样式

  • 消息滚动的样式在一些活动页面很常见
  • 首先封装好 scrollTopNew.js
  • 在页面直接引入，把需要滚动的条数和时间传给库里面
  • 页面加载完 调用 $("#scrollNews").Scroll({时间，滚动条数})
  • 遇到的问题：滚动的时候当前的第一条会出现抖动现象
  • 处理方式：布局中margin 和 padding 占了一定的距离，需要把边距放到父级，避免子集收到影响

代码部分

scrollTopNew.js

     //滚动插件
 (function ($) {
   $.fn.extend({
     Scroll: function (opt, callback) {
       //参数初始化
       if (!opt) var opt = {};
       var _btnUp = $("#" + opt.up); //Shawphy:向上按钮
       var _btnDown = $("#" + opt.down); //Shawphy:向下按钮
       var timerID;
       var _this = this.eq(0).find("ul:first");
       console.log(_this)
       var lineH = _this.find("li:first").height(), //获取行高
         line = opt.line ? parseInt(opt.line, 10) : parseInt(this.height() / lineH, 10), //每次滚动的行数，默认为一屏，即父容器高度
         speed = opt.speed ? parseInt(opt.speed, 10) : 500; //卷动速度，数值越大，速度越慢（毫秒）
       timer = opt.timer //?parseInt(opt.timer,10):3000; //滚动的时间间隔（毫秒）
       if (line == 0) line = 1;
       var upHeight = 0 - line * lineH;
       //滚动函数
       // 每次让ul的marginTop 向上移动 4个li的行高，让移动的4个li添加到ul的最后边，在让当前的marginTop为0
       var scrollUp = function () {
         _btnUp.unbind("click", scrollUp); //Shawphy:取消向上按钮的函数绑定
         _this.animate({
           marginTop: upHeight
         }, 500, function () {
           for (i = 1; i <= line; i++) { //line4
             _this.find("li:first").appendTo(_this);
           }
           _this.css({
             marginTop: 0,
           });
           _btnUp.bind("click", scrollUp); //Shawphy:绑定向上按钮的点击事件
         });

       }
       //Shawphy:向下翻页函数
       var scrollDown = function () {
         _btnDown.unbind("click", scrollDown);
         for (i = 1; i <= line; i++) {
           _this.find("li:last").show().prependTo(_this);
         }
         _this.css({
           marginTop: upHeight
         });
         _this.animate({
           marginTop: 0
         }, 'slow', function () {
           _btnDown.bind("click", scrollDown);
         });
       }
       //Shawphy:自动播放
       var autoPlay = function () {
         if (timer) timerID = window.setInterval(scrollUp, timer);
       };
       var autoStop = function () {
         if (timer) window.clearInterval(timerID);
       };
       //鼠标事件绑定
       _this.hover(autoStop, autoPlay).mouseout();
       _btnUp.css("cursor", "pointer").click(scrollUp).hover(autoStop, autoPlay); //Shawphy:向上向下鼠标事件绑定
       _btnDown.css("cursor", "pointer").click(scrollDown).hover(autoStop, autoPlay);

     }
   })
 })(jQuery);

html 部分

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui" />
  <link rel="stylesheet" href="./css/myReset.css" />
  <script src="js/jquery-2.1.4.min.js"></script>
  <script src="./js/viewport.js"></script>
  <title></title>
</head>

<body>
  <div class="box">
    <div class="header">
      <div id="changeText1">
        <div class="header-content div1">开通&nbsp;VIP&nbsp;服务</div>
        <div class="header-content div2">享受无限畅聊</div>
        <div class="header-content bgText">更可获得100话费</div>
        <div class="header-content-bottom divdate">
          有效期:&nbsp;2020-03-15
        </div>
      </div>
    </div>
    <div class="scrollText">已有123456人购买</div>

    <div class="vipList">
      <ul>
        <li class="vipListItem">
          <img class="vipIcon" src="./img/yin.png" alt="" />
          <span>
            <i>30天尊贵身份</i>
            <p>赠送10朵小红花</p>
          </span>
          <span class="money">￥30</span>
          <p class="btn" onclick="buyVipCard()">
            <span class="btnImg">1.0元/天</span>
          </p>
          <span class="discount">限时优惠</span>
        </li>
        <li class="vipListItem">
          <img class="vipIcon" src="./img/tong.png" alt="" />
          <span>
            <i>90天尊贵身份</i>
            <p>赠送20朵小红花</p>
          </span>
          <span class="money">￥30</span>
          <p class="btn" onclick="buyVipCard()">
            <span class="btnImg">1.0元/天</span>
          </p>
        </li>
        <li class="vipListItem">
          <img class="vipIcon" src="./img/jin.png" alt="" />
          <span>
            <i>360天尊贵身份</i>
            <p>赠送100朵小红花</p>
          </span>
          <span class="money">￥100</span>
          <p class="btn" onclick="buyVipCard()">
            <span class="btnImg">0.27元/天</span>
          </p>
        </li>
        <li class="vipListItem itemBottom">
          <img class="vipIcon" src="./img/zi.png" alt="" />
          <span>
            <i>360天尊贵身份</i>
            <p>赠送100朵小红花</p>
          </span>
          <span class="money">￥100</span>
          <p class="btn" onclick="buyVipCard()">
            <span class="btnImg">0.27元/天</span>
          </p>
        </li>
      </ul>
    </div>

    <div class="scrollWrap">
      <div class="scrollDiv" id="scrollNews">
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>7</li>
          <li>8</li>
          <li>9</li>
          <li>10</li>
          <li>11</li>
          <li>12</li>
          <li>13</li>
          <li>14</li>
          <li>15</li>
          <li>16费</li>
        </ul>
      </div>
    </div>

    <!-- <div>
      <ul class="texts">
        <li class="textListH">VIP尊贵特权:</li>
        <li class="textList">1、设置勿扰状态，避免骚扰；</li>
        <li class="textList">2、对特定的人可以设置隐身；</li>
        <li class="textList">3、最终解释权归平台所有；</li>
      </ul>
    </div> -->

    <!-- 尊贵特权 -->
    <div class="privilegeBox">
      <img class="privilege" src="./img/privilege.png" alt="" />
    </div>
  </div>

  <script src="./js/scrollTopNews.js" type="text/javascript"></script>
  <script>
    window.onload = function () {
      $("#scrollNews").Scroll({
        line: 4,
        speed: 1000,
        timer: 2000
      });
    }
  </script>
</body>

</html>

css部分

  <style>
    .box {
      width: 100%;
      overflow-x: hidden;
      background: url("./img/bgVip.png") no-repeat center;
      background-size: 100% 100%;
    }

    .header {
      width: 100%;
      margin-left: 0.8rem;
    }

    .header-content {
      width: 100%;
      color: #fff;
    }

    .div1 {
      margin-top: 0.5rem;
      font-size: 0.62rem;
      font-weight: 700;
    }

    .div2 {
      font-size: 0.62rem;
      margin: 0.2rem auto;
      font-weight: 700;
    }

    .divdate {
      font-size: 0.3rem;
      margin: 0.2rem 0 0 0.5rem;
    }

    .bgText {
      background: rgba(255, 255, 255, 0.2);
      border-radius: 20px;
      width: 3.6rem;
      height: 0.6rem;
      text-align: center;
      line-height: 0.6rem;
      font-size: 0.36rem;
      font-weight: 700;
    }

    .header-content-bottom {
      font-size: 0.26rem;
      color: #fff;
    }

    .scrollDiv {
      height: 2rem;
      overflow: hidden;
      font-size: 0.28rem;
      color: #333;
    }

    .scrollWrap {
      padding: 0.4rem 0.3rem;
      margin: 0.5rem 0.3rem 0;
      background: #fff;
      border: #ccc 1px solid;
      border-radius: 20px;
    }

    .scrollDiv ul {
      height: 100%;
      margin: 0 0.3rem;
    }

    .scrollDiv li {
      width: 100%;
      height: 0.5rem;
      line-height: 0.5rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      -o-text-text-overflow: ellipsis;
    }

    /* 已有$人购买 */
    .scrollText {
      color: #fff;
      font-size: 0.36rem;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 20px;
      width: 5rem;
      height: 0.8rem;
      line-height: 0.8rem;
      text-align: center;
      margin: 1.5rem auto 0.5rem;
    }

    /* vip按鈕 */
    .vipList {
      margin: 0 0.3rem;
      border-radius: 10px;
      background: #fff;
    }

    .vipList ul {
      padding: 0.1rem 0;
    }

    .vipList .vipListItem {
      height: 2rem;
      width: 100%;
      position: relative;
      color: #666;
      border-bottom: 1px solid #cfcfcf;
      position: relative;
    }

    .vipList .vipListItem:last-child {
      border-bottom: none;
    }

    .vipList .vipListItem .money {
      font-size: 0.28rem;
      color: #333;
      position: absolute;
      top: 42%;
      right: 30%;
    }

    .vipList .vipListItem span i:first-child {
      font-size: 0.32rem;
      color: #333;
      font-weight: 700;
    }

    .vipList .vipListItem span p {
      font-size: 0.22rem;
      color: #666;
      margin: -0.4rem 1.4rem 0rem;
    }

    .vipList .vipListItem .btn {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translate(-25%, -50%);
      -webkit-transform: translate(-25%, -50%);
      -moz-transform: translate(-25%, -50%);
      -ms-transform: translate(-25%, -50%);
      -o-transform: translate(-25%, -50%);
    }

    .vipList .vipListItem .discount {
      position: absolute;
      right: 10%;
      top: 70%;
      font-size: 0.22rem;
      color: #ff3b5e;
      font-weight: 600;
    }

    .vipList .vipListItem .btn .btnImg {
      background: url("./img/vipBtn.png") no-repeat center;
      background-size: 100% 100%;
      width: 1.5rem;
      height: 0.6rem;
      font-size: 0.28rem;
      display: block;
      line-height: 0.6rem;
      text-align: center;
      color: #fff;
    }

    .vipList .vipIcon {
      width: 1.1rem;
      height: 1.1rem;
      vertical-align: -webkit-baseline-middle;
    }

    /* vip 尊贵特权 */
    .texts {
      color: #333;
      margin: 0.6rem 0.3rem 0.2rem;
      line-height: 0.55rem;
    }

    .texts .textListH {
      font-size: 0.36rem;
      font-weight: 700;
      color: #333;
    }

    .texts .textList {
      font-size: 0.24rem;
      color: #666;
    }

    .privilegeBox {
      margin: 0.5rem 0.3rem;
    }

    .privilege {
      width: 100%;
    }
  </style>
avatar
文章
阅读
粉丝