- 博客(11)
- 收藏
- 关注
转载 Flexbox 弹性盒子布局
Flexbox 弹性盒子布局最近的工作内容大多是移动端网页的开发,百分比布局,Media Queries,Bootstrap等常规的响应式/自适应的开发技术皆一一试过,但觉以上都不够灵活,所以,一直再尝试寻求更加灵活的精确的移动端网页设计技术。 寻求的过程中知道了两个让我眼前一亮的解决方案:一个是Flexbox;另外一个是REM。 初次见到Flexbox的神奇用法,
2016-09-14 07:02:14 543
原创 canvas 2
canvas 绘制圆形: arc(x,y,半径,起始弧,结束弧,旋转方向) -- X,Y:圆心坐标; --弧度与角度的关系:弧度=角度*Math.PI/180 -->PI 是大写 --旋转方向:顺时针(默认:false),逆时针(true) 示例: window.onload=function(){ var oc=document
2016-09-12 09:26:43 350
原创 canvas 的使用1
canvas :画布:1.引入 标签 canvas 在浏览器中默认是(宽300px,高150px)的大小,没添加样式是看不到的,在IE8以下的浏览器不兼容,所以在标签里面填写“"你的浏览器不兼容canvas"< /canvas>”canvas 画图步骤:1.建立画布-->在body中引入 标签,画布的大小样式只能在行 间设置 示例: id="c"
2016-09-12 09:18:20 240
原创 CSS3 3D变换
CSS3 3D变换使用3D变换时要加上内核(-ms-:IE内核 / -webkit-:Safari 和 Chrome内核 / -moz- :Firefox 内核 / -o-: Opera 内核)使用3D变换 步骤:1.transform-style:preserve-3d // 建立3D空间2. 设置景深 perspective:100px; //
2016-09-12 09:11:30 449
原创 CSS3 幻灯片
http-equiv="Content-Type" content="text/html; charset=utf-8">无标题文档 id="css">body,ul,ol{margin:0;padding:0;}li{ list-style:none;}.wrap{width:800px;margin:100px auto 0;}#picList{width:800px;height:360px
2016-09-12 09:08:07 326
原创 封装好的 抖动函数 shake
抖动函数shake封装function shake ( obj, attr, endFn ) {var pos = parseInt( getStyle(obj, attr) );var arr = []; // 20, -20, 18, -18 ..... 0var num = 0;for ( var i=20; i>0; i-=2 ) {ar
2016-09-12 08:36:02 958 1
原创 封装的运动函数 doMove
封装好的运动函数 doMovefunction doMove ( obj, attr, dir, target, endFn ) { dir = parseInt(getStyle( obj, attr )) clearInterval( obj.timer ); obj.timer = setInterval(function () { var speed = pa
2016-09-12 08:27:41 428 1
转载 CSS3 动画的那些事
css3的动画功能有以下三种: 1、transition(过度属性) 2、animation(动画属性) 3、transform(2D/3D转换属性)下面逐一进行介绍我的理解:1、transition: 如-webkit-transition:color 1s等同于: -webkit-transition-property:color;
2016-09-12 08:23:11 275 1
原创 this 那家伙
正确理解this关键字的含义,对于JavaScript开发极其重要。首先,this总是返回一个对象,简单说,就是返回属性或方法“当前”所在的对象。this.property上面代码中,this就代表property属性当前所在的对象。下面是一个实际的例子。var person = {name: '张三',describe: function () {return '
2016-11-27 19:08:42 349
原创 animation 动画
-- 关键帧 --- keyFrames ---》》使用时要加各浏览器内核(-ms-:IE内核 / -webkit-:Safari 和 Chrome内核 / -moz- :Firefox 内核 / -o-: Opera 内核) -- 类似于 flash --- 只有指明两个状态,之间的过程由计算机自动计算 -- 关键帧的
2016-11-27 19:06:29 376
原创 响应式 页面
响应式布局 Media1.什么事响应式 http://www.cnblogs.com/mofish/archive/2012/05/23/2515218.html Media Queries :响应式 -->其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表。换句话说,其允许我们在不改变内容的情况下,改变页面的布局以精确
2016-11-27 19:03:32 311
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人