var phoneScale = parseInt(window.screen.width) / 750;
if(/Android (\d+\.\d+)/.test(navigator.userAgent)) {
    if(parseFloat(RegExp.$1) > 2.3) {
      document.write('<meta name="viewport" id="vie" content="width=750, minimum-scale = ' + phoneScale + ', maximum-scale = ' + phoneScale + ', target-densitydpi=device-dpi">');
    } else {
      document.write('<meta name="viewport" id="vie" content="width=750, target-densitydpi=device-dpi">');
    }
} else {
    document.write('<meta id="vie" name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi, minimal-ui">');
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.

#fixedContent{width:400px;margin:0 auto;box-shadow:0 0 10px rgba(0,0,0,0.75)}
#fixedContent .titleBox{position:absolute;background:#eee;z-index:10;top:0;left:0;right:0;padding:25px;font-size:12px;border-top:1px solid #333}
.fixedTitle{position:relative;padding-top:52px}
.fixedBox{width: 100%;height: 500px;background: #333;}
01.
02.
03.
04.

<div id="fixedContent">
    <div class="fixedTitle">
        <p class="titleBox">Title #1</p>
        <div class="fixedBox"></div>
    </div>
    <div class="fixedTitle">
        <p class="titleBox">Title #2</p>
        <div class="fixedBox"></div>
    </div>
    ....
</div>
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.

window.onscroll = function(){
    ;[].forEach.call(document.querySelectorAll('.fixedTitle'),function(o){
        var top = o.getBoundingClientRect().top,
            height = o.offsetHeight,
            childTitle = o.querySelector('.titleBox'),
            titleHeight = childTitle.offsetHeight;
            if (top <= (height * -1) + titleHeight) 
                childTitle.style.marginTop = (height - titleHeight)+'px';
            else if (top <= 0) 
                childTitle.style.marginTop= ((top * (-1)) - 1)+'px';
            else 
                childTitle.style.marginTop='0';
    });
};
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.

微信小程序toast提示插件。

提示：3月28号微信更新了版本，showToast可以通过image参数修改默认icon了，最大时间也取消了。

以上两个更新实用很多，但icon还是无法去除。显示形式有点单一，无法自定义，可能后续更新会增加更多功能。

下载文章下面的文件，放在根目录。

然后在app.js中引入js并添加到App中，如下：

var wxToast = require('toast/toast.js')
App({
    wxToast ,
    onLaunch: function () {}
})
01.
02.
03.
04.
05.

在app.wxss中添加如下css：

.wxToast_mask{width:100%;height:100%;position:fixed;left:0px;top:0px;z-index:10000;background:rgba(0,0,0,0);opacity:0;display:none}.wxToast_show{display:block}.wxToast_content{max-width:80%;min-width:90px;position:absolute;left:50%;top:20%;transform:translate3d(-50%,0,0);padding:15px;color:#fff;font-size:17px;text-align:center;border-radius:5px;background:rgba(0,0,0,.8)}.wxToast_img{width:55px;height:55px;display:block;margin:0 auto 8px auto}
01.

接着在页面xxx.wxml中添加如下内容：

<import src="../../toast/toast.wxml"/>
<template is="wxToast" data="{{...wxToastConfig}}"></template>
01.
02.

最后在页面xxx.js中就可以调用了。

var app = getApp();  //wxToast挂载在app下面，所以必须先获取app
Page({
    toast: {
        //调用
        app.wxToast({
            title : '加载中'
        })
    },
    onLoad : function( ){}
})
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.

更多方法：

app.wxToast({
    title : '验证码错误',  //标题，不写默认正在加载
    img : '../../images/cc.png', //icon路径，不写不显示
    imgClass : 'images',  //icon添加class类名
    contentClass : 'content',  //内容添加class类名
    duration : 3000,     //延时关闭，默认2000
    tapClose : false,    //点击关闭，默认false
    show : function(){    //显示函数
        console.log('显示啦')
    },
    hide : function(){     //关闭函数
        console.log('消失啦')
    }
});
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.

app.wxToast(false); //如果需要隐藏，参数设置为false即可。
setTimeout(function(){
    app.wxToast(false);
},3000) 
01.
02.
03.
04.

点击这里下载文件

接口说明：

var _rotate = new iRotate('#div',{
    start : 0,   //开始角度，可不写，默认0
    end :45,  //结束角度
    time :5000, //持续时间，可不写，默认1000
    easing : 'easeOut', //动画形式，目前只有'linear'和'easeOut'两种，可不写，默认'easeOut'
    callback : function(){ //回调函数
        //this为当前对象
    }
});
_rotate.stop(function(){ //停止回调函数
    //this为当前对象
});
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.

点击这里查看JS

举例子：

开始抽奖

默认转动：

开始抽奖2

更新2.0–使用css3控制旋转

点击这里下载JS 2.0

var luck = new Rotate('#rot22',{ //第一个参数需要旋转的元素
    size : 8, //奖品个数
    time :5000  //旋转时间
});
luck.start(2,()=>{ //开始，设置中奖，回调
    alert('恭喜获得10Q币！')
});
luck.reset();  //复位，下次旋转时清空上次记录的位置 
01.
02.
03.
04.
05.
06.
07.
08.

复位并重新开始

之前有关于如何让video在微信或者QQ浏览器里面不默认弹出全屏播放，可点击这里查看。

今天发现一个更简单的解决方法，加上一条属性即可。x5-video-player-type=”h5″。通过设置这个属性，让video开启同层H5播放器。另外在X5内核里，video是单独的一个view，会覆盖在任何元素之上，据说是为了统一用户体验，加上这个属性之后，也可以让其他元素浮在video上面了。

经过测试，在IOS设备，依然还需要添加如下属性 x-webkit-airplay=”true” playsinline webkit-playsinline=”true”。

<video id="video" src="mp4.mp4" x-webkit-airplay="true" playsinline webkit-playsinline="true" x5-video-player-type="h5"></video>
01.

另外还有几个属性 x5-video-player-fullscreen=”true”，视频播放时将会进入到全屏模式。

x5?video?orientation，声明播放器支持的方向，可选值： landscape 横屏, portraint竖屏 ，此属性只在声明了x5?video?player?type=”h5″情况下生效。

点击这里查看DEMO

球形物体碰撞检测。

var dx = objectB.x - objectA.x,
    dy = objectB.y - objectB.y,
    dist = Math.sqrt(dx * dx + dy * dy);

if ( dist < objectA.radius + objectB.radius ){
    碰撞
}
01.
02.
03.
04.
05.
06.
07.

举个例子：

（更多…）

HTML如下，具体参数通过data属性来配置：

//data-min 为最小区间
//data-max 为最大区间
//data-start 为默认开始值
//data-end 为默认结束值
//data-step 为设置步长值，即每次滑动的大小
//data-disable 为禁止拖动
//data-blocked 是否开启碰撞判断，开启后，将不会自动改变区间大小，默认false
<div class="containerWrap" data-min="0" data-max="300" data-start="30" data-end="130" data-step="10" data-blocked="true" data-disable="true">
    <div class="rangeBox rangeBox1" data-drag ></div>
    <div class="rangeBox rangeBox2" data-drag ></div>
    <div class="rangeSlide"></div>
</div>
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.

主要CSS如下：

.containerWrap { background-color: #c2d2d4; height: 12px; padding: 0; position: relative; width: 300px; margin: 20px 0; border-radius: 10px; }
.rangeBox { background-color: #008c7b; text-align: center; width: 30px; height: 30px; position: absolute; top: -11px; z-index: 2; border: 2px solid #f5f5f5; border-radius: 50%; background: #2ab1c1; box-shadow: 0 0 3px gray; }
.rangeBox:hover { background: #55939c; }
.rangeSlide { background-color: #6a7d81; height: 12px; position: relative; border-radius: 10px; }
.containerWrap[data-disable="true"] .rangeBox{background: #6a7d81}
01.
02.
03.
04.
05.

JS如下：

//第一个参数为元素ID或者class
//第二个回调函数，滑动时执行，可不写
var _range = new Range('#container',function(a){
    //a参数为区间值，是一个数组，例如： [10,24]
    min.innerHTML = a[0];
    max.innerHTML = a[1];
});
_range.clickOff = true //关闭点击改变区间
_range.get(); //获取区间
_range.resize(); //重新改变大小，用于修改宽度时执行 
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.

（更多…）

长话短说，基于之前这篇文章（制作一个多面体。）。来制作一个3D的多面体。如下：

可以看到一个正在旋转的多面体，然后我们修改translateZ轴，来吧视角挪到盒子的中间。这样就造成了一种3D感觉，如下：

（更多…）

var set= {
    width: 80, //每个宽度
    num :8  //个数
};
function translateZ(opts) {
    return Math.round(opts.width / (2 * Math.tan(Math.PI / opts.number)));
};
var znum = translateZ({
    width: set.width,
    number: set.num
}); 
for(var i=0;i < set.num;i++){
    var rotateY = (360/set.num)*i;
    var style = 'transform:rotateY('+rotateY+'deg) translateZ( '+znum+'px );'
    carousel.insertAdjacentHTML("beforeend", '<figure style="'+style+'">'+(i+1)+'</figure>');
};
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.

var Emblem = {
    init: function(el) {
        var element = document.querySelector(el);
        var text = element.innerHTML;
        element.innerHTML = '';
        for (var i = 0; i < text.length; i++) {
            element.insertAdjacentHTML("beforeend", '<span style="transform:rotateZ('+(360/text.length)*(i)+'deg);-webkit-transform:rotateZ('+(360/text.length)*(i)+'deg);position: absolute;display: inline-block;left: 0;right: 0;top: 0;bottom: 0;text-transform: uppercase;">'+text[i]+'</span>');
        }
    }
};
Emblem.init('.emblem');
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.