H5Gradualchange

功能描述

  1. 两个功能,文字颜色渐变与文字部分颜色改变。

依赖的模块

  1. 文字部分颜色改变使用了artTemplate

快速使用

方法一

  1. 文字颜色渐变,使用CSS样式zknight-h5changefont-gradualchange即可

方法二

  1. 引用zepto.min.js(引用各自js插件)、template.jszknight_h5gradualchange_common.js
  2. 并使用CSS样式zknight-h5changefont-change,编写template
  3. 最后调用下面方法zknightChangeFont("HELLO WORLD!!");即可。
  1. HTML部分:
  2. <html>
  3. <!-- 部分文字颜色变化 -->
  4. <body>
  5. <div id="zknight_changeFont_model">
  6. <!-- template加载文字内容 -->
  7. </div>
  8. </body>
  9. <script id="zknight_changeFont_tpl" type="text/html">
  10. {{each data as font}}
  11. <span class="zknight-h5changefont-change" data-content="{{font}}">{{font}}</span>
  12. {{/each}}
  13. </script>
  14. <script type="text/javascript">
  15. $(function(){
  16. zknightChangeFont("HELLO WORD");
  17. });
  18. </script>
  19. </html>

特别说明