JQUERY教程

当前位置: HTML5技术网 > JQUERY教程 > HTML5制作仿jQuery效果

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制作仿jQuery效果】相关文章

1. HTML5制作仿jQuery效果

2. HTML5制作仿jQuery效果

3. HTML5制作基于模拟现实物理效果的游戏

4. 基于HTML5制作在线上海地铁图

5. jQuery & Canvas 制作相机快门效果

6. 使用 jQuery & Canvas 制作相机快门效果

7. jQuery 制作逼真的日历翻转效果的倒计时

8. jQuery & Canvas 制作相机快门效果

9. 学习使用 jQuery & CSS3 制作照片堆栈效果

10. HTML5 CSS3 jQuery制作视频播放器完全指南

本文来源:https://www.51html5.com/a1144.html

点击展开全部

﹝HTML5制作仿jQuery效果﹞相关内容

「HTML5制作仿jQuery效果」相关专题

其它栏目

也许您还喜欢