六边形-蜂巢形-花瓣形导航菜单
作者:admin 日期:2015-04-14手机微场景制作的完整案例-swiper+TimelineMax
作者:admin 日期:2015-02-06展示我制作的一个微场景动画演示--设计是一个朋友做的，我完成前端代码。
展示地址在此：http://www.contactu.cn/2015/ffjr/iframe.html
在性能较差的安卓手机中，注意几点........
在知乎上看到一则回答，符合我现在的人生追求，摘抄以自勉
作者:admin 日期:2015-02-02在知乎上看到一则回答，符合我现在的人生追求，摘抄以自勉。
XML/HTML代码
-
杨毅，第一职场网“教练式”职业规划首席顾问
权且抛砖引玉。说一说我的经历吧。 - 我大学的时候对于咨询非常感兴趣，但专业又是冷门，为了进咨询公司，我大学三年的时间都泡在图书馆，把书架上关于咨询的所有相关书籍都翻了一个遍，做了足够的知识储备。找工作的时候，眼看着同学们一个接一个找到工作，而自己的期望中的工作又遥遥无期，所以很失落，但一直在固执在坚持，相信天生我材必有用，总能遇到赏识自己的那个HR，不然三年的图书馆就白泡了。果然，苍天不负有心人。在我就要绝望的时候，来了一家咨询公司招聘，听宣讲，感觉这家公司简直就是来招我的。那种感觉太棒了！最终，四轮面试，笑到了最后。虽然那个时候工资很低，但别提多高兴了，因为心里一直向往“穿西装，打领带，手提电脑穿梭于各大CEO办公室”的咨询工作。
- 毕业的第一年，感觉一切充满激情。第二年，激情慢慢消退。第三年开始，各种不耐烦开始占领情绪。公司不断加薪，提为合伙人，也依然不能重燃自己的激情。虽然业务能力不断提升，提交的方案也得到客户认可，但总感觉少了点儿什么。有一次和领导说，为什么我提案之后没有成就感呢？是的，我缺少的就是成就感。另外，总得为了适应这份工作，而不得不违背自己的价值观。就如题主所说，上班很累，勾心斗角、逢场作戏，感觉这不是自己想要的生活。
- 后来辞职创业，创办第一职场网，从事职业规划咨询。经过这么多年的折腾，我逐步明确了自己理想的生活是什么：按自己的想法做事，以独立客观的第三方标准，为他人提供服务；不为钱而活，不喜欢的客户（或自己不认同的客户）可以不接；有自己独立的时间，去思考自己喜欢的问题，以帮助更多的人。
- 现在的工作，几乎每天加班，包括周六。曾经有一段时间，早上起来第一件事是开电脑，晚上睡觉之前的最后一件事是关电脑。不过现在学会了忙里偷闲，会抽时间放松下自己。
- 我曾经在2014年底写过这样一篇文章；《在这个物欲横流的年代，还有多少信仰可以坚持？ 》，里面有这样一段话：我们只是想以自己的方式活着，按照自己信仰的价值观，做自己想做的事，不掩饰、不虚伪、不强求、不讨好、不谄媚、不看别人脸色。仅此而已。
- 我想，这段话就是我内心里一直在追求的价值观，而且，我也在按照这个价值观在做事。虽然每天加班，都工作到晚上11点，但依然感觉不到累。每天晚上关上电脑时，会想着如何开展第二天的工作，并希望第二天早早到来，渴望早点儿投入到工作当中。前几天还在微信上看到一篇文章，说那些每天只睡四个半小时的人是如何保持持续的激情的。虽然我做不到只睡四个半小时，但我完全理解要达到这样一种状态，需要怎样的条件。那就是：你做的事是你发自内心追求的，能够带给你成就感的，并且符合你自己的价值观。
生肖抽奖动画示例-TimelineMax/staggerTo
作者:admin 日期:2015-01-30上周培训长沙某公司前端人员的准备资料--分享一下
作者:admin 日期:2015-01-20主体结构方面
- 重点： 请大家从目前这一稿设计图中，找出觉得有困难的局部，届时我来进行实操式讲解--顺便用此方式，了解正确的代码风格及用法。
- 重点： 由大结构到小结构，CSS如何规划、命名
代码及操作方面
- 重点：团队中唯一的前端人员，是我重点关注对象--请提供几页作品，我了解一下他的习惯与缺点
- 请美工现场演示一下切图操作，我了解一下他的习惯与缺点
- 选2-3人编码人员，现场演示下自己的html+css代码书写方式，大家一起讨论。--如无更高效方式，请所有涉及编码人员学习emmet用法，以提高代码书写效率。
插件及细节--这个只讲解大概方法，具体操作由相关人员自行操作
- 由设计稿可见，小图标比较多，请前端人员实验http://www.thinkcmf.com/font，用此方法搞定所有小图标，把各种按钮样式，包括长的、圆的，不同颜色和尺寸的--尤其是对IE7、8的兼容性测试。---已做：http://www.contactu.cn/article.asp?id=167 测试FontAwesome对于IE8的兼容性
- 所有装饰性细节，只要对排版影响不大的，一概使用CSS3方式，比如圆角、圆形、阴影、hover、首字伪元素等
- 重点： 把设计稿内所有用到superslide的地方，进行统一讲解。http://www.superslide2.com
- 瀑布流用法--这个有现成的文档和例子，可自行使用：https://github.com/duitang/waterfall
如何交流与反馈
- 请各人说一下自己是如何写工作日志--推荐用印象笔记等在线工具，直接从中导出问题转发送邮件--解决问题后，将解决方法记录，甚至写文章
- 如何描述问题--尽量将作品上传到服务器，给出URL，便于团队通过浏览器分析
测试FontAwesome对于IE8的兼容性
作者:admin 日期:2015-01-14想要分享私货的可以关注这个
作者:admin 日期:2015-01-052014年年终总结-在前端编程方向继续前进
作者:admin 日期:2015-01-04今天是2015年的第4天，多数公司上班了。跟夏总偶尔聊了项目及文字沟通的事儿，忽然想起，自己也应该写写年终总结了。
先列大纲：
1、操作了几个真正有协作、有成就感的项目。
2、认识了几个能坦诚交流的新朋友。
3、在前端技术上，基本放弃了AS3编程，坚持HTML+CSS3+JQUERY的方向，把前几年的积累做进了真实的项目，产生了收益。2013-2014年，上房房地产系列的项目，带来前端编程技术方向的磨练。
4、在手机微场景的技术追寻过程中，感悟一个新产品品类的学习过程。
5、互联网健身联盟，篮球队的兄弟们让我懂得协作与沟通，人脉进一步拓展。
--------------------------------------------------------------------------
七月份的“有心思”电商项目，周总的执行力给我印象很深。他只用了几天时间，找到我--劝说我加入项目--邀请王老师加入--打预付款给我们--准备机票--全组人到达大理--开工。整个过程就象他的性格一样透明、爽朗。有心思项目较严谨，有全套的项目文档、原型设计--这也是当初打动我的原因。项目各阶段总能看到牛人的平面、影视宣传作品，老板们在项目投入上很是舍得。人员方面，大家也紧密配合，任劳任怨，有压力但是无戾气--这让我见识到一个电商项目的真实推进。
很惭愧，周总高估了我在设计上的实力，我没有能帮到项目组，只是在bootstrap等前端开发层面，做了一些小小的工作（部分技术清单：258754.cn/ui3）。与“有心思”项目组一起在大理度过愉快一个月（老婆最后几天也过去了）。早起跑步、洗完澡开始工作、比较健康的小食堂餐饮，没有太多生活琐事的打扰。空气好，心情也好。还认识了新来、小胖、刘先生、小术、中亮、俊哥这些新生代的开发年轻人，在项目完成后，大家也成了好朋友，经常交流。
小胖是一个前后端均通的小牛人，之后参加了我介绍的诸多健身活动。他也给我介绍了另外的资源。从他身上，我体会到了乐观和进取。
大理之行跟王老师较多交流（好基友住一个房，都是话唠）。每天早上，我6点出门跑步，回来洗完澡，老王就起来跑步了，虽然有点晚，但是略胜于其它根本不起床的人。有一天，他早起了，我又跟着他跑了5公里，那是我生平第一个10公里...我们可能是同类人，有普通的生活，有幸福的家庭，有弱弱的艺术和事业追求（主要是我比较弱），意气相投。
八月，一个机缘认识了夏总--他给我的运动生活带来了转变--把我带进了互联网健身联盟篮球队。夏总又给我介绍了云咖啡项目。年底，他的“芒果游”项目碰到了小小难题，我们终于有了携手的机会。他是一个勇敢和坦白的人，我很少看到一个带头人，在不太熟的朋友面前，直陈己失--相信他的努力必有回报。
健身联盟篮球队的经历，虽然跟工作并没有太多关系，但是其中得失，有益身心。这个组织，至少给我增加了二十个密切互动的圈内人脉，还有更多时有关注的外围人群。组队比赛的过程，也更新了我自己一些陈旧的观念，与年轻人更能相处相容。特别感谢老丁、明祥的付出，其它同队兄弟不一一罗列，新的一年，有新的配合、合作的机会。
我从2013年开始，在上房科技的房地产系列网站，担任一段时间的前端制作。写了不少奇奇怪怪的模块，并且居然都搞成了，并上线运行了。这系列项目，推动我的前端技术，真正从学习到应用。谢谢刘刚、刘焱、小肖、张威、黄杉、国栋等各位兄弟。上房是真正做事情的节奏，永远向前破冰而行。看过“华中心”项目那一列出来近200条的修改清单，以后还有什么小修小改不能承受？
九月份的时候，司马丢给我一个手机微场景滑动模板的演示，问我能不能做，什么价位。从此开始，就不断有人问起这个东西的制作。当然现在我们知道了，这就是一个swiper.js的主框架+一些时间线动画。可是当时，想做出这样一个东西，还是太急促了。有几天时间，我边分析边陷入两难，是购买，还是破解，还是自行开发？各方面得到的信息都不太对称。接着几个月，象恋爱一样，追寻这个框架的进展，技术思路渐渐清楚：
1、先是有朋友的公司可以提供收费的简单框架，一千多。
2、有大牛团队可以提供定制（贵，很贵！）。
3、接着有天，刘浩告诉我，在某网上出现了免费下载的框架，我去问了问价，200块，一时没舍得，自己花了点时间，分析了被混淆的代码，发现了核心的swiper的调用方式及微信分享的代码，到其官网（www.idangero.us/sliders/swiper/）看了看，发现了这个牛B的插件。
4、广电的小黄拿他的新作给我炫耀，这才看到了完全没混淆的版本，果然就是swiper。接下来几天，他又给了我更多的信息，带声音的版本，带3D flow的版本（最欣赏小黄这种知无不言的性格）。
5、我自己写了一个测试，至此，这个技术完全掌握。虽然一分钱没赚到，但感觉很开心，如同炸完珍珠港的那个返航--总有一天搞定你。
对技术的追求体验，大体如是。
还有一个能力也得到了提升，那就是，接单的判断能力。不再象早两年，什么单都想接，花了不少的时间在一些不相干的事情上。现在，很明确，询单电话过来，不出5句话，基本就能判断，这是不是我的菜，有没有档期，如果做不了，要转给哪个朋友。非我特长，就不拖泥带水。
移动互联网来势汹汹，用了十年的老知识，已经明显不够用了，前端已经变成最热门的开发点。新的一年，我的小工作室诚意滔滔，为所有需要我们的客户提供服务。
我儿已经五岁，月前，教他背的那首诗，多年之后，仍会在他心中响起：
百川到东海，何时复西归，少壮不努力，老大徒伤悲。
正片已完，以下是彩蛋1：
1、常用工具：emmet/印象笔记/麦客
2、框架/库：GSAP/idangerous.swiper.js/bootstrap
3、关注的媒体资源：知乎/开源中国/huaban.com/公众号：小道消息、程序人生
彩蛋2：
长跑，最好成绩12公里-----半程马拉松仍是我的理想、我的梦想，开春继续练习。
读书，2014年认识了汪曾祺与张嘉佳--前者让人心静如水，后者让人热血沸腾。
享受与妻子的“周末假期”，看了几场电影。
儿子健康的成长，养成了不少好习惯---玩轮滑丢了两颗门牙。
彩蛋3：
我一度自信满满，只到那天，我看到这则招聘：
大家好，我是长沙**互动HR 现公司急聘前端开发3人
任职要求
1. 编写CSS/CSS3/HTML5如探囊取物，浏览器兼容性懂到IE8就够了（不用谢！）
2. 扎实的Javascript基础知识
3. 模块化开发当然是必须滴，AMD/CMD任君选用
4. 深入精通至少一款前端框架，如：AngularJS, Backbone等（只会用jQuery操作DOM的，再见不送！）
待遇要求：4K-8K （跟我们老板的节操一样无上限，只要您有能力一切都可谈）
联系方式...........
我居然就是那个只会jquery的人，被“再见不送”的人，鄙视链的末端生物！
马上给自己打鸡血，买了本AngularJS的书看起来，可是，看不懂.....一度对自己的能力产生了怀疑。有次去河西某单位面谈，试试自己的身价。一个来谦逊地面试我的小满哥技术经理，看着我图形化的简历，仰视道，你会的这些我好多都不会....最后他们技术总监出来谈了谈。因为离家太远了，我也兴趣不大， 连价格都没谈--其实我还是可以上班的，如果出价公道，以及有足够学习的空间。
我是一只努力跳跳跳的井底之蛙。哪怕有一天，我也精通AngularJS，不知是否能生成出价值8K的自信。我的强项在GSAP，这是一个多冷门的库，未来某天，我可能在面对一堆菜鸟的时候，自豪的说，我是中国翻译GSAP技术文章最多的人，可是台下肯定没有一个人知道我说的是什么....悲凉，技术人就象一方净水中生存的桃花水母，自得其乐。
段子来了：
一个技术大牛和一个PLMM，同时去应聘一个岗位，在“特长：”一栏，大牛写的“AngularJS”，PLMM写的是“腿”，你猜谁被录取？
标准答案是，当你做了那个老板，爱谁谁。
idangerous.swiper.js的loop循环方式带来的控制问题
作者:admin 日期:2015-01-03swiper.js是手机微场景制作中最常用的框架，功能强大，参数齐全。它在使用loop: true这样的参数时，滑动片将可以首尾连接，即可以循环地滑动场景。
但在DOM结构上，会用clone方式，在首尾各增加一个slide单元。跟任何的对象克隆一样，这会带来一些不可预知的问题，比如：
1、会将id=**的对象也克隆，使id不再是唯一的，造成控制问题。
2、swiper.activeIndex，即当前激活的滑片号，序列方式会有差别。与初始DOM的对应关系，可能使用swiper.activeLoopIndex更准确一些。此时一定要弄清activeIndex与activeLoopIndex这两个参数的区别，这样方可准确定位DOM对象。
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写，会写上一大版。
Javascript代码
- <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客户R 2014/8/26 13:01:50
在？
嘟嘟 14:54:46
客户R 14:55:13
你是做flash动画的？
嘟嘟 14:55:23
能做。
客户R 14:56:51
我们有一项目 有个页面需要做几个flash动画 我们这边自己没这方面的人做 希望找个能做这个的
师哥很简单的动画
是个
嘟嘟 14:58:05
我现在主要是做HTML+JS动画了。FLASH倒是也能做。你说说具体要求。
客户R 14:58:43
恩 好 我先给你们介绍下我们做的背景
我们在做一个空气质量预报系统 在对外发布页面希望以动画的方式发布空气质量
场景1：空气质量为优
客户R 14:59:54
小狗两脚走路从狗屋出来；深呼吸，做一个惊讶的笑脸；兴奋的开始做热身运动；四脚着地，欢快的从左到右跑，离开屏幕；
这是其中一个场景 总共四个
7个
嘟嘟 15:00:32
哦，你这是要做创意。这个恐怕费用不低。
客户R 15:01:00
这不算创意吧
这个思路我们已经写出来了 你只要动画实现就ok
嘟嘟 15:01:48
小狗的形象原型什么的，你们设计了没？你们现在只有文字稿，是吧？
客户R 15:02:40
恩
小狗形象有
嘟嘟 15:03:11
深呼吸，做一个惊讶的笑脸----这些都要做创作了。
客户R 15:03:18
嘟嘟 15:03:28
相当于做一个微型的动画片了。
客户R 15:03:33
就这个个大头狗
嘟嘟 15:04:03
这些我做不了。我强项还是在编程逻辑上。
客户R 15:04:17
呵呵 我们这边同行有做过这种动画
哦 好吧
嘟嘟 15:04:30
建议你们联系一下动画（卡通）制作公司或是形象设计公司。
客户R 15:05:02
额？呵呵 我是在广州 但是是长沙人 所以就来长沙找你们了
呵呵
嘟嘟 15:05:10
你这场景是用于网站，还是手机项目？
客户R 15:05:25
系统网站
嘟嘟 15:06:06
哦。动画要做得如此精美？很少见。成本恐怕不低。
客户R 15:07:12
这是很简单的吧
类似这样的
客户R 15:08:19
推荐安装全能绿色的QQ影音播放本文件。
嘟嘟 15:08:47
至少我在国内网站上和APP上，很少看到类似做法。
客户R 15:09:17
呵呵
嘟嘟 15:09:25
更多的还是较简练的图象表达。比如我用的墨迹天气这种。
客户R 15:10:05
哎 没办法啊 人家领导要求这样
嘟嘟 15:10:59
今天还看到知乎上一个评论。说 知乎当时在首页上放了一个类似你这样的动画（视频），结果浪费的流量大得惊人。
哈哈，每一个苦B的项目后面，都有一个天神般的领导。
客户R 15:11:30
这不是手机上的 也无所谓吧
哎 政府的大大们 无法评论啊
嘟嘟 15:12:19
你系统访问量不大当然没问题。如果是FLASH，还要考虑跨平台的问题。比如IPAD.
我群里有专门做卡通的牛人。如果你预算在2万以上。我可以介绍一下。
客户R 15:13:05
人家怎样要求 咱就怎样做 没办法啊 咱要他的钱 他自然要咱的命啊
那算了吧 呵呵
嘟嘟 15:13:33
你预算只有2千，你劝你直接自吻吧。
客户R 15:13:56
我们老大也是个门外汉 说几个小视频超过五千 就不提
我能咋整啊
要命
嘟嘟 15:14:08
找刀去吧。
