tweenjs

【一、项目背景】 createjs是一个基于canvas的制作H5游戏、动画、交互的库。包括EaselJs、TweenJs、SoundJs、 PreloadJs四个部分。它基于容器进行展示，其中根容器是stage（舞台）对象。 今天教大家用EaselJs、TweenJs结合做一个颜色配对游戏。 【二、项目准备】 1、去下方网站： http://www.createjs.cc/ 然后下载EaselJs、TweenJs这两个模块。 2、软件：Dreamweaver 【三、项目目标】 随机产生4种颜色，让下方的色块通过鼠标移动，匹配上方的颜色框。如果上方颜色框与下方色块颜色相同。全部色块匹配完成则为成功。 【四、项目实现】 1、导入EaselJs、TweenJs模块。 <script src="js/easeljs-0.7.1.min.js"></script> <script src="js/tweenjs-0.5.1.min.js"></script> 2、body 创建画布canvas 设置画布大小，画布添加描边 ，id属性。 <canvas id="canvas" width="600" height="400" style="border: black solid 1px"></canvas> 3、创建shapes.js文件。定义一个初始化init()方法 ，创建stage对象

前言 吸顶导航是营销会场类最常用的组件之一， 现在的会场页面是越来越长，如果从第一屏手动滑到最后一屏，还是一个挺累的操作，所以吸顶导航还是很有必要存在的，组件很常见，但是开源的不多，而且大多是PC版，几乎都不能满足业务的需求，所以决定自己写一个。 先看下组件效果 demo 功能拆解 梳理下组件需要实现的功能 到达首层吸顶和最后一层取消吸顶 当前楼层高亮显示 选中导航居中显示 默认显示或滑到首层才显示 滑动过程中控制隐藏显示 展开显示更多 功能实现 下面我会介绍下其中几个功能的实现方法，全部源码有兴趣的话可以点击 这里 导航选中居中 1. 如何居中 首先我们可以先考虑怎么居左，我们知道每一项距离左边的宽度是 m ，那居左就是 -m ,居中就是再减中线的位置，中线的位置如果是 M ，那就是 M-m 。 2. 处理边界的情况 通过 M-m ，我们再来处理到达边界的问题，主要两种情况 1.当M-m>0的时候，则已经到达最左边 2.当M-m >于可滚动的距离（滚动条长度-可视长度），就是到达最右边 实现代码： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 /*以下代码为了方便理解，略有删减*/ /* * 导航切换 */ watch(){ translateX