jQuery网页滚动更改背景颜色插件

插件特效

2026-07-25 23:05 6 次浏览 • 0 次下载 2.1KB

插件描述：这个滚动是使用jQuery构建的插件，兼容ie7代码少，使用方便。

更新时间：2019-10-13 22:38:31

使用方法

需要调用3个文件

<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src='dist/jquery.scrollie.min_1.js'></script> 
<script  src="dist/script.js"></script>

html

<div class="main-wrapper">
  <div class="slide slide-one" data-background="#3498db">
    <div class="inside">
      <p>向下滚动网页改变背景颜色</p>
    </div>
  </div>
  <div class="slide slide-two" data-background="#27ae60">
    <div class="inside">
      <p>这是第二屏，看背景颜色在改变<br />     
    </div>
  </div>
  <div class="slide slide-three" data-background="#e74c3c">
    <div class="inside">
      <p>这是第三屏，看背景颜色在改变</p>
    </div>
  </div>
  <div class="slide slide-four" data-background="#e67e22">
    <div class="inside">
      <p>这是第四屏，看背景颜色在改变</p>
    </div>
  </div>
  <div class="slide slide-five" data-background="#9b59b6">
    <div class="inside">
      <p>这是第五屏，看背景颜色在改变</p>
    </div>
  </div>
  <div class="slide slide-five" data-background="#34495e">
    <div class="inside">
      <p>这是第六屏，看背景颜色在改变 </p>
    </div>
  </div>
</div>

每屏修改对应的data-background值即可。