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

所属分类:UI-滚动

 14274  194  查看评论 (2)
分享到微信朋友圈
X
jQuery网页滚动更改背景颜色插件 ie兼容7

更新时间: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值即可。

相关插件-滚动

视觉滚动差效果

纯css3写的滚动视差效果
  滚动
 31776  357

jQuery元素滚动监听插件xRoll.js

xRoll.js 元素滚动监听插件 元素出现在窗口的时候在执行自定义的函数
  滚动
 24362  324

滚动条

可定制的滚动条,通过js+css实现
  滚动
 53182  335

仿mac风格滚动条

经典仿mac风格滚动条
  滚动
 42971  401

讨论这个项目(2)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    飘空的叶子 0
    2022/9/15 19:03:23
    要怎么让它每滚一页都到每个id暂停呢? 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复