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

所属分类:UI-滚动

 14306  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值即可。

相关插件-滚动

jQuery滚动收缩导航

jQuery滚动收缩导航
  滚动
 37017  373

jquery逐条文字向上滚动

jquery逐条文字向上滚动效果
  滚动
 50958  426

锚点,可以扩展很多功能

锚点定位,代码实现简单,无依赖其它插件
  滚动
 23747  343

jQuery自定义滚动条插件

支持IE9及以上,360,谷歌,火狐的自定义滚动条,可以设置滚动条的初始位置以及滚动条的颜色等
  滚动
 26883  316

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

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