其他代码
jquery.scrollex - 页面滚动效果jQuery事件插件
PetitQ
jquery.scrollex.js 是一款可制作炫酷页面滚动效果的 jQuery 事件插件。该插件中包含有一组预置的 jQuery 事件，通过这些事件，可以在页面滚动时为指定元素制作相应的动画效果。
使用方法:
要使用这个 jQuery 插件，需要在页面中引入 jquery(1.11+)和 jquery.scrollex.js 文件。
也想出现在这里？联系我们吧
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollex.js"></script>
调用插件:
在页面 DOM 元素加载完毕之后，你可以通过 scrollex()方法来初始化插件。例如，在指定元素上制作进入视口和离开视口的效果：
$(function() {
$('#foobar').scrollex({
enter: function() {
$(this).css('background-color', 'green');
},
leave: function() {
$(this).css('background-color', '');
}});
});
事件:
jquery.scrollex.js 插件支持以下一些事件。
enter：当指定元素进入视口时触发。可以通过 mode, top 和 bottom 参数来调整它的行为
leave：当指定元素离开视口时触发。可以通过 mode, top 和 bottom 参数来调整它的行为
initialize：当 scrollex()方法在某个元素上调用时触发
terminate：当 unscrollex()方法在某个元素上调用时触发，它的作用是撤销前一个 scrollex()调用
scroll：在某个元素滚动通过视口时触发。例如：
$(function() {
$('#foobar').scrollex({
scroll: function(progress) {
$(this).css('opacity', Math.max(0, Math.min(1, progress)));
}});
});
元素在视口中的位置可以通过 mode, top 和 bottom 参数来做进一步的调整。
mode:
用于决定元素和视口的接触面积，判断一个元素是否在视口之内。可以是下面的一些取值：
| 取值 | 行为 |
| default | 元素和视口的接触面积在视口之内。 |
| top | 顶部视口边缘在元素之内。 |
| bottom | 底部视口边缘在元素之内。 |
| middle | 顶部或底部视口边缘在元素的中间。 |
top 和 bottom:
通过 top 和 bottom 参数可以移动元素和视口的接触面积，可以使用像素值，百分比值，或视口的百分比值(如 20vh)。正值向视口内部移动，负值向视口外部移动。例如：
$(function() {
$('#foobar').scrollex({
top: '-20%',
bottom: '-20%',
enter: function() {
$(this).css('background-color', 'green');
},
leave: function() {
$(this).css('background-color', '');
}});
});
jquery.scrollex.js 插件的 github 地址为：https://github.com/n33/jquery.scrollex
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
