Monthly Archives: 六月 2015

css动画学习-立方体

思路

一个正方体有6个面,所以我们需要个div中包含6个div,在3d模式下,z轴偏移出部分距离,然后6个面分别围绕x轴,Y轴旋转90deg,或者180deg即可,若使立方体旋转起来,让容器旋转起来就ok了。

实现步骤

  1. 容器.container
    • 容器的position设置为absolute,方便将容器定位,留给3d足够的显示空间
    • 设置perspective为400px,给3d足够的视图距离
  2. 定义和用法
  3. perspective 属性定义 3D 元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
  4. 当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。
  5. 注释:perspective 属性只影响 3D 转换元素。
  6. 创建立方体div.square包含6个div
    emmet语法:
  7. div.square>div{$}*6
  8. 设置容器.square样式
    • transform-origin 设置原点为50%
    • transform-style: preserve-3d 设置3d显示模式
    • 设置6个面的position为absolute,因为6个面要进行3d移动定位
  9. 设置正前方的面
    • 这个面很简单,直接在z轴上偏移出来即可
  10. transform: translateZ(100px);
  11. 设置右侧的面
    • 这个面向Z轴偏移的同时,在Y轴上旋转90度
    • Y轴旋转以逆时针为正向
    • X轴旋转顺时针针为正向
  12. 设置正前方正后方的面
    • Y轴旋转180度,z轴偏移100px
  13. 设置左侧的面
    • Y轴旋转-90度,z轴偏移100px
  14. 设置上方的面
    • X轴旋转90度,z轴偏移100px
  15. 设置下方的面
    • X轴旋转-90度,z轴偏移100px

旋转

让立方体旋转需要使用动画 * 使用@keyframes创建关键帧 * 例如:

@keyframes rotate{

0%{

transform:rotateX(0deg) rotateY(0deg);

}

50%{

transform:rotateX(180deg) rotateY(360deg);

}

100%{

transform:rotateX(-360deg) rotateY(-360deg);

}

}

演示

在线demo

gulp插件开发手札

gulp

一个比grunt使用更为简单的自动化构建工具,Gulp通过流和代码优于配置策略来尽量简化任务编写的工作。

这里不在赘述gulp的基本使用法。请参考:

需求

项目中使用了gulp,以及一些插件,其中有压缩,md5后缀等等,我们的项目仅在移动端运行,考虑到性能,需要延迟加载js文件,因为压缩后的js文件体积相对比较,想通过创建script标签的形式,等页面ready了再去加载js。因为使用了md5,所以每次压缩完的文件名都不一样,而动态加载的脚本需要知道压缩后的文件名称,不想每次手都修改。

插件功能

所以要实现的功能就是,在js进行压缩,合并以后,处理首页html.

首先要知道如何开发一个gulp插件

因为是个小功能,所以我也就没有单独封装成模块,而是封装成一个单独函数方便使用:

 

说明:

使用

使用方式跟普通的gulp插件调用方式一样

 

总结:

功能很简单,就是需要知道如何开发gulp插件,参考上面的模板,然后参看了一些gulp官网上的插件是如何写的,基本上就完了,同事需要知道nodejs如何操作buffer就可以了。

自定义指令:图片延迟加载

前言

web App跟web毕竟是不同,考虑到用户在使用web app时的数据流量,已经首次加载速度,所以对于页面的一些图片采用延迟加载还是很必要的,下面记录下自己开发延迟加载指令的过程。

实现思路

图片肯定有所以来的容器元素,容器元素在屏幕上的可视范围内的图片要加载进来,所以需要监听容器的滚动事件,计算出当前滚动的位置跟图片的位置判断是否加载图片。

我在开发该指令时,因为项目中已经有个在图片未加载完成是显示loading条的指令,所以我直接在此基础上进行扩展,目的是对使用该指令的图片进行延迟记在,页面上基本不用改动。

