一款页面滚动时为元素动态添加class类的jQuery插件,鼠标滚动时,给指定的页面元素添加预设的class样式,演示页面给出了3种样式效果:滑动显示、淡入显示和淡出显示,当然,你可以根据示例效果进行自由发挥的。
页面的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>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791