慕课网---深入理解vertical-align总结

看了张鑫旭在慕课网关于vertical-align的讲解,感觉讲的挺深,所以总结了一下
vertical-align的百分比值相对于line-height计算
IE6/7下line-height不支持小数

vertical-align起作用的前提

该属性应用于inline水平或者table-cell元素

inline水平

inline:img,span,strong,em等
inline-block:input,button(ie8+,ie6/7会把inline-block当作inline)

table-cell元素

td
所以默认情况下支持vertical-align的有:图片,按钮,文字,单元格

查看全文
Gulp+BroserSync实现浏览器自动刷新

  在写前端代码的时候,我们为了看效果,需要一直按F5进行刷新,这样做很繁琐而且非常浪费时间,在网上搜过后发现很多关于自动刷新的办法,这里我介绍的是基于gulp和broserSync实现浏览器的自动刷新,即只要编辑器保存,浏览器就会自动刷新。
  那么gulp,broserSync是什么呢?

Gulp

  Gulp是一个前端自动化工具,基于nodejs,和grunt差不多,但是比grunt语法更加简单,语法更加自然。在gulp的插件中,我们可以找到自动刷新,压缩图片/代码/等等各类工具,方便我们的使用,并且gulp的任务是流(pipe),即一个任务完成后,紧接的另一个任务开始进行。gulp的使用如下:

1.安装gulp

  1. 全局安装gulp:

    1
    $ npm install --global gulp
  2. 作为项目的开发依赖(devDependencies)安装:

    1
    $ npm install --save-dev gulp
  3. 生成package.json

    1
    $ npm init
查看全文
text-algin:justify实现文本两端对齐

最近在写页面的时候遇到了一个问题—当行文本双端对齐,大家都知道CSS属性中有一个“text-align:justify”,但是这个属性使用的时候,要求还是挺多的,尤其是要实现单行文本双端对齐。关于两端对齐,大漠和张鑫旭的博客中都有文章讲,非常不错,推荐给大家:
display:inline-block/text-align:justify下列表的两端对齐布局
Text-align:Justify和RWD

text-align:justify与text-align-last:justify

1.text-align

MDN中这样介绍到:“text-align CSS属性定义行内内容(例如文字)如何相对它的块父元素对齐。text-align并不控制块元素自己的对齐,只控制它的行内内容的对齐。”从这里可以看出,控制文本居中对齐直接写text-align:justify就可以。但是这对于多行文本(即有文本换行)除了最后一行都可以实现两端对齐,最后一行依旧左对齐。所以就需要控制最后一行文本对齐方式的CSS属性:text-align-last。

查看全文
利用CSS3新单位rem实现响应

做移动端的响应方法有很多,但是我喜欢用CSS3的新单位rem,这个单位非常好用(有个比它还好用的单位vh,不过兼容性太差,不考虑了),根据不同屏幕,设置不同的基准值,从而实现适配各个屏幕尺寸的移动设备。慕课网有一套非常不错的讲关于rem的视频,这里推荐给大家http://www.imooc.com/learn/494
rem—-CSS3中新增的单位,兼容性还不错,常用于移动端实现字体的响应,与em不同,rem根据根元素的font-size计算,所以要利用rem实现适配各个屏幕的大小,就需要根据不同的屏幕设置根元素不同的font-size的值。所以我们需要做下面的一些工作。

1.获取浏览器的宽高(对于移动设备就是设备的宽度)

代码如下:

1
2
3
4
5
6
7
8
9
10
11
var pageWidth=window.innerWidth;
var pageHeight=window.innerHeight;
if(typeof pageWidth !=='number'){
if(document.compatMode==='CSS1Compat'){
pageWidt=document.documentElement.clientWidth;
pageHeight=document.documentElement.clientHeight;
}else{
pageWidt=document.body.clientWidth;
pageHeight=document.body.clientHeight;
}
}

查看全文
文件上传(二)---新XMLHttpRequest实现带进度条文件上传

前几天搞得那个文件上传,最近工作不太忙,又开始完善。这次主要添加了文件上传的进度部分,主要用到的则是XMLHttpRequest2的progress,由于我读的是《javascript高级程序设计》(第三版),这里我遇到一个关于progeress事件的坑,后面详细解答。

创建XMLHttpRequest对象

首先说说XMLHttpRequest,在IE7+浏览器中,只需要new一个XMLHttpRequest对象即可:

1
let xhr=new XMLHttpRequest();

由于现在淘宝都不再支持IE6以及7,所以这里不考虑IE7及以下浏览器关于xhr的创建方法。

查看全文
初探ES6——轮播图实践总结

  最近因为同学的一个轮播图不会写,让我萌生了用ES6写一个轮播图的想法(本人喜欢这些玩儿一些新的东西),以前就知道ES6,但是一直没有学,现在终于下决心学了,借助阮一峰老师的书ECMAScript 6 入门 和Youtube上面老外的视频学习ES6非常不错。阮一峰老师的书写的非常详细,推荐想学习的ES6的同学仔细看看。本篇文章会总结在实践中用到的ES6的知识。

