2014年年终总结-在前端编程方向继续前进
作者:admin 日期:2015-01-04今天是2015年的第4天，多数公司上班了。跟夏总偶尔聊了项目及文字沟通的事儿，忽然想起，自己也应该写写年终总结了。
我居然就是那个只会jquery的人，被“再见不送”的人，鄙视链的末端生物！
idangerous.swiper.js的loop循环方式带来的控制问题
作者:admin 日期:2015-01-03swiper.js是手机微场景制作中最常用的框架，功能强大，参数齐全。它在使用loop: true这样的参数时，滑动片将可以首尾连接，即可以循环地滑动场景。
6句代码实现六宫格重力作用出场动画-GSAP_TweenMax_3D_transform
作者:admin 日期:2014-12-30昨天群友发出一个网站中有一个导航条出场效果，挺有味道。于是花了2小时模仿成功，我作品在此：
http://258754.com/m/zgl/TweenMax_3D_transform.HTML
原站在此：http://cswzs.csjinmaohui.com///?nsukey=r1DXSmigepQZpFjQItTf9pGeJpxXjmi5G9oWsiOr85FYnOU5yWXU4Idy48Cy79MIFo934MArZBDCRHDMCXezpA%3D%3D
GSAP范例在此：http://greensock.com/css3/
----------------------------------------------------------------
不查不知道，原来GSAP有如此强大的CSS动画功能，尤其是对于仿3D变换的支持。只是GS官网上的文章虽多，但源码较少，辗转stackoverflow.com找到一些相应的源码。
我个人比较喜欢GSAP来替代CSS动画，GS官网上说是GSAP的时间轴TWEEN类动画，无论是从代码效率还是代码简练度上，都远超CSS动画。至少后者是属实的。这6句代码，如果有用CSS写，会写上一大版。
- <script src="js/jquery.min.js"></script>
- <script src="js/TweenMax.min.js"></script>
- <script>
- TweenMax.fromTo($(".a2"), .3, {scale:.5,alpha:0}, {scale:1,alpha:1});
- TweenMax.fromTo($(".a1"), 2, {rotationY:-90}, {rotationY:0,transformOrigin:"right center",transformPerspective:500,ease:Elastic.easeOut,delay:0.3});
- TweenMax.fromTo($(".a3"), 2, {rotationY:90}, {rotationY:0,transformOrigin:"left center",transformPerspective:500,ease:Elastic.easeOut,delay:0.3});
- TweenMax.fromTo($(".a4"), 2, {rotationX:-90}, {rotationX:0,transformOrigin:"center 0% 00px",transformPerspective:500,ease:Elastic.easeOut,delay:0.9});
- TweenMax.fromTo($(".a5"), 2, {rotationX:-90}, {rotationX:0,transformOrigin:"center 0% 00px",transformPerspective:500,ease:Elastic.easeOut,delay:1.1});
- TweenMax.fromTo($(".a6"), 2, {rotationX:-90}, {rotationX:0,transformOrigin:"center 0% 00px",transformPerspective:500,ease:Elastic.easeOut,delay:1.2});
- </script>
苦B的项目经理----你预算只有2千，你劝你直接自吻吧
作者:admin 日期:2014-12-30我们也能做最近火爆的手机场景动画liveApp
作者:admin 日期:2014-10-22长沙老牌的本土网站-长沙通被关站了
作者:admin 日期:2014-09-15每一个苦B的项目后面，都有一个天神般的领导
作者:admin 日期:2014-08-26jquery插件-交互型网站-首页场景及大图预载-带进场动画-preloader
作者:admin 日期:2014-08-08应用于“图片数量多、体积大”页面的预加载，会给浏览者带来较好的用户体验，尤其是企业LOGO的提前显示，会让网站呈现出更完整的品牌形象。
优点：
1、未加载完成前，正式页面不显示。
2、自定义加载序列、自定义背景颜色变化、背景透明度。
3、参数灵活、调用较丰富，如以下3种加载画面方式。
4、站长dudu加入了时间线动画机制，可在加载原画面基础上，自定义更丰富的JS动画。
5、加载完毕后给出消息，方便自定义调用事件（如消隐掉加载动画、调用新的进场动画等）。
缺点：
- 进度计算，是以图片加载完成的张数（而不是字节数）来计算的，因此加载数字进程看上去不平均。
本测试范例使用的LOGO加载方式，加载过程中，调用了自定义“小光点向上飞行”的动画，为演示方便，只加载了2张大图，加载完成后，即撤去黑底，播放大图动画。
付费100元，可得到完整程序包，含技术文档，及得到站长技术支持。
本站长支付宝帐号：258754@qq.com
成功解决安装花瓣网（huaban.com）chrome插件老是失败的问题
作者:admin 日期:2014-08-06BezierPlugin插件（js/jquery）--模拟曲线贝塞尔运动、绘制曲线的实用插件
作者:admin 日期:2014-08-05昨天一个网站项目的实际需求：当点击“购买”按钮后，当前货物“飞向”侧边的购物车。设计要求，飞行轨迹必须是一条“曲线”。
----------------------------------------------------
配置信息：
BezierPlugin插件可以很好的解决这个问题。这是greensock.com提供的GreenSock Animation Platform (GSAP)库的一个插件，位置在：com.greensock.plugins，我测试使用的JS有：
<script src="http://cdn.bootcss.com/gsap/1.9.7/TweenMax.min.js"></script>
<script src="http://cdn.bootcss.com/gsap/1.9.7/easing/EasePack.min.js"></script>
<script src="http://cdn.bootcss.com/gsap/1.9.7/plugins/BezierPlugin.min.js"></script>
TweenMax-tween核心库
EasePack-缓动库，如果没有特别缓动，可不加载
BezierPlugin-贝塞尔曲线库，必须
----------------------------------------------------
拟合输出曲线时代码示例--可用于绘制曲线，要结合canvas等绘制引擎：
//输入input:
var beziers = BezierPlugin.bezierThrough([{x:0, y:0}, {x:250, y:400}, {x:500, y:0}]);
//输出output:
{
x:[{a:0, b:0, c:125, d:250}, {a:250, b:375, c:500, d:500}],
y:[{a:0, b:0, c:400, d:400}, {a:400, b:400, c:0, d:0}]
}
--------------------------------------------------------
曲线运动示例----结合TweenMax可直接产生曲线运动
//起点坐标不用放到代码中，以下三个点分别是第2点，第3点及终点
TweenMax.to(document.getElementById("myp"), 5, {bezier:[{left:100, top:250}, {left:300, top:0}, {left:500, top:400}], ease:Power1.easeInOut});
-------------------------------------------------------------------------------------
本插件还有更丰富的功能调用，比如随曲线调整角度、旋转、可拟合除了坐标之外的任何值（比如透明度、角度），详细说明如下（英文）：
http://api.greensock.com/js/com/greensock/plugins/BezierPlugin.html
jquery对IE系列的兼容性支持-经测试发现jquery 1.11.1都支持IE8
作者:admin 日期:2014-08-02FlashIframe-flash中子窗口形式调用网页-swf调用子窗口
作者:admin 日期:2014-07-30云彩无间断飘动及视差效果在网站中的应用
作者:admin 日期:2014-05-21http://www.zzylfz.com/这个今天刚上线的项目中，用到了一个“白云不间断向左飞动”的效果，步骤就2个：
1、制作一个边缘连续的“白云层”，要非常宽以适应较大的显示屏幕；
2、以用下JS来驱动background-position-x
- TweenMax.to($('.cloud'),97,{'background-position-x':'-2392',ease:Linear.easeNone,repeat:-1});
------------------------------------------
另外还用了一个视差效果，当鼠标左右移动时，鸽子和文字会微微的左右摆动。使用的是jquery.parallax.js这个脚本。
