建站资源下载详情

为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JS滚动触发插件scroll trigger

来源:易助科技网浏览量:3收藏

简介

scroll trigger是一款 Angular 模块可以在滚动到某个点时触发动作。


使用

1.  引入文件


<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.js"></script>
<script src="https://rawgit.com/princemaple/scroll-trigger/v0.5.0/dist/scroll-trigger.min.js"></script>


2.  HTML


<div class="placeholder"></div>

[CSS]
<style>
  div {width: 200px;height: 1000px;}
  .placeholder {background-color: #000;}
  img {display: block;width: 200px;height: 200px;}
</style>


3.  调用


<script>
  angular.module('demo', ['scroll-trigger']).directive('lazyImg', function(ScrollTrigger) {
    return {
      restrict: 'A',
      scope: true,
      link: function(scope, elem) {
        scope.displayImage = function(randint) {
          elem[0].setAttribute('src', 'http://lorempixel.com/g/200/200?_=' + randint);
        };
      }
    };
  })
  .run(function() {
    for (var i = 0; i < 5; ++i) {
      var img = document.createElement('img')
      img.setAttribute('lazy-img', true);
      img.setAttribute('scroll-trigger', 'displayImage(' + Math.random() + ')');
      document.body.appendChild(img);
    }
  });
</script>



相关链接

Gitee 地址 :https://gitee.com/mirrors/scroll-trigger

.在线演示:https://plnkr.co/edit/JWFntSUoMewTj9hULfD1?p=preview&preview