请使用firefox,chrome等最新浏览器浏览本站。

web前端技术分享

canvas实现图片压缩上传总结

最近在移动项目中遇到了上传图片文件太大的问题。之前实现图片压缩是将数据传到php,php通过gd库实现压缩,显然未经过压缩的数据需要网络上传。 h5 canvas可以实现前端压缩,然后将压缩过的图片传给后台。 这样就减小了网路压力。具体实现方式: function fileSelected(obj) { if (obj) { var file ……继续阅读 »

阿豹 3年前 (2015-11-26) 457浏览 0评论 5个赞

精致巧妙的javascript模板引擎-laytpl.js

aytpl是一款颠覆性的JavaScript模板引擎,它用巧妙的实现方式,将自身的体积变得小巧玲珑,不仅性能接近极致,并且还具备传统js引擎的几乎所有功能。 laytpl.js官网 使用方式: //第一步:编写模版。你可以使用一个script标签存放模板,如: <script id="demo" type="text/html"> {……继续阅读 »

阿豹 3年前 (2015-11-13) 321浏览 0评论 4个赞

html5 input placeholder兼容

查看html5 input placeholder兼容性 实现html5 input placeholder兼容,需要借助javascript,css共同实现: html代码: <input type="text" placeholder="邮箱" id="email-ks"/> javascript代码: (function(window……继续阅读 »

阿豹 3年前 (2015-09-15) 826浏览 3评论 5个赞

sass编译工具——Koala

Koala下载地址 语言设置: 设置完成后需要重启Koala 使用: 将sass文件夹拖入到面板中,单机sass文件,可以看到如下界面: 这里可以设置输出类型,是否自动编译。 编译的css文件自动保存在sass目录同级的css目录中。 此时我们编写sass文件,当遇到中文时,比如: font-family:微软雅黑;Koala会报错,是因为Koala默……继续阅读 »

阿豹 3年前 (2015-08-12) 434浏览 0评论 6个赞

css单位及line-height

说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了。然后随着手机的流行,web app和hybrid app的开发,都用到了css3技术,在css3中,新增了许多单位,rem、vw和vh、vmin和vmax、ch和ex等等,下面对这些单位做一下详细介绍。 em e……继续阅读 »

阿豹 4年前 (2015-08-04) 320浏览 0评论 6个赞

SEO优化-最佳html代码

1.<!–页面注解–> 这个标签是用来做HTML代码注解的,很多站在这里会写上关键词,这种形式的注解在浏览器中是不会显示的,而搜索引擎可以读到。所以这个标签有的时候会成为作弊的一种形式,不要过多的用这种标签到来注明你的关键词,否则如果搜索引擎认为你是作弊的话,就惨了。 2.<title>页面标题</tit……继续阅读 »

阿豹 4年前 (2015-08-03) 303浏览 0评论 5个赞