GitHub:https://github.com/dirkgroenen/jQuery-viewport-checker
版本:Release 1.8.8
本地下载:jQuery-viewport-checker-master
插件说明:
这是一个通过监测页面中的元素在浏览器中的位置,适时添加、删除类的一种插件。
比如,可以设置元素滚动到窗口指定位置的时候对该元素添加样式,使其淡入,或者做某个动作。
插件的用法:
<head>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="jquery.viewportchecker.min.js"></script>
<script>
$(document).ready(function(){
$('.dummy').viewportChecker();
});
</script>
</head>
全局设置:
$('.dummy').viewportChecker({
classToAdd: 'visible', // 元素可见时需要加的Class,
classToAddForFullView: 'full-visible', // 元素完全可见时需要加的Class
classToRemove: 'invisible', // 'classToAdd'类被添加之前要添加的Class
removeClassAfterAnimation: false, // 动画结束后是否要删除被添加的Class
offset: [100 OR 10%], // 相对于基准位置的偏移量
invertBottomOffset: true, // 是否以底部为基准位置
repeat: false, // Add the possibility to remove the class if the elements are not visible
callbackFunction: function(elem, action){}, // 回调函数
scrollHorizontal: false // 是否水平滚动
});
单独设置:
除了全局设置以外呢,你也可以使用data-方式,给每个元素单独设置属性。这些属性会覆盖全局设置。
评论区
发表新的留言
您可以留言提出您的疑问或建议。
您的留言得到回复时,会通过您填写的邮箱提醒您。