• iphone 调用拍照上传 canvas校正

    发表于 2017-01-17 21:07:22   |   下载附件
    canwasiphone 拍照移动图片上传EXIF
    EXIF.js 插件下载地址,请点击上方下载链接下载
    var $ = require("../public/jquery.1.10.1.min.js");
    var EXIF = require("./exif.js");
    // 略
    var orientation;
         //EXIF js 可以读取图片的元信息  https://github.com/exif-js/exif-js
         EXIF.getData(me.files[0],function(){
         orientation=EXIF.getTag(this,'Orientation');
    });
    // 略
    // if (navigator.userAgent.match(/iphone/i)) { 
          // alert(navigator.userAgent.toString());
          getImgData(this.result, orientation, function(data) {
          //这里可以使用校正后的图片data了 
          opts.complete(data);
    });
  • 返回前一页,如果没有前一页历史,则跳转至 URL

    发表于 2017-01-17 19:00:28   |   下载附件
    返回上一页后退到上一页跳转至上一页或指定页面history.back
    function GoBack(url) {
        if ((navigator.userAgent.indexOf('MSIE') >= 0) && (navigator.userAgent.indexOf('Opera') < 0)) { // IE  
            if (history.length > 0) {
                window.history.go(-1);
            } else {
                window.location.href = url;
            }
        } else { //非IE浏览器  
            if (navigator.userAgent.indexOf('Firefox') >= 0 ||
                navigator.userAgent.indexOf('Opera') >= 0 ||
                navigator.userAgent.indexOf('Safari') >= 0 ||
                navigator.userAgent.indexOf('Chrome') >= 0 ||
                navigator.userAgent.indexOf('WebKit') >= 0) {
                if (window.history.length > 2) {
                    window.history.go(-1);
                } else {
                    window.location.href = url;
                }
            } else {//未知的浏览器  
                if (history.length > 1) {
                    window.history.go(-1);
                } else {
                    window.location.href = url;
                }
            }
        }
    }
  • IPhone中H5页面用on绑定click无效的解决方法

    发表于 2017-01-13 17:52:53   |   下载附件
    touchstart与click冲突touchtart时需要滑动页面click在iphone下无效click无效

    首先声明本人资质尚浅,本文只用于个人总结。如有错误,欢迎指正、共同提高。

    -----------------------------------------------------------------------------------

    第一种方法:解决的方法很巧妙,就是给需要绑定事件的元素添加一个css cursor: pointer 。

    exp:

    selector {
    cursor:pointer;
    }

    第二种方法:把document换成selector的父元素,前提是父元素不是由JS生成的。

  • npm国内被墙的解决方法

    发表于 2017-01-06 11:13:15   |   下载附件
    npm i 失效npm 被墙

    首先,我们的npm包无所谓安全性,所以不要使用性能和效率更慢的https,转而使用http,相关命令如下:NPM淘宝镜像地址 https://npm.taobao.org/

    // 关闭npm的https 命令 true | false
    npm config set strict-ssl false
    // 设置npm的获取地址
    npm config set registry 'https://npm.taobao.org/mirrors/npm/'


  • CSS3 渐变

    发表于 2016-12-30 16:01:52   |   下载附件
    渐变CSS3渐变背景渐变
    background: -webkit-linear-gradient(#fff1b1, #ffd869); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(#fff1b1, #ffd869); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(#fff1b1, #ffd869); /* Firefox 3.6 - 15 */
    background: linear-gradient(#fff1b1, #ffd869); /* 标准的语法 */
  • 音频MP3在PC端兼容各浏览器播放,依赖 jPlayer 插件,需先引入该JS文件及swf文件

    发表于 2016-12-28 17:47:57   |   下载附件
    音频播放MP3播放jPlayer兼容PC端浏览器的MP3播放自定义样式
    /**
     * 音频MP3在PC端兼容各浏览器播放,依赖 jPlayer 插件,需先引入该JS文件及swf文件
     * @param  {string} node   [音频缓存ID]
     * @param  {string} isload [是否已经下载,或第一次播放]
     */
    var myJPlayer = function(node, isload) {
        var me = $('#' + node);
        var address = me.attr('address');
        if (isload) {
            if (me.hasClass('ing')) {
                me.removeClass('ing');
                me.jPlayer("pause");
            } else {
                me.addClass('ing');
                me.jPlayer("play");
            }
        } else {
            me.jPlayer({
                play: function() {
                    // stop all players except this one.
                    $(this).jPlayer("pauseOthers", 0);
                    $('.audioReply').removeClass('ing');
                    // 当前
                    me.css({ width: '100px', height: '32px' }).append('<i class="dg-blue"></i>');
                    me.addClass('ing');
                },
                ready: function() {
                    $(this).jPlayer("setMedia", {
                        mp3: address
                    }).jPlayer("play");
                },
                ended: function() {
                    // The $.jPlayer.event.ended event
                    // Repeat the media
                    // $(this).jPlayer("play"); 
                    me.removeClass('ing');
                },
                size: {
                    width: '100px',
                    height: '32px',
                    cssClass: ""
                },
                swfPath: "http://static.hrloo.com/hrloo/global/plugins/jplayer/js/jquery.jplayer.swf",
                supplied: "mp3"
            });
        }
    }
  • TBS开发调试利器——TBS Studio

    发表于 2016-12-28 17:18:14   |   下载附件
    TBS Studio移动开发调试真机模拟调试

    TBS Studio是面向基于TBS的Web开发者和移动应用开发商(包括微信、手Q,三方App等)打造的开发服务整体解决方案,以提升广大开发者在真机环境下的开发效率,并帮助开发者分析和优化网页的设计,主要功能有网页Inspector调试,网页性能分析等。

    1.5 TBS Studio包下载

    win64: http://mcaredown.3g.qq.com/browser/tes/TBS_Studio_win_v1.2.0_2016120920.zip

    win32: http://mcaredown.3g.qq.com/browser/tes/TBS_Studio_win_v1.2.0_2016120920.zip

    MAC: http://mcaredown.3g.qq.com/browser/tes/TBS_Studio_mac_v1.2.0_2016121922.zip

    linux64位下载地址:http://mcaredown.3g.qq.com/browser/tes/TBS_Studio_linux_x64.zip

  • HTML DOM referrer 属性

    发表于 2016-12-27 14:57:21   |   下载附件
    上一个页面地址referrerdocument.referrer

    referrer 属性可返回载入当前文档的文档的 URL。

    document.referrer

  • 手机端懒加载之没有图片高宽的瀑布流实现

    发表于 2016-12-19 11:35:46   |   下载附件
    瀑布流懒加载预加载图片得到高宽滚动加载更多

    今天项目中用到了瀑布流效果,所有效果由前端渲染,得到一个图片地址,没有图片高宽,也不知道图片能不能加载成功,为此,必须先预加载图片,得到图片的真实高宽再计算显示高宽和它所处的位置信息,才能实现瀑布流效果,直接贴代码:

  • 动态获取图片的宽度和高度的像素值

    发表于 2016-12-16 20:44:22   |   下载附件
    img width height动态获取图片高宽

    动态获取图片的宽度和高度的像素值


    var getImgSize = function(sUrl, callback) {
        var img = new Image();
        img.src = sUrl + '?t=' + Math.random(); // IE下,ajax会缓存,导致onreadystatechange函数没有被触发,所以需要加一个随机数  
        var FBrowser = getBrowserInfo(); // 获得浏览器版本
        if (FBrowser.browser == "ie") {
            img.onreadystatechange = function() {
                if (this.readyState == "loaded" || this.readyState == "complete") {
                    callback({
                        width: img.width,
                        height: img.height,
                        url: sUrl
                    });
                }
            };
        } else if (FBrowser.browser == "firefox" || FBrowser.browser == "opera" || FBrowser.browser == "chrome" || FBrowser.browser == "safari") {
            img.onload = function() {
                callback({
                    width: img.width,
                    height: img.height,
                    url: sUrl
                });
            };
        } else {
            callback({
                width: img.width,
                height: img.height,
                url: sUrl
            });
        }
    };


每页显示10条,当前为第10页,总页数为19页