HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 教程视频 HTML5教程 查看内容

HTML5制作仿jQuery效果

2013-3-11 10:45| 发布者: html5cn| 查看: 20697| 评论: 1|来自: csdn

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

开言


       本篇文章通过开源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里的代码:

123下一页
更多
4

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (4 人)

相关阅读

发表评论

最新评论

引用 天地一マダオ 2013-3-24 11:23
好人,学到了

查看全部评论(1)

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-1-21 04:02

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部