欢迎光临
Html5圈

HTML5制作仿jQuery效果

开言


       本篇文章通过开源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圈 » HTML5制作仿jQuery效果

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

HTML5网站定制 更优秀 更专业

联系我们全国服务热线