安信娱乐谁是老板

拼图开发文档

滚动监听

滚动监听为当对象在滚动时,执行对应的事件;通常的做法为当对象滚动到一定位置时,改变目标对象的样式行为。

基本样式

滚动监听需要指定滚动的元素relative,滚动目标对象target及触发对象togglerelative当不指定时,默认为窗口;toggle触发对象可为空。

    <ul class="nav nav-tabs bg-white" id="scroll-nav">
      <li class="active"><a href="javascript:;">一</a></li>
      <li><a href="javascript:;">二</a></li>
      <li><a href="javascript:;">三</a></li>
      <li><a href="javascript:;">四</a></li>
    </ul>
    <div id="scroll">
      <div class="alert-success">一</div>
      <div class="alert-info">二</div>
      <div class="alert-danger">三</div>
      <div class="alert-warning">四</div>
    </div>
    <style>
      body{padding-top:46px;}
      #scroll-nav{position:fixed;top:0;left:0;right:0;}
      #scroll>div{margin-top:1rem;border-radius:.25rem;display:flex;height:350px;align-items:center;justify-content:center;}
      #scroll>div.active{background:#0a8 !important;color:#fff;}
    </style>
  

调用方法

    <script>
      $(function(){
        $().scroll({
          "toggle":"#scroll-nav>li",
          "target":"#scroll>div",
        });
      });
    </script>
  
示例为当目标对象滚动到顶部时,目标对象及触发对象均添加样式.active;添加的样式也可以通过target_classtoggle_class自定义。

参数说明

参数类型默认值参数值说明
targetobject//目标的对象,即滚动后监听的对象
target_classclassactive/目标的对象滚动到相应位置后添加的样式类
toggleobject//触发对象,通常为导航,可为空。
toggle_classclassactive/目标的对象滚动到相应位置后触发对象添加的样式类
fixedboolfalsetrue:固定
false:滚动
效果为滚动还是固定
offsetnumber0/偏离值,为相对于滚动元素的相对位置的距离。
bottomboolfalsefalse:相对顶部滚动
true:相对底部滚动
相对底部滚动
fullboolfalsefalse:非全屏显示
true:全屏显示
全屏显示
loopboolfalsefalse:对象样式来回加载
true:对象样式只加载一次
样式循环
delaynumber15/目标对象延时显示时间

相对位置

除相对于滚动元素的顶部外,当bottomtrue时也可以相对于底部,同时也可设置偏移值offset

    <ul class="nav nav-tabs" id="bottom-nav">
      <li class="active"><a href="javascript:;">一</a></li>
      <li><a href="javascript:;">二</a></li>
      <li><a href="javascript:;">三</a></li>
      <li><a href="javascript:;">四</a></li>
    </ul>
    <div id="bottom" style="height:300px;overflow:auto;">
      <div class="alert-success">一</div>
      <div class="alert-info">二</div>
      <div class="alert-danger">三</div>
      <div class="alert-warning">四</div>
    </div>
    <style>
      #bottom>div{margin-top:1rem;padding-top:1rem;border-radius:.25rem;display:flex;height:350px;justify-content:center;}
      #bottom>div.active{background:#0a8 !important;color:#fff;}
    </style>
    <script>
      $(function(){
        $("#bottom").scroll({
          "toggle":"#bottom-nav>li",
          "target":"#bottom>div",
          "bottom":true,
          "offset":60,
          "full":true,
        });
      });
    </script>
  
fulltrue时,滚动目标的宽放与滚动窗口相同。

固定位置

当设置fixedtrue安信娱乐谁是老板时,可将元素固定的指定位置。

固定顶部

    <div style="height:200px;">请向下滚动</div>
    <div class="bg-main bg-inverse padding radius" align="cetner">固定到顶部1</div>
    <div style="height:200px;"></div>
    <div class="bg-sub bg-inverse padding radius" align="cetner">固定到顶部2</div>
    <div style="height:600px;"></div>
    <style>
      .bg-inverse.active{position:fixed;width:100%;top:0;}
    </style>
    <script>
      $(function(){
        $().scroll({
          "target":".bg-inverse",
          "fixed":true,
          "loop":true,
        });
      });
    </script>
  

固定底部

    <div style="height:360px;">请向下滚动</div>
    <div class="bg-main bg-inverse padding radius" align="cetner">固定到底部1</div>
    <div style="height:200px;"></div>
    <div class="bg-sub bg-inverse padding radius" align="cetner">固定到底部2</div>
    <div style="height:300px;"></div>
    <style>
      .bg-inverse.active{position:fixed;width:100%;bottom:0;}
    </style>
    <script>
      $(function(){
        $().scroll({
          "target":".bg-inverse",
          "fixed":true,
          "bottom":true,
          "loop":true,
        });
      });
    </script>
  

延时显示

默认间隔延时为delay15ms,也可根据应用需要调整其值。

图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
    <div id="show" style="height:300px;overflow:auto;">
      <div class="grid-small">
        <div class="grid">
          <div class="x4"><img src="..." class="img-auto" alt="图片" /></div>
          ...
          <div class="x4"><img src="..." class="img-auto" alt="图片" /></div>
        </div>
      </div>
    </div>
    <style>
      #show>div>.grid>div.x4{opacity:0;}
      #show>div>.grid>div.x4.active{opacity:1;}
    </style>
    <script>
      $(function(){
        $("#show").scroll({
          "target":"#show>div>.grid>.x4",
          "bottom":true,
          "offset":50,
          "loop":true,
          "delay":10,
        });
      });
    </script>