learning note_1

发表于 | 更新于 | 分类于 |
字数统计

css animate.css

  1. 一个常用的动效库

css zeptofullpage.css

动效库

zepto.js

一个和jQuery.js的移动端，新增一些API， 和 touch模块。
在线选取zepto模块的一个网站 。 可能生成的文件有问题。

  1. zepto.js和jQery的区别：
  • zeptojs的体积比Jquery更小。
  • 他们的API基本上一样。
  • zeptojs里面有一个叫做touch模块。
  1. zepto.js在移动端的点透问题：

在移动端里，click和tap有区别。

触发的时间的区别:

click需要350ms,tap需要200多ms

注意： 使用zepto会引发点透的问题！

解决zepto点透的问题？

需要使用fastclick这个插件来解决点透的问题。

  1. 深拷贝和浅拷贝的区别？

浅拷贝的父对象和子对象指向的地址不一样，但是属性中的引用类型还是会指向同样的内存地址，
深拷贝的两个对象所有属性都没有了关系，实现了真正意义上的深拷贝

  1. 深拷贝的方法

这个博客罗列了很多方法

  • 利用JSON对象的方法，
    将要拷贝的对象JSON.stringgify()转化为字符串，再通过JSON.parse()解析赋值，这样新对象和就对象就不会指向同一个地址

缺点—不能实现对函数的拷贝

var obj1 = {
    name: "zhangsan",
    sayHello: function() {
        console.log(this.name);
    }
}    
var copyObj1 = JSON.stringify(obj1);
console.log(copyObj1);
var obj2 = JSON.parse(copyObj1);

console.log(obj2);
console.log(obj2 == obj1); //false
  • jq/zepto 的$.extend()方法
var orinObj = {
    a:1,
    arr:[1,2],
    fn:function() {}
}

//第一个参数设为false或者默认,则为浅拷贝
var newObj = $.extend({}, orinObj);
console.log(newObj === orinObj); //false
console.log(newObj); //Object {a: 1, arr: Array[2]}
console.log(orinObj.fn === newObj.fn); //true

//深拷贝
var newObj2 = $.extend(true, {}, orinObj); 
console.log(newObj2); //Object {a: 1, arr: Array[2]}
console.log(newObj2 === orinObj); //false

animation

  1. animation: 写在动画的元素里，连起来写的属性值

    • 关键帧动画的名字
    • 过渡的时间
    • 延迟的时间
    • 动效的速度(linear / ease /ease-in / ease-in-out / 贝塞尔曲线)
    • 循环的次数(数字 / infinite(一直循环))
    • 设置动画结束后的样式(backwards(让元素保持原有的样式) / both(保留最终的样式) / forwards(让元素拥有最后的样式) )
    • 是否反向(alternate)如果设置了方向，也会计入循环次数

注意与tansition 的区别

  1. 定义关键帧动画

@keyframes animateName {}

.box {
    width: 100px;
    height: 100px;
    animation: myAnimate 2s both alternate;
    background: #008000;
    position: relative;
}

@keyframes myAnimate {
    0% {
        width: 100px;
        height: 100px;
        left: 20px;
    }

    40% {
        width: 300px;    
        height: 100px;
        background: #f00;
        left: 40px;
    }

    60% {
        width: 600px;
        height: 200px;
        left: 200px;
    }

    80% {
        background: yellow;    
    }

    100% {
        width: 900px;
        left: 50px;
    }
}

canvas

为我们提供了一个API : 渲染上下文

var ctx = can.getContext("2d"/ "3d");

拓展：

==webgl 用来制作3D的页面==

==three.js==

canvas有一个默认样式，宽度为300px.高度为150px

canvas默认颜色是黑色

  1. 设置宽高的方式

canvas的宽高不能通过css来给它设置！

  • html标签属性
<canvas width="800" height="600"></canvas>
  • js
var can = document.queryselector("canvas");
can.width = '600';
can.height = '400';
  1. 如何在canvas 里绘制图片

canvas的坐标为(0,0)在左上角！

  • 如何绘制矩形？
var can = document.querySelector("#can");
can.width = 600;
can.height = 400;
var ctx = can.getContext("2d");

//绘制矩形
//ctx.rect(x, y, w, h);
ctx.rect(30, 30, 50, 50);
//填充
//ctx.fill();
//绘制边框
ctx.stroke();
//改变边框颜色
ctx.strokeStyle = "royalblue";
ctx.strokeRect(100, 30, 50, 50);

//改变填充颜色
ctx.fillStyle = "deepskyblue";
ctx.fillRect(170, 30, 50, 50);

  • 如何画线？

    设置开始的坐标点
moveTo(x,y)

设置点的坐标
lineTo(x,y)

开始路径
beginPath()

闭合路径
closePath()
  • 如何绘制三角形？

在canvas API中没有提供绘制三角形的直接方法，但是可以通过绘制点再 连接即可间接绘制出来

//画三角形
//ctx.beginPath();
ctx.moveTo(240, 30);
ctx.lineTo(290, 55);
ctx.lineTo(240, 80);
ctx.fill();
  • 绘制圆弧

arc(x,y,r,起始弧度，结束的弧度,旋转的方向(true 逆时针 / false 顺时针))

x,y —-> 圆心坐标

r —> 半径

弧度 = (Math.PI/180)*度数

//画圆 逆时针true 顺时针false
ctx.beginPath();
ctx.arc(325, 55, 25, Math.PI * 2, 0, true);
ctx.lineTo(325, 55);
ctx.stroke();
ctx.closePath();
ctx.fill();
  • 绘制扇形
//画扇形
ctx.beginPath();  // 起始位置要改成他的圆心位置
ctx.arc(400,55,25,0,Math.PI/4,false);
ctx.lineTo(400, 55);
ctx.closePath();
ctx.stroke();
  • 绘制图片

画图片：

drawImage(image,x,y,w,h)


//绘制图片
var oImage = new Image();
oImage.src = "zepto.fullpage-master/demo/img/landscape.png";
oImage.onload = function() {
    ctx.drawImage(oImage,30, 130, 50, 50);                
};

  • 绘制文字

    fillText(你要画的文字,x,y)

strokeText(你要画的文字，x,y)

//实心文字
ctx.font = "30px Arial";
ctx.fillText("hello world", 100, 150);
//空心文字        
ctx.strokeText("JavaScript", 250, 150);

  • 画折线图 / 柱状图 / 饼图…

    Echarts  /  hightcharts
  • canvas里面如果想做动画，实际上就是把之前的清掉，重新画。
clearRect(x,y,w,h);

canvas标签中间是没有文字的，如果能显示文字，说明该浏览器不支持canvas,可以用这个方法鉴别用户浏览器是否支持canvas 

<canvas>您的浏览器不支持canvas</canvas>

移动端布局

  1. 一些常用单位
  • em 相对于父级元素的字体大小
  • rem 相对于根元素的字体大小
  • vw 视口宽度百分比
  • vh 视口高度百分比

如何获取视口宽高？

window.innerWidth; //宽
widdow.innerHeight; //高
  1. meta元标签的一些说明
  • iphone上输入一行数字或者邮箱后文字的样式改变且无法通过css修改的解决办法
<meta content="telephone=no,email=no" name="format-detection" />
  • 网站关键字
<meta name="keywords" content="前端，呵呵，古诗" />
  • 网站描述
<meta name="description" content="发打发打发打发地方地方地方" />
  • 默认窗口缩放比例
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • ie自动调用edge浏览器
<meta http-equiv="X-UA-Compatible" content="ie=edge">
  • 编码格式
<meta charset="UTF-8">