指令开发

  • 容器指令
    只是用来标记图片所在的容器
    myApp.directive(‘yxjImageContainer’, function($compile){
  •     return {
  •         restrict: ‘AC’,
  •         controller: [‘$scope’, ‘$element’, function($scope,$element){
  •             $element.data(‘yxjImageContainer’, $element);
  •         }]
  •     };
  • });
  • 图片延迟加载指令
    实现思路

    • 找到容器元素
  • var container = element.inheritedData(‘yxjImageContainer’);
    • 需要知道容器的滚动距离
  •     //获取容器的滚动距离
  •     var _getContainerScrollTop = function() {
  •       if(container.scrollTop && container.scrollTop()) {
  •         return container.scrollTop();
  •       }
  •       var first = container[0];
  •       if (first && first.pageYOffset !== undefined) {
  •         return first.pageYOffset;
  •       }
  •       else if (first && first.scrollTop) {
  •         return first.scrollTop;
  •       }
  •       return document.documentElement.scrollTop || 0;
  •     };
    • 容器的高度
  •     var _getContainerInnerHeight = function() {
  •       if(container.innerHeight) {
  •         return container.innerHeight;
  •       }
  •       var first = container[0];
  •       if(first && first.innerHeight) {
  •         return first.innerHeight;
  •       } else if(first && first.clientHeight) {
  •         return first.clientHeight;
  •       }
  •       return document.documentElement.clientHeight || 0;
  •     };
    • 图片元素所在位置
  •     //获取元素top
  •     var _getElementOffset = function() {
  •       if(element.offset){
  •         return element.offset().top;
  •       }
  •       var box = element[0].getBoundingClientRect();
  •       return box.top + _getContainerScrollTop() – document.documentElement.clientTop;
  •     };
    • 监听容器的滚动事件,判断当前图片元素是否需要加载
  •     var _onViewChange = function(bool) {
  •       var height = _getContainerInnerHeight(),
  •           scroll = _getContainerScrollTop(),
  •           eleOffset = container[0] === $window ? _getElementOffset() : _getElementOffsetContainer(),
  •           windownBottom = container[0] === $window ? height + scroll: height;
  •       var remaining = eleOffset – windownBottom,
  •           shouldLoad = remaining <= offset;
  •       if(shouldLoad && !loaded) {
  •         _renderImage();
  •       }
  •     };
  •     container.on(‘scroll’, _onViewChange);
    • 加载图片并显示,取消容器的滚动事件
  • //加载图片
  •     var _renderImage = function() {
  •       loaded = true;
  •       var imageDom = angular.element(element[0].querySelector(‘img’));
  •       imageDom[0].src = attrs['ngSrc'];
  •       imageDom.on(‘load’, function() {
  •         element.removeClass(‘loading’);
  •         imageDom.css(‘visibility’, ‘visible’);
  •       }).on(‘error’, function() {
  •         element.addClass(‘loading’);
  •         imageDom.css(‘visibility’, ‘hidden’);
  •       });
  •       container && container.off(‘scroll’, _onViewChange);
  •     };

完整demo gthub

遇到的问题

  • angular中操作dom
    angular中支持jqLite;通过document.getXXX()等方法获取的元素需要使用angular.element()装换成angular中的对象
    angular.element

参考资料

css手札1

说明

  • webkit引擎的浏览器有:Safari, Google Chrome,前缀是-webkit-
  • Gecko引擎浏览器:Mozilla,常指Firefox, 前缀 -moz-
  • Presto引擎浏览器:Opera,前缀 -o-
  • KHTML引擎浏览器:Konqueror, 前缀 -khtml-
  • Trident引擎浏览器:Internet Explorer, 前缀 -ms-

定位

  • position
    • 默认值:static
    • relative: 遵循正常文档流,但可通过top,right,bottom,left 偏移位置
  • z-index
    • 默认值: auto
    • 同级对象,写在后面的对象将会覆盖前面的

布局

  • display
    • none: 隐藏,但是与visibility=hidden不同,不保留占用空间

    说明

    • IE7及以下浏览器不支持table相关的参数值
    • 暂无浏览器支持ruby相关参数值
    • IE8不支持CSS3新增属性值:compact | ruby | ruby-base | ruby-text | ruby-base-group | ruby-text-group | box | inline-box。
    • IE9不支持compact | box | inline-box属性值。 
  • float
    • 属性值不为none时,忽略display属性值
  • visibility
    • visible,hidden,collapse(隐藏表格的行或列) * 可视状态下必须保证父级元素也为可视。
  • clip
    • 剪切对象可视区域(左上角为起始点)
    • 默认值auto,不剪切

    使用:


     

弹性布局

  • box-orient
    • horizontal 子元素水平排列
    • vertical 子元素纵向排列
    • js中使用boxOrient
  • box-pack
    • 子元素排列方式
    • start
    • center 全部居中
    • end
    • justify 两端对其
  • box-align
    • 子元素开始位置
    • start
    • center
    • end
    • baseline
    • stretch (默认值) 自适应父级元素尺寸
  • box-flex
    • 分配占用父级元素的剩余空间比例
  • box-flex-group
    • 定义子元素所在的组
  • box-ordinal-group
    • 定义子元素显示顺序
  • box-direction
    • 子元素显示顺序
    • normal
    • reverse ,反转
  • box-lines
    • 是否多行显示
    • single, multiple

