要使用这个jQuery插件，需要在页面中引入jquery(1.11+)和jquery.scrollex.js文件。
1 2 | <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()方法来初始化插件。例如，在指定元素上制作进入视口和离开视口的效果：
1 2 3 4 5 6 7 8 9 10 11 12 | $(function() { $('#foobar').scrollex({ enter: function() { // Set #foobar's background color to green when we scroll into it. $(this).css('background-color', 'green'); }, leave: function() { // Reset #foobar's background color when we scroll out of it. $(this).css('background-color', ''); } });}); |
事件
jquery.scrollex.js插件支持以下一些事件。
enter：当指定元素进入视口时触发。可以通过mode, top和bottom参数来调整它的行为。
leave：当指定元素离开视口时触发。可以通过mode, top和bottom参数来调整它的行为。
initialize：当scrollex()方法在某个元素上调用时触发。
terminate：当unscrollex()方法在某个元素上调用时触发，它的作用是撤销前一个scrollex()调用。
scroll：在某个元素滚动通过视口时触发。例如：
1 2 3 4 5 6 7 8 9 10 | $(function() { $('#foobar').scrollex({ scroll: function(progress) { // Progressively increase #foobar's opacity as we scroll through it. $(this).css('opacity', Math.max(0, Math.min(1, progress))); } });}); |
mode, top和bottom
元素在视口中的位置可以通过mode, top和bottom参数来做进一步的调整。
mode
用于决定元素和视口的接触面积，判断一个元素是否在视口之内。可以是下面的一些取值：
取值行为
default元素和视口的接触面积在视口之内。
top顶部视口边缘在元素之内。
bottom底部视口边缘在元素之内。
middle顶部或底部视口边缘在元素的中间。
top和bottom
通过top和bottom参数可以移动元素和视口的接触面积，可以使用像素值，百分比值，或视口的百分比值(如20vh)。正值向视口内部移动，负值向视口外部移动。例如：
1 2 3 4 5 6 7 8 9 10 11 12 13 | $(function() { $('#foobar').scrollex({ top: '-20%', bottom: '-20%', enter: function() { $(this).css('background-color', 'green'); }, leave: function() { $(this).css('background-color', ''); } });}); |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： 不规则图片切换特效
- 下一个特效： 基于GSAP的响应式全屏背景图片jQuery幻灯片插件