Lazy 懒加载

使用说明 JS

给需要懒加载的元素添加ax-lazy类即可。元素超出屏幕会自动隐藏(opacity=0),当元素进入屏幕会渐显(opacity=1)。如果需要更炫酷的进入效果请自行修改代码。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
                                <ul>
                                    <li class="ax-lazy demo-section-border" style="background-color: #cae2b3">1</li>
                                    <li class="ax-lazy demo-section-border" style="background-color: #ffc600">2</li>
                                    <li class="ax-lazy demo-section-border" style="background-color: #ff9c00">3</li>
                                    <li class="ax-lazy demo-section-border" style="background-color: #7df7ca">4</li>
                                    <li class="ax-lazy demo-section-border" style="background-color: #bcf77d">5</li>
                                    <li class="ax-lazy demo-section-border" style="background-color: #7dd6f7">6</li>
                                    <li class="ax-lazy demo-section-border" style="background-color: #ea7df7">7</li>
                                    <li class="ax-lazy demo-section-border" style="background-color: #f77db4">8</li>
                                    <li class="ax-lazy demo-section-border" style="background-color: #f7b97d">9</li>
                                    <li class="ax-lazy demo-section-border" style="background-color: #f7887d">10</li>
                                    <li class="ax-lazy demo-section-border" style="background-color: #7d8ef7">11</li>
                                    <li class="ax-lazy demo-section-border" style="background-color: #b47df7">12</li>
                                    <li class="ax-lazy demo-section-border" style="background-color: #f7ed7d">13</li>
                                    <li class="ax-lazy demo-section-border" style="background-color: #7df7b9">14</li>
                                    <li class="ax-lazy demo-section-border" style="background-color: #f77db1">15</li>
                                </ul>
                                    

放大进入 JS

给需要放大进入的元素添加ax-scale类即可。当元素进入屏幕会从0放大正常大小。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
                                <ul>
                                    <li class="ax-lazy ax-scale demo-section-border" style="background-color: #cae2b3">1</li>
                                    <li class="ax-lazy ax-scale  demo-section-border" style="background-color: #ffc600">2</li>
                                    <li class="ax-lazy ax-scale  demo-section-border" style="background-color: #ff9c00">3</li>
                                    <li class="ax-lazy ax-scale  demo-section-border" style="background-color: #7df7ca">4</li>
                                    <li class="ax-lazy ax-scale  demo-section-border" style="background-color: #bcf77d">5</li>
                                    <li class="ax-lazy ax-scale  demo-section-border" style="background-color: #7dd6f7">6</li>
                                    <li class="ax-lazy ax-scale  demo-section-border" style="background-color: #ea7df7">7</li>
                                    <li class="ax-lazy ax-scale  demo-section-border" style="background-color: #f77db4">8</li>
                                    <li class="ax-lazy ax-scale  demo-section-border" style="background-color: #f7b97d">9</li>
                                    <li class="ax-lazy ax-scale  demo-section-border" style="background-color: #f7887d">10</li>
                                    <li class="ax-lazy ax-scale  demo-section-border" style="background-color: #7d8ef7">11</li>
                                    <li class="ax-lazy ax-scale  demo-section-border" style="background-color: #b47df7">12</li>
                                    <li class="ax-lazy ax-scale  demo-section-border" style="background-color: #f7ed7d">13</li>
                                    <li class="ax-lazy ax-scale  demo-section-border" style="background-color: #7df7b9">14</li>
                                    <li class="ax-lazy ax-scale  demo-section-border" style="background-color: #f77db1">15</li>
                                </ul>
                                    

飞入 JS

给需要飞入的元素添加ax-fly类即可。当元素进入屏幕会从底往上飘入。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
                                 <ul>
                                    <li class="ax-lazy ax-fly  demo-section-border" style="background-color: #cae2b3">1</li>
                                    <li class="ax-lazy ax-fly  demo-section-border" style="background-color: #ffc600">2</li>
                                    <li class="ax-lazy ax-fly  demo-section-border" style="background-color: #ff9c00">3</li>
                                    <li class="ax-lazy ax-fly  demo-section-border" style="background-color: #7df7ca">4</li>
                                    <li class="ax-lazy ax-fly  demo-section-border" style="background-color: #bcf77d">5</li>
                                    <li class="ax-lazy ax-fly  demo-section-border" style="background-color: #7dd6f7">6</li>
                                    <li class="ax-lazy ax-fly  demo-section-border" style="background-color: #ea7df7">7</li>
                                    <li class="ax-lazy ax-fly  demo-section-border" style="background-color: #f77db4">8</li>
                                    <li class="ax-lazy ax-fly  demo-section-border" style="background-color: #f7b97d">9</li>
                                    <li class="ax-lazy ax-fly  demo-section-border" style="background-color: #f7887d">10</li>
                                    <li class="ax-lazy ax-fly  demo-section-border" style="background-color: #7d8ef7">11</li>
                                    <li class="ax-lazy ax-fly  demo-section-border" style="background-color: #b47df7">12</li>
                                    <li class="ax-lazy ax-fly  demo-section-border" style="background-color: #f7ed7d">13</li>
                                    <li class="ax-lazy ax-fly  demo-section-border" style="background-color: #7df7b9">14</li>
                                    <li class="ax-lazy ax-fly  demo-section-border" style="background-color: #f77db1">15</li>
                                 </ul>