html5中文学习网

您的位置: 首页?>?视频今晚买特马?>?html5视频今晚买特马 ? 正文

HTML5制作仿jQuery效果

[ ] 已经帮助:人解决问题

开言

dDgHTML5中文学习网 - HTML5先行者学习网

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

dDgHTML5中文学习网 - HTML5先行者学习网
dDgHTML5中文学习网 - HTML5先行者学习网

初始化页面

dDgHTML5中文学习网 - HTML5先行者学习网

首先我们来看看html文件里的代码:dDgHTML5中文学习网 - HTML5先行者学习网

dDgHTML5中文学习网 - HTML5先行者学习网
dDgHTML5中文学习网 - HTML5先行者学习网

dDgHTML5中文学习网 - HTML5先行者学习网
  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>??
dDgHTML5中文学习网 - HTML5先行者学习网
? ? ? ? 也许有人疑问,说是用html5,怎么不见canvas标签???其实当你使用lufylegend开发时,根本不需要加入canvas标签。只需要调用该引擎中的init函数并向参数赋值就能自动将canvas标签加到html文件中。
dDgHTML5中文学习网 - HTML5先行者学习网

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

dDgHTML5中文学习网 - HTML5先行者学习网
dDgHTML5中文学习网 - HTML5先行者学习网

我在js里是这样调用init的:dDgHTML5中文学习网 - HTML5先行者学习网

dDgHTML5中文学习网 - HTML5先行者学习网
dDgHTML5中文学习网 - HTML5先行者学习网

dDgHTML5中文学习网 - HTML5先行者学习网
  1. init(50,"mylegend",800,400,main);??

dDgHTML5中文学习网 - HTML5先行者学习网

开始移动

dDgHTML5中文学习网 - HTML5先行者学习网

看完初始化部分,我们不仿来看看是怎样做到能使一个矩形来回减速加速滑行。首先我们来看看main.js里的代码:dDgHTML5中文学习网 - HTML5先行者学习网

dDgHTML5中文学习网 - HTML5先行者学习网
  1. init(50,"mylegend",800,400,main);??
  2. var?backLayer;??
  3. var?speed?=?20,x?=?0;??
  4. function?main(){??
  5. ????//加入层??
  6. ????initLayer();??
  7. ????//开始移动??
  8. ????setInterval(function(){move();},10);??
  9. }??
  10. function?initLayer(){??
  11. ????//加入背景层??
  12. ????backLayer?=?new?LSprite();??
  13. ????addChild(backLayer);??
  14. }??
  15. function?move(){??
  16. ????//清空背景??
  17. ????backLayer.graphics.drawRect(0,"white",[0,0,800,400],true,"white");??
  18. ????//绘制矩形??
  19. ????backLayer.graphics.drawRect(0,"dimgray",[x+=speed,0,200,200],true,"gray");??
  20. ????//将速度逐渐变小??
  21. ????speed--;??
  22. ????//当速度小于或等于-20时,将速度重新设为20??
  23. ????if(speed?<=?-20){??
  24. ????????speed?=?20;??
  25. ????}??
  26. }??

当我初始化完毕后,我加入了层,也就LSprite,用法如下:dDgHTML5中文学习网 - HTML5先行者学习网

dDgHTML5中文学习网 - HTML5先行者学习网
dDgHTML5中文学习网 - HTML5先行者学习网

■作用:
LSprite 类是基本显示列表构造块,一个可显示图形并且也可包含子项的显示列表节点。
dDgHTML5中文学习网 - HTML5先行者学习网
dDgHTML5中文学习网 - HTML5先行者学习网

■可用属性:
type:类型
x:坐标x
y:坐标y
scaleX:X坐标方向上的缩放比例
alpha:透明度
rotate:旋转角度
visible:是否可见,当设为false的时候,该LBitmap对象不可视,且内部所有处理都将停止
childList:该对象的所有子项
graphics:指定属于此 LSprite 的 Graphics 对象,在此 LSprite 中可执行矢量绘图命令。
box2dBody:结合box2dweb后,创建的body2d
mask:遮罩
dDgHTML5中文学习网 - HTML5先行者学习网

dDgHTML5中文学习网 - HTML5先行者学习网
dDgHTML5中文学习网 - HTML5先行者学习网

举个例子:dDgHTML5中文学习网 - HTML5先行者学习网

  1. var?loader;????
  2. init(200,"mylegend",500,350,main);??
  3. function?main(){????
  4. ????loader?=?new?LLoader();????
  5. ????loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);????
  6. ????loader.load("img.png","bitmapData");????
  7. }????
  8. function?loadBitmapdata(event){????
  9. ????var?bitmapdata?=?new?LBitmapData(loader.content,0,0,64,64);????
  10. ????var?bitmap?=?new?LBitmap(bitmapdata);??
  11. ????var?layer?=?new?LSprite();??
  12. ????addChild(layer);??
  13. ????layer.addChild(bitmap);??
  14. } ?

当层初始化完成后,就可以开始移动矩形了。首先我用setInterval不断地画矩形,为了不让矩形重叠,我让它每画一次,清空一次屏幕。dDgHTML5中文学习网 - HTML5先行者学习网

[javascript]?view plaincopy
  1. //清空背景??
  2. backLayer.graphics.drawRect(0,"white",[0,0,800,400],true,"white");??
  3. //绘制矩形??
  4. backLayer.graphics.drawRect(0,"dimgray",[x+=speed,0,200,200],true,"gray");??

dDgHTML5中文学习网 - HTML5先行者学习网
以上代码实现了不断画矩形。可以看到,我是在backLayer层上实行绘制的。至于graphics的用法,我将它列在下面:dDgHTML5中文学习网 - HTML5先行者学习网

dDgHTML5中文学习网 - HTML5先行者学习网

drawRect(?
? ? thickness,?
? ? lineColor,?
? ? pointArray,?
? ? isfill,?
? ? color?
)
dDgHTML5中文学习网 - HTML5先行者学习网
dDgHTML5中文学习网 - HTML5先行者学习网

■作用:
画一个矩形
dDgHTML5中文学习网 - HTML5先行者学习网


■参数:
thickness:边缘线粗
lineColor:边缘线颜色
pointArray:[起始坐标x,起始坐标y,矩形宽width,矩形高height]
isfill:是否实心图形
color:实心颜色

dDgHTML5中文学习网 - HTML5先行者学习网

接下来就是改变速度。首先我将每次移动的速度减少1,然后进行一次重新绘制。这样的画就可以进行减速加速滑行。速度减少成了负数就会往反方向走,但如果减少的太多就会移出屏幕,所以给它一个限制:dDgHTML5中文学习网 - HTML5先行者学习网

[javascript]?view plaincopy
  1. if(speed?<=?-20){??
  2. <>"white-space:pre">??speed?=?20;??
  3. }??

也就是说如果减少的速度达到了-20那就让矩形往回跑。dDgHTML5中文学习网 - HTML5先行者学习网

这样一来,来回滑动就做好了。dDgHTML5中文学习网 - HTML5先行者学习网

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助