HTML5制作仿jQuery效果

时间：2016-02-29

开言


       本篇文章通过开源html5引擎lufylegend实现JQuery滑动效果。能使一个矩形来回减速加速滑行。由于用到了html5里的canvas，所以如果大家要测试程序，请用支持html5的浏览器打开。源码下载稍后提供。


初始化页面


首先我们来看看html文件里的代码：



  1. >  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.     <title>html5 game - 仿jquerytitle>  
  6.     <script type="text/javascript" src="./js/lufylegend-1.6.1.min.js">script>  
  7.     <script type="text/javascript" src="./js/main.js">script>  
  8. head>  
  9. <body>  
  10.     <div id="mylegend">loading……div>  
  11. body>  
  12. html>  

        也许有人疑问，说是用html5，怎么不见canvas标签？？？其实当你使用lufylegend开发时，根本不需要加入canvas标签。只需要调用该引擎中的init函数并向参数赋值就能自动将canvas标签加到html文件中。

        接下来让我们看看init用法：init(speed,id,width,height,function,type);其中speed代表页面更换速度，id代表传入的一个div的id，库件进行初始化的时候，会自动将canvas加入到此div内部，width和height分别代表页面大小，function就是初始化完成后调用的函数，最后一个参数type为null时，会先进行页面的onload操作，如果init函数调用是在onload之后，那么需要将此参数设为LEvent.INIT。


我在js里是这样调用init的：



  1. init(50,"mylegend",800,400,main);  


开始移动


看完初始化部分，我们不仿来看看是怎样做到能使一个矩形来回减速加速滑行。首先我们来看看main.js里的代码：

上一篇：HTML5 区域(Sectioning)的重要性 下一篇：HTML 5应用程序缓存使用总结

相关文章

最新文章

Copyright © 2022-2023 HTML5模板网 版权所有并保留所有权