2015年5月
-
css3星球椭圆运动
上一个项目里碰到了要写一个星球运动的动画，其中主要的点就是用css3如何实现椭圆运动。上网找了很久，看到一个“css3太阳系”的文章介绍，但可惜是正圆的，给人的感觉是平面，不适合。实在找不到，就自己想了些思路： 思路一：写个正圆的运动，然后用scale来变形。实践证明是不可行的，这样变形会导致里面的星球发生严重变形。 思路二：把星球同时做X轴和Y轴的位移运动。根据抛物线的原理，这个方案貌似可行。最后实践证明原理是这样，但有些地方需要留意下，否则会变成菱形运动了。 先看一下效果图吧： 失败实践： 先来看下椭圆的坐标示意图： 所以，一开始的想法就是，从原点o出发（分别给x、y轴......
-
FIS插件制作说明
FIS插件制作说明 虽然FIS在使用的过程中，几乎能解决我们遇到的所有前端问题，但总是会有一些特殊的问题是解决不了的，然后就需要上网去找能解决特殊问题的插件，不过一般都是找不到（不然就不叫特殊问题了），所以我们需要自己写插件来实现 一、FIS的运行过程与插件运行的时机 看上面的官网提供的图，就能大致知道原理了，也可以清楚看到，插件基本可以分为编译期间的、打包期间的 二、插件命名方式 举个简单的例子：fis-postpackager-supply 一定是fis打头 中间的postpackager表示插件的执行时机，详情可以参考上面的图 最后的supply就是插件的名字，这个你......
-
css3逐帧动画-飘动旗子
写css3动画的时候，我们经常用到animation来实现，默认情况下，animation是使用连贯性的ease动画。我们熟悉的animation动画有·ease·、·ease-in·、·ease-out·、·linear·、·cubic-bezier·等过段函数，当然还有我们可能不是很熟悉的·steps·跳帧函数。我们在做一些特殊的动画，比如一个飘动的旗子、一个奔跑的小人，这些动画不需要补间，这时候需要的是跳帧·steps·。 逐帧动画实现方法： 1、把动画帧切图合并在一起 2、通过CSS3的animation控制background-position 方法很简单，这里使用到......
-
一个通用广告脚本数据加载的容错
最基本的需求 写一个通用的广告脚本文件，传递不同的广告ID，加载对应的数据出来，上报数据，最后显示出来 最简单的做法 每个站点，直接请求广告地址，带上不同参数，例如这样： var script = document.createElement("script"); script.src = 'ad.com?id=id1&callback=cb'; document.body.appendChild(script); function cb(param){ //do something ......