外补白

  • margin,padding
    • 内联对象仅可以设置左右,设置上下间距时必须使元素为块级或者内联块级

边框

  • border-radius圆角边框,2个参数以’/‘分割,每个参数允许设置1~4个参数值,第1个参数表示水平半径,第2个参数表示垂直半径,如第2个参数省略,则默认等于第1个参数

    水平半径:如果提供全部四个参数值,将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。

    如果只提供一个,将用于全部的于四个角。

    如果提供两个,第一个用于上左(top-left)、下右(bottom-right),第二个用于上右(top-right)、下左(bottom-left)。

    如果提供三个,第一个用于上左(top-left),第二个用于上右(top-right)、下左(bottom-left),第三个用于下右(bottom-right)。

    垂直半径也遵循以上4点。

  • box-shadow阴影

    语法


     

    使用


     

     

  • box-reflect
    • 文字倒影

     

    背景

  • background
    • 允许指定多个image
  • background-attachment
    • 设置背景图片位置
    • fixed,scroll(默认),local
  • background-origin
    • 指定背景图片显示位置
    • padding-box 从padding区域开始显示
    • border-box 从border区域开始显示
    • content-box 从content区域开始显示

颜色

  • opacity
    • 透明度

    说明

    IE使用filter实现

    文字

  • text-index对块级或者内联块级元素设置缩进
  • text-transform
    • none
    • capitalize 单词首字母转换成大写
    • uppercase
    • lowercase
  • text-decoration对文字修饰
    • 下划线,删除线
  • text-shadow
    • 文字阴影
  • text-fill-color
    • 文字填充颜色
    • demo

用hexo在github上建立blog

同事@icepy是个极客,看到他一直在用github pages建立的blog,感觉很不错,刚好又赶上自己的blog因为域名解析问题暂时无法访问,所以就开始着手利用自己的github账号创建一个。

  • 准备资料
  • 问题
    根据以上教程安装配置,基本没啥大问题,以下是自己遇到的一些问题:

    • github上建立新库时,一定要注意跟自己github用户名保持一致,我自己的英文名,姓名姓名缩写跟全拼都被别人给占去了,伤心呀
    • hexo的全局配置文件,一定要仔细阅读一下,我就是因为域名配置错误,修改了n次依然有问题后,直接删掉github库重新搞了一次
    • 使用主题时注意顶部菜单的连接地址,如果要加上categories
  • /themes/主题名称/_config.yml 参考:
  • menu:
  •     Home: /
  •     Archives: /archives
  •     About: /categories/About/
    • 写文章的时候,注意tags:跟categories: 的冒号后面要跟一个空格,否则编译时会报错。
    • 命令移动文件
      当前在hexo创建的blog目录下:
    • cp -r public/* ~/Documents/GitHubFiles/yuanxj1024.github.io

github 个人blog

Angular.js权威教程阅读笔记(19~22)

Angular.js权威教程阅读笔记

19.测试

  • Karma 测试工具
    npm install -g karma
  • npm install -g karma-cli
  • //启动
  • karma start path/to/karma.config.js
  • 初始化Karma配置文件
    • karama init 生成器
      • karma init test/karma.conf.js
      • karma run test/karma.conf.js
      • karma start test/karma.conf.js
  • 跳过

20.事件

可以在应用中嵌套的各个组件之间通信

这里的事件指的是ng的事件而非DOM事件

  • 事件传播
    • $emit 冒泡事件
      将事件沿着作用域向上派送
    • $broadcast 向下传递
  • 事件监听
    $on()注册并监听事件
  • 事件对象
    • targetScope 发送或者广播事件的作用域对象
    • currentScope 当前处理事件的作用域对象
    • name 事件名
    • stopPropagation() 取消通过$emit()触发的事件继续传播
    • preventDefault() 把defaultPrevented设为true

21.架构

截图处理中

22.Angular动画

  • 简介 ngAnimate模块 $animate
    css3动画
    js动画
    css3过渡
  • 安装
    bower install –save angular-animate
  • 运行
    • 无需额外配置
    • 通过监控指令上的事件实现
  • js动画
    angular.module(‘myApp’,['ngAnimate'])
  • .animation(‘.fade-in’,function(){
  •     return {
  •         enter: function(element,done){
  •             //运行动画,结束时调用done
  •             return function(cancelled){};
  •         }
  •     };
  • });