iTakeo

Archive for 11 月, 2015

使用px2rem，将px转换成rem。

px2rem (npm链接) ，顾名思义将px转换成rem。在移动端的时候，需要将px根据页面的fontSize来设置rem，现在可以一键完成。

首先安装node环境，然后安装：npm install px2rem

接着安装：npm install gulp-px3rem

编辑gulpfile.js

var gulp = require(‘gulp’),
px2rem = require(‘gulp-px3rem’);
gulp.task(‘pxrem’, function() {
gulp.src(‘src/style/sty.css’)
.pipe(px2rem({
remUnit: 64
}))
.pipe(gulp.dest(‘dest’))
});

其他选项：

px2rem({
baseDpr: 2, // 基于设备的Dpr
threeVersion: false, // 是否生成 @1x, @2x and @3x 三个版本(默认: false)，打开后
remVersion: true, // 是否生成rem版本(默认: true)
remUnit: 75, // rem转换比例 (默认: 75)
remPrecision: 5 // rem保留几位数 (默认: 5)
}

还有第二种方法，使用postcss插件，首先还是安装：npm install gulp-postcss

（更多…）

2015/11/26 0 /

/

标签: 暂无标签

input类型为date情况下不支持placeholder。

placeholder很好用，只是当input类型为date情况下，placeholder不起作用。

看下面的图，最后一个input为date类型的时候，placeholder并没有显示出来。

解决方法：input默认text，onclick动态改变他的type。

（更多…）

2015/11/17 0 /

/

标签: 暂无标签

Fontmin，让加载中文字体成为可能。

浏览器的季风已撩拨起 webfont 的热浪，中文字体却依旧寂寞如雪。与英文26个字母不同的是，中文字符集过多，导致字体文件过大，少则2M、3M多则7M、8M，还要加载不同格式的字体，基本上不用想，只能使用图片代替。

有些地方使用图片并不方便，如下图所示：

上面图里，中文字体之间夹着特殊字体，并且数字会改变，只能通过切除图片0-9每个数字一张图片。然后再通过js拼接到一起。
下面两个按钮也是特殊的字体，如果这样的按钮有很多，岂不是每个都得切一张图。

现在通过Fontmin(是一个纯 JavaScript 实现的字体子集化方案)，就可以做到把你想要的特殊字体提取出来，从而不用去加载庞大的字体了。

（更多…）

2015/11/17 0 /

/

标签: 暂无标签

各种各样的hack。

各种hack，包括css和js，从国外网站看到的。

Android

Selector Hacks

.selector:not(*:root) {}

Chrome*
Safari*
Opera≥ 14
Android*

JavaScript Hacks

var isChromium =!!window.chrome;

Chrome*
Opera≥ 14
Android4.0.4

Media Query Hacks

@media screen and (min-width:0\0) {}

Internet Explorer≥ 9
Safari4
Android≥ 2.3

（更多…）

2015/11/16 0 /

/

标签: 暂无标签

通过css3来判断横竖屏。

通过css3的媒体查询orientation，这个属性是来判断设备中的页面可见区域高度是否大于或等于宽度。

@media (orientation: portrait) {
//竖屏
}
@media (orientation: landscape) {
//横屏
}

具体，请使用手机打开下面的链接，并打开屏幕旋转，查看效果。

2015/11/11 0 /

/

标签: 暂无标签

判断鼠标移入移出方向。

判断鼠标移入移出方向。

//0:top
//1:right
//2:botto，
//3:left
function getDirection (ev, obj) {
var w = obj.offsetWidth,
h = obj.offsetHeight,
x = ev.pageX – obj.offsetLeft – w / 2 * (w > h ? h / w : 1),
y = ev.pageY – obj.offsetTop – h / 2 * (h > w ? w / h : 1),
d = Math.round(Math.atan2(y, x) / 1.57079633 + 5) % 4;
return d;
};

具体看下面的例子：

var div = document.getElementById(‘DirectionBox’);
div.onmouseover = div.onmouseout = function (ev) {
this.innerHTML = getDirection(ev, this);
};

（更多…）

2015/11/11 1 /

/

标签: 暂无标签

根据页面长度实现阅读进度条。

根据页面长度实现阅读进度条，具体看页面上的效果。

;(function(w,d){
var dom = d.createElement(‘div’);
dom.className = ‘scrollMove’;
dom.style.cssText = ‘position: fixed; left: 0px; top: 0px; height: 7px; background: #f00808; z-index: 999999;box-shadow: 0px 0px 3px #999;width: 0;transition:width 0.3s ease-out;-moz-transition:width 0.3s ease-out;-webkit-transition:width 0.3s ease-out;’
d.body.appendChild(dom);
w.addEventListener(‘scroll’,function(){
dom.style.width = Math.round((pageYOffset / (d.body.offsetHeight – d.documentElement.clientHeight)) * 100) +’%’;
},false);
})(window,document);

2015/11/04 0 /

/

标签: 暂无标签

输入银行卡号，每隔4位数字加一个空格

每隔4位数字加一个空格。

document.getElementById(‘bankCardInp’).onkeyup = function (event) {
var v = this.value;
if(/\S{5}/.test(v)){
this.value = v.replace(/\s/g, ”).replace(/(.{4})/g, “$1 “);
}
};

2015/11/03 3 /

/

标签: 暂无标签