ee_Andy-CSDN博客

转载 Flexbox 弹性盒子布局

Flexbox 弹性盒子布局最近的工作内容大多是移动端网页的开发，百分比布局，Media Queries,Bootstrap等常规的响应式/自适应的开发技术皆一一试过，但觉以上都不够灵活，所以，一直再尝试寻求更加灵活的精确的移动端网页设计技术。寻求的过程中知道了两个让我眼前一亮的解决方案：一个是Flexbox;另外一个是REM。初次见到Flexbox的神奇用法，

2016-09-14 07:02:14 525

原创 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 344

原创 canvas 的使用1

canvas ：画布：1.引入标签 canvas 在浏览器中默认是(宽300px,高150px)的大小，没添加样式是看不到的，在IE8以下的浏览器不兼容，所以在标签里面填写“"你的浏览器不兼容canvas"< /canvas>”canvas 画图步骤：1.建立画布-->在body中引入标签，画布的大小样式只能在行间设置示例： id="c"

2016-09-12 09:18:20 238

原创 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 446

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 324

原创封装好的抖动函数 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 955 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 427 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 265 1

原创 this 那家伙

正确理解this关键字的含义，对于JavaScript开发极其重要。首先，this总是返回一个对象，简单说，就是返回属性或方法“当前”所在的对象。this.property上面代码中，this就代表property属性当前所在的对象。下面是一个实际的例子。var person = {name: '张三',describe: function () {return '

2016-11-27 19:08:42 341

原创 animation 动画

-- 关键帧 --- keyFrames ---》》使用时要加各浏览器内核（-ms-：IE内核 / -webkit-:Safari 和 Chrome内核 / -moz- :Firefox 内核 / -o-: Opera 内核） -- 类似于 flash --- 只有指明两个状态，之间的过程由计算机自动计算 -- 关键帧的

2016-11-27 19:06:29 372

原创响应式页面

响应式布局 Media1.什么事响应式 http://www.cnblogs.com/mofish/archive/2012/05/23/2515218.html Media Queries ：响应式 -->其作用就是允许添加表达式用以确定媒体的环境情况，以此来应用不同的样式表。换句话说，其允许我们在不改变内容的情况下，改变页面的布局以精确

2016-11-27 19:03:32 307

ee_Andy的博客