素材牛VIP会员

页面元素滚动监听JavaScript插件 [原创轻量级]

 所属分类:网页特效-触屏/拖拽/下拉,其他特效

 浏览:1301次  评论:0次  更新时间:2019-01-22
牛币素材VIP可免积分下载
页面元素滚动监听JavaScript插件 [原创轻量级]兼容IE8
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
项目地址(website):https://github.com/941477276/Roll
素材描述:Roll是一个轻量级的页面元素滚动监听js插件,当元素出现在视口时可以执行指定的操作!Roll支持IE8+浏览器。

详细介绍

Roll

一个轻量级的页面元素滚动监听js插件,当元素出现在视口时可以执行指定的操作!Roll支持IE8+浏览器。(注:该插件借用了echo.js代码)

注意:一个页面最多只能new一个实例,因为在Roll初始化时给浏览器绑定了scroll、resize、laod事件,如果new 多个实例,则会给浏览器绑定多次相同事件

Roll用法

<body>
    <p class="p1" data-asyncload><img src="images/2.jpg" alt="" /></p>
    <br /><br />....
    <p class="p2" data-asyncload><img src="images/3.jpg" alt="" /></p>
    <br /><br />....
    <p class="p3" data-asyncload><img src="images/4.jpg" alt="" /></p>
    <br /><br />....
    <p class="p4" data-asyncload><img src="images/img1.jpg" alt="" /></p>
    <br /><br />....
    <script>
        var roll = new Roll({
          offsetTop: 100
        });
        console.log(roll);
        roll.push(document.querySelector(".p1"), function (context, done){
            console.log('图片1出现在视口,可以执行操作了!');
            done(this, context);
        });
        roll.push(document.querySelector(".p2"), function (context, done){
          console.log('图片2出现在视口,可以执行操作了!');
          done(this, context);
          //roll.destroy();
        });
        roll.push(document.querySelector(".p3"), function (context, done){
          console.log('图片3出现在视口,可以执行操作了!');
          done(this, context);
        });
        roll.push(document.querySelector(".p4"), function (context, done){
          console.log('图片4出现在视口,可以执行操作了!');
          done(this, context);
        });
    </script>
</body>

new Roll(options) options可用参数说明

callback

回调函数。当监听的元素出现在视口时会被执行,并且调用时会传递2个参数给使用者。该函数的this指向当前出现在视口的元素。

参数一: context
    context 为 Roll 对象实例
参数二: done
    done为一个函数,调用该方法即可停止监听当前元素

offsetTop

  • 设置元素顶部距离视口多少就开始执行回调函数,默认值为0

offsetLeft

  • 设置元素左侧距离视口多少就开始执行回调函数,默认值为0

offsetRight

  • 设置元素右侧距离视口多少就开始执行回调函数,默认值为0

offsetBottom

  • 设置元素底部距离视口多少就开始执行回调函数,默认值为0

Roll实例方法

push(ele, cb, option)

将元素添加进监听队列,Roll在初始化时给浏览器绑定了scroll、resize、laod事件,因此当触发这些事件时都会计算队列中的元素是否出现在视口内,如果出现在视口内则执行回调函数。

1. ele:dom元素[必填]

2. cb:回调函数[可选],如果传递了则先执行此回调,再执行全局的回调函数,该函数接收2个参数

  • context: Roll对象实例

  • done:一个函数,执行该函数则表示不需要再监听当前元素了。done函数用法:done(当前dom元素, context);

3. options:可选参数,这个参数里面的值会覆盖new Roll(options)中的options值

  • immediate 表示元素添加进队列后是否立即执行一遍,默认值为true

  • offsetTop 设置元素顶部距离视口多少就开始执行回调函数,默认值为0

  • offsetLeft设置元素左侧距离视口多少就开始执行回调函数,默认值为0

  • offsetRight设置元素右侧距离视口多少就开始执行回调函数,默认值为0

  • offsetBottom设置元素底部距离视口多少就开始执行回调函数,默认值为0

destroy

销毁当前Roll实例

文件目录结构

  • images
    • ┝ a1.png
    • ┝ a2.png
    • ┝ a3.png
    • ┝ a4.png
  • ┝ index.html
  • ┝ roll.js

相关素材 - 触屏/拖拽/下拉,其他特效

讨论这个素材(0)回答他人问题或分享使用心得会奖励牛币

〒_〒 居然一个评论都没有……

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:5 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)