-
Notifications
You must be signed in to change notification settings - Fork 0
/
content.json
1 lines (1 loc) · 8.6 KB
/
content.json
1
[{"title":"当我想用css3实现一个动作类库","date":"2016-12-30T16:02:00.000Z","path":"2016/12/31/css3-animater/","text":"当我如是想的时候,事实上我已想了很久。后来被各种纠结的差事冲乱了生活和心绪,并且心里认为这是个妥当无比的借口。找到了借口后一拖再拖,果然认识到deadline才是第一生产力的真理。最近,却是被朋友的一句话逼急了,他跟我说:我们的业务用到了css4的新属性! 这句话的意思,大体等同于说,我买到了一个iphone9,亲你怎么看?它在我脑中纷乱起舞,那是plans vs zombies中一大波僵尸正在逼近的场景。是的,再不行动,就要被技术的狂潮给淹没了!日前,就我的浅薄见闻,当html5越来越多的功能被应用到业务主功能上,诸如本地存储,拖拽优化,postMessage通信…css3却是另一番光景。一方面,一个个绚丽效果的css3-demo在网上被围观与叫好,大家却又在为浏览器兼容性和差异性这座大山望而却步。css3技术在大家眼中更偏向于一种优化的体验,等于说,你不敢用它来实现网站的key point,即使是一个圆角,不问技术细节的产品经理也会想使用图片来代替的。 因此,缘由可以归结为:我忍够了。要玩,就玩个大的。 其实虽然我想了很久,但这个“想”,更偏向于单纯的幻想,而不是思考。暑假的时候,在腾讯大讲堂看到有哥们分享css3与js的动画效率比较的演示,就萌生了这个想法。现在,在正式尝试编写类库之前,我想先写2~3个实验demo,来看看技术的复杂度以及一些可以避免的暗礁,并做好一些记录。当然这些demo必须得使用最新的chrome,firefox,opera以及ie8,9才能正常运行。 ##第一个实验:人物sprite图动画实现,按键与位移的衔接请按键盘方向键控制人物运动: ##最深的体会我的js代码需要怎样“辅助”css3?按照我的理解,如果是说一个dom元素的“动作”的话,完全可以用纯css3来实现,而且你可以将dom的动作串连起来。例如:123456789101112131415161718192021222324252627282930@-webkit-keyframes q-down { 0%{ -webkit-transform:rotate(0deg); top:10px; } 33%{ -webkit-transform: scale(1.5); top:147px; } 66%{ top:10px; -webkit-transform: translate(50px,50px); } 100% { top:147px; -webkit-transform:rotate(45deg); }}.box { -webkit-animation:q-down ease; -webkit-animation-duration: 2s; -webkit-animation-timing-function: linear; -webkit-transform:rotate(45deg); width: 100px; height: 100px; background: red; position: absolute; top: 147px; left: 100px;} dom元素会在0%,33%,66%,100%这些时间点上做出相应的效果响应。这样的动作序列还会有什么问题吗?在demo当中,我设置了按一下“左”键,人物向左偏移一格,按一下“下”键,人物下移一格,于是我就遇到了这样的两种情况: 1、用户按下“下”,人物向下偏移动作完成后,他仍不放手,此时同时按了“左” 我认为此时用户在使用“双键”,这时人物会再向左下方向都偏移一格。 2、用户“几乎”同时按下“下”和“左”,由于js每次只能检测单键的keycode 程序会判断用户是先按下了某个键,再使用了双键。 而用户之所以“几乎”同时按下,本是希望只执行“双键”的。 1与2的区别,其实就是双键产生时,两个按键的时间间隔的区别。时间间隔长,用户是需要1这种效果的,而时间间隔短,用户就是想只执行“双键”。但程序是固定的,无论时间间隔有多短,在它看来就是有先后,因此程序认为2和1是一样的。我在demo里,就用了时间戳的方式,而这种方式,其实是“投机取巧”的一种方式。 回到上面那个问题来,这样的纯css3动作序列有什么问题?时间的问题更深入一点我可以得到结论: 那就是无法侦听一个css3动作是否已经结束。如果我能够侦听动作是否正在执行,那么一切就好办了,如果前动作已完成,我就像情况1一样“先单键再双键”去操作,如果前动作未完成,我就判断用户是想只执行“双键”。 OK,js代码就是要像jquery的animate方法一样,构造一个动作的队列,存放用户积累下来的动作,并作好回调判断。","tags":[{"name":"css3","slug":"css3","permalink":"http://yoursite.com/tags/css3/"}]},{"title":"圣诞到了,帮修改一个头像","date":"2016-12-19T06:48:00.000Z","path":"2016/12/19/a-chrismas-ico/","text":"帮忙把这只狐狸塞到圣诞袜子里或者带上圣诞帽~~~~ ——鱼头 鱼头君,我终于做好了!花了我整整……好吧,其实是一直偷懒没做我就承认了。按照你的要求,弄成这样的:或者这样的:其实我最喜欢的是这样的: Happy Chrismas!","tags":[{"name":"设计","slug":"设计","permalink":"http://yoursite.com/tags/设计/"},{"name":"杂谈","slug":"杂谈","permalink":"http://yoursite.com/tags/杂谈/"}]},{"title":"练习md语法 网易云内嵌播放器测试 测试内嵌B站视频","date":"2016-11-06T02:36:00.000Z","path":"2016/11/06/JayChou/","text":"周杰伦演唱会B站外链 网易云歌曲外链 h5播放器2001 2002 2004 2007 2010 摩天轮 歌单播放器 歌单播放器 歌单单曲播放器 以下为单曲播放器 B榜第一 B榜第五十 诗人老黄 祝网易云越办越好","tags":[{"name":"瞎写的","slug":"瞎写的","permalink":"http://yoursite.com/tags/瞎写的/"}]},{"title":"angular自定义指令","date":"2016-08-15T13:33:00.000Z","path":"2016/08/15/ng自定义指令/","text":"自定义指令目的拓展angular的功能 通过模块对象的directive方法创建 第一个参数指令名字 驼峰myApp 使用的时候指令名字全变成小写 my-app第二个参数返回一个obj对象 内部:var obj = { } return obj或者 return { } 自定义属性对象回调函数中创建的对象的参数 template:需要一个字符串,会被添加到自定义指令所在的标签 templateUrl:可以是文件路径 也可以是id值 注意type属性 1<script type="text/ng-template" id="btn"> //通过id获取 注意ng-app的位置 restrict:需要一个字符 A,E,C,M A属性 B自定义标签 C类名 M注释 M注释需要加个 replace:true M解析出来会和A一样 replace: 替代掉innerHTML transclude:true 把自定义指令所在标签的innerHTML添加到模板字符串中 模板中需要写入ng-transclude scope:放入一个对象 可以获取自定义指令所在标签的属性值 scope不能和link一起用 $$表示angular自己使用不需要修改 link:指向一个function 有三个参数 可以简写 scope 和$scope一样,能够制造数据 element 表示有自定义指令的那个元素 attributes 表示元素的属性1234{ 属性名:"@test", test:"@"} 12345//transclude相当于function a(b){ return 100 + b || 100;}a(); 1234567891011121314151617181920212223242526272829<body ng-app = "myApp"> <!-- A --> <div ng-haha> <!-- 里面会显示template的数据 --> </div> <!-- M --> <!-- directive:ng-haha --> <!-- C --> <div class="ng-haha"> </div> <!-- E --> <ng-haha></ng-haha> <script type="text/ng-template" id="btn"> <button>标签1</button> </script> <script type="text/javascript"> var app = angular.module("myApp",[]); app.directive("ngHaha",[function(){ var obj = { // template:"<button>按钮</button>", // templateUrl:"view.html", templateUrl:"btn", restrict: "ACEM", replace: true } return obj; }]) </script>","tags":[{"name":"angular","slug":"angular","permalink":"http://yoursite.com/tags/angular/"}]},{"title":"map(parseInt)的分析","date":"2016-03-15T12:02:00.000Z","path":"2016/03/15/map/","text":"1234//parseInt的第二个参数表示进制,必须大于第一个数console.log(parseInt(\"1\", \"0\")); //1console.log(parseInt(\"2\", \"1\")); //NaNconsole.log(parseInt(\"3\", \"2\")); //NaN 12345function parseInt(a,b,c,d){ console.log(a+\"--\"+b+\"--\"+c+\"--\"+d);}var a = [\"1\",\"2\",\"3\"].map(parseInt());console.log(a); 程序结果 1234[ '1--0--1,2,3,4--undefined', '2--1--1,2,3,4--undefined', '3--2--1,2,3,4--undefined', '4--3--1,2,3,4--undefined' ] map会自动传入(ele,index,arr,undefined)","tags":[{"name":"js","slug":"js","permalink":"http://yoursite.com/tags/js/"}]}]