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