模板字符串

这是我非常喜欢的ES6的特点之一,非常直观的反应出变量和字符串之间的关系,在ES5中,如果我们想在字符串中添加变量,需要用如下写法:

1
2
3
4
5
animate(box, 'translate(-' + itemWidth * num + 'px,0)', 1000, function () {
box.style.transitionDuration = '';
box.style.transform = 'translate(-800px,0)';
flag = true;
});

现在用ES6的模板字符串,可以直接把字符串和变量相结合,更加易懂。

1
2
3
4
5
animate(box, `translate(-${itemWidth*num}px,0)`, 1000, function() {
box.style.transitionDuration = '';
box.style.transform = `translate(-${itemWidth*(item.length-2)}px,0)`;
flag = true;
});

查看全文
文件上传(一)---H5 file API,canvas

  最近公司让调研关于webUploader的图片上传中能否压缩,能否实现图片的格式转换,如果能如何实现,经过调研,这个插件可以实现文件的压缩,但是不能实现图片的格式转换,同时在调研过程中,知道了很多新的东西,H5 file API,canvas,等等,所以有了自己写一个文件上传来熟悉这些东西,所以有了本篇文章。

一.做好HTML,CSS样式

这里很简单,就是写一个HTML+CSS的文件,让我们的上传看起来像那么回事儿,这里不细说,代码如下:

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fileUploader</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="upbox">
<h1>测试</h1>
<input id="uploader" type="file" multiple="multiple" name="file" accept="image/*">
</div>
<a id="test" href="">点击选择上传图片</a>
<button type="button" id="button">上传</button>
<script src="./index.js"></script>
</body>
</html>

index.css

1
2
3
4
5
6
7
.upbox{width: 100%;height: 500px;border: 3px dashed #000;position: relative;}
#uploader{display: block;width: 100%;height: 100%;opacity: 0;position: absolute;left: 0;top: 0;cursor: pointer;}
h1{position: absolute;left: 45%;top: 40%;}
button{width: 100px;height: 50px;float: right;}
.img-content{width: 120px;height: 120px;border: 1px solid #000;margin: 20px;float: left;position: relative; z-index: 5;}
.img-box{width: 100%;height: 100%;}
.img-box img{display: block; width: 100%;height: 100%;}
查看全文
H5焦点管理---tabindex与document.activeElement

  周四下午测试人员提出BUG,说我写的那个类支付宝密码框在按下Tab键时候无法像原生的form表单中的input那样被激活,当时的第一反应是,我的密码框原本就是用div模拟的,怎么可能想form表单一样在Tab键时候激活呢。但是当我打开支付宝官网,按下tab键后,密码框可以被激活,这激起了我的好奇心,也就有了后来对tabindex和document.activeElement的发现。废话不多说,进入正题。

HTML tabindex属

tabindex的设置

  当Tab键用于导航时,tabindex属性规定元素的tab键控制次序,其中tabindex的值为阿拉伯数字,默认情况下越靠前的元素该值越小,所以我们可以通过人为改变tabindex的值来改变按下Tab键后可以被激活元素的激活顺序,只需要做如下设置:

1
2
3
4
<input type="text" tabindex="1">
<input type="text" tabindex="2">
<input type="text" tabindex="4">
<input type="text" tabindex="3">

查看全文
H5 Canvas实现图片格式的转换

  今天早上到公司,看到CTO要求调查关于前端如何实现图片格式转换,自己上网找了下关于canvas如何实现图片格式转换,其实还是蛮简单的,但是因为网上的教程着实写的简单,而且都一样,我也是醉了,所以写下这篇博客,以记录今天的调查结果。

使用Javasript将图片写入画布

1
2
3
4
5
6
7
function convertImageToCanvas(image) {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext("2d").drawImage(image, 0, 0);
return canvas;
}
查看全文
jquery插件开发

由于公司需要写一个功能,而公司的中使用的框架是jquery,所以想到了开发jquery框架。

1.jQuery插件开发方式

jQuery插件开发方式主要有三种:
通过$.extend(),通过$.fn向jQuery添加新的方法,通过$weight()应用jQueryUI的部件工厂方式创建

2.插件中的this

在插件名字定义的这个函数内部,this指代的是在调用该插件时,用jQuery选择器选中的元素。这里的this已经是jQuery元素,无需再用美元符包装。

3.jQuery链式调用

jQuery支持链式调用,要让插件不打破这个链式调用,只需要return一下,实例如下

1
2
3
4
5
6
7
8
$.fn.myPlugin = function(){
//这里面this指的是jquery选中的元素
this.css('color','red');
return this.each(function(){
//对每个元素进行操作
$(this).append(' '+$(this).attr('href'));
})
}

查看全文