页面滚动时为元素动态添加class类的jQuery插件

一款页面滚动时为元素动态添加class类的jQuery插件，鼠标滚动时，给指定的页面元素添加预设的class样式，演示页面给出了3种样式效果：滑动显示、淡入显示和淡出显示，当然，你可以根据示例效果进行自由发挥的。

分类：其它特效 > jQuery插件难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，仅需引入一个CSS样式文件即可，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，将3种不同的演示效果放入不同的section标签里面，代码如下：

<div id="wrapper">
    <div id="container">
      <section class="main">
        <section class="block">
          <h3 class="blockTit" style="margin-top:50px;">滑动显示</h3>
          <p class="blockCaption">devideHeight:2,timeout:100</p>
          <div class="blockContent">
            <p id="js-slideIn" class="js-slideIn blockImg"><img src="img/img.jpg" alt="" class="resp"></p>
          </div>
        </section>
        <section class="block">
          <h3 class="blockTit">淡入显示</h3>
          <p class="blockCaption">devideHeight:2,timeout:500</p>
          <div class="blockContent">
            <p id="js-fadeIn" class="js-fadeIn blockImg"><img src="img/img.jpg" alt="" class="resp"></p>
          </div>
        </section>
        <section class="block">
          <h3 class="blockTit">淡出显示</h3>
          <p class="blockCaption">devideHeight:2,timeout:800</p>
          <div class="blockContent">
            <p id="js-fadeOut" class="js-fadeOut blockImg"><img src="img/img.jpg" alt="" class="resp"></p>
          </div>
        </section>
      </section>
    </div><!-- #container -->
</div><!-- #wrapper -->

页面的底部，需引入jQuery库和3个JS文件，代码如下：

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript" src="js/jquery-scrollAddClass.js"></script>
<script type="text/javascript" src="js/demo.js"></script>