2016年10月 – 爱梦小屋

解决按钮点击蓝色边框 outline:none;

button{outline:none;}

开心抽抽乐课堂小游戏

localhost-littlebaobao-choujiang
点击跳转开心抽抽乐小游戏

Thinkphp 获取网址

'http://' . $_SERVER ['HTTP_HOST'] . $_SERVER ['REQUEST_URI'];

css3长度单位根em（rem）恐惧em的连锁反应吗？这里从根部获取的em满足你的布局需求

css头部配置

html { font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/ } 
body { font-size: 1.4rem;/*1.4 × 10px = 14px */ }
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/ } 
p {  font-size:14px; font-size:1.4rem;}/*IE8及之前版本的IE浏览器使用14像素*/

canvas创建/图片和base64互转

部分参考自http://blog.csdn.net/renfufei/article/details/9855519

创建canvas

var canvas = document.createElement('canvas'); 
canvas.id     = "CursorLayer"; 
canvas.width  = 1224; 
canvas.height = 768; 
canvas.style.zIndex   = 8; 
canvas.style.position = "absolute"; 
canvas.style.border   = "1px solid";
document.body.appendChild(canvas);

图片转base64

// 把image 转换为 canvas对象  
function convertImageToCanvas(image) {  
    // 创建canvas DOM元素，并设置其宽高和图片一样   
    var canvas = document.createElement("canvas");  
    canvas.width = image.width;  
    canvas.height = image.height;  
    // 坐标(0,0) 表示从此处开始绘制，相当于偏移。  
    canvas.getContext("2d").drawImage(image, 0, 0);  
  
    return canvas;  
}

base64转图片

var fin = new Image();
    fin.src =  canvas.toDataURL("image/jpg");
document.body.appendChild(fin);

Cropit插件 html5截图插件代码看得懂（易改）

来源：http://www.jq22.com/jquery-info6549

改裁剪大小

  //210行 this.$preview = this.options.$preview.css('position', 'relative');
  //改为
  this.$preview = this.options.$preview.css({'position': 'relative',"height":"560px","width":"350px"});

FileReader使用

来源http://blog.csdn.net/yaoyuan_difang/article/details/38582697

手机拖拽事件 touchmove/touchend

cona.addEventListener("touchmove",function(event){
        event.preventDefault();//阻止其他事件
         // 如果这个元素的位置内只有一个手指的话
         if (event.targetTouches.length == 1) {
          var touch = event.targetTouches[0];  // 把元素放在手指所在的位置
          cona.style.left = touch.pageX + 'px';
          cona.style.top = touch.pageY + 'px';
          a.floatx=touch.pageX;
          a.floaty=touch.pageY;
          }
      });

【css公用】 css实现元素翻转与旋转

翻转

/*水平翻转*/
.flipx {
    -moz-transform:scaleX(-1);
    -webkit-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);
    /*IE*/
    filter:FlipH;
}

/*垂直翻转*/
.flipy {
    -moz-transform:scaleY(-1);
    -webkit-transform:scaleY(-1);
    -o-transform:scaleY(-1);
    transform:scaleY(-1);
    /*IE*/
    filter:FlipV;
}

旋转（比较懒，没验证请诸位百度）

bootstrap-datetimepicker 汉化

//先增加汉化设置
$.fn.datetimepicker.dates['zh'] = {
                days:       ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六","星期日"],
                daysShort:  ["日", "一", "二", "三", "四", "五", "六","日"],
                daysMin:    ["日", "一", "二", "三", "四", "五", "六","日"],
                months:     ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月","十二月"],
                monthsShort:  ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"],
                meridiem:    ["上午", "下午"],
                //suffix:      ["st", "nd", "rd", "th"],
                today:       "今天"
        };

//然后修改语言为zh
  $(value).datetimepicker({
      format: 'yyyy-mm-dd hh:ii',
      minView: 1,
      autoclose: true,
      language: "zh"
  });