『HTML5制作仿JQuery效果』减速&加速滑动的实现

最新推荐文章于 2022-01-04 21:59:36 发布

Shin-TheEra

最新推荐文章于 2022-01-04 21:59:36 发布

阅读量7k

点赞数

分类专栏： HTML5 & Javascript 文章标签： html5 仿JQuery

本文链接：https://blog.csdn.net/TheEra_Wpyh/article/details/8656219

版权

本文利用html5的lufylegend引擎，详细介绍了如何创建一个矩形，使其能来回减速加速滑行，类似于JQuery效果。通过调整移动速度并限制范围，实现了滑动的动态变化。提供了代码下载链接。

摘要由CSDN通过智能技术生成

开言

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

初始化页面

首先我们来看看html文件里的代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>html5 game - 仿jquery</title>
	<script type="text/javascript" src="./js/lufylegend-1.6.1.min.js"></script>
	<script type="text/javascript" src="./js/main.js"></script>
</head>
<body>
	<div id="mylegend">loading……</div>
</body>
</html>

也许有人疑问，说是用html5，怎么不见canvas标签？？？其实当你使用lufylegend开发时，根本不需要加入canvas标签。只需要调用该引擎中的init函数并向参数赋值就能自动将canvas标签加到html文件中。

接下来让我们看看init用法：init(speed,id,width,heigh