开言 本篇文章经过开源html5引擎lufylegend完成JQuery滑动效果。能使一个矩形来回减速加快滑行。因为用到了html5里的canvas，所以若是咱们要测验程序，请用撑持html5的浏览器翻开。源码下载稍后供给。 初始化页面 首要咱们来看看html文件里的代码： html5 game - 仿jquery

或许有人疑问，说是用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的： init(50,"mylegend",800,400,main); 开端移动 看完初始化有些，咱们不仿来看看是如何做到能使一个矩形来回减速加快滑行。首要咱们来看看main.js里的代码： init(50,"mylegend",800,400,main); var backLayer; var speed = 20,x = 0; function main(){ //参加层 initLayer(); //开端移动 setInterval(function(){move();},10); } function initLayer(){ //参加布景层 backLayer = new LSprite(); addChild(backLayer); } function move(){ //清空布景 backLayer.graphics.drawRect(0,"white",[0,0,800,400],true,"white"); //制作矩形 backLayer.graphics.drawRect(0,"dimgray",[x =speed,0,200,200],true,"gray"); //将速度逐步变小 speed--; //当速度小于或等于-20时，将速度从头设为20 if(speed <= -20){ speed = 20; } } 当我初始化结束后，我参加了层，也就LSprite，用法如下： ■效果： LSprite 类是根本显现列表结构块，一个可显现图形而且也可包括子项的显现列表节点。 ■可用特点： type:类型 x:坐标x y:坐标y scaleX:X坐标方向上的缩放份额 alpha:透明度 rotate:旋转视点 visible:能否可见，当设为false的时分，该LBitmap目标不可视，且内部一切处置都将中止 childList:该目标的一切子项 graphics:指定属于此 LSprite 的 Graphics 目标，在此 LSprite 中可执行矢量绘图指令。 box2dBody:联系box2dweb后，创立的body2d mask:遮罩 举个比如： var loader; init(200,"mylegend",500,350,main); function main(){ loader = new LLoader(); loader.addEventListener(LEvent.COMPLETE,loadBitmapdata); loader.load("img.png","bitmapData"); } function loadBitmapdata(event){ var bitmapdata = new LBitmapData(loader.content,0,0,64,64); var bitmap = new LBitmap(bitmapdata); var layer = new LSprite(); addChild(layer); layer.addChild(bitmap); }当层初始化完成后，就能够开端移动矩形了。首要我用setInterval不断地画矩形，为了不让矩形堆叠，我让它每画一次，清空一次屏幕。 //清空布景 backLayer.graphics.drawRect(0,"white",[0,0,800,400],true,"white"); //制作矩形 backLayer.graphics.drawRect(0,"dimgray",[x =speed,0,200,200],true,"gray");以上代码完成了不断画矩形。能够看到，我是在backLayer层上实施制作的。至于graphics的用法，我将它列在下面： drawRect(      thickness,      lineColor,      pointArray,      isfill,      color  ) ■效果： 画一个矩形 ■参数： thickness：边际线粗 lineColor：边际线色彩 pointArray：[开始坐标x,开始坐标y,矩形宽width,矩形高height] isfill：能否实心图形 color：实心色彩 接下来就是改动速度。首要我将每次移动的速度削减1，然后进行一次从头制作。这样的画就能够进行减速加快滑行。速度削减成了负数就会往反方向走，但若是削减的太多就会移出屏幕，所以给它一个约束： if(speed <= -20){ speed = 20; }也就是说若是削减的速度达到了-20那就让矩形往回跑。 这样一来，来回滑动就做好了。 代码下载 下载地址：http://download.csdn.net/download/theera_wpyh/5126953 ------------------------------------------------------------- 欢送咱们转载我的文章 转载请注明：转自TheEra's Magic Box http://www.fpjinan.com/linked/20130311.do