月度归档:2016年05月

jq+css饼图动画效果升级版(修复闪动bug)

代码走起:

; (function() {
    var pieRight = $('.pieRight'); //右边的半圆
    var pieRight2 = $('.pieRight2'); //右边的第二个半圆
    var h1 = $('.pie h1'); //百分比数字
    var deg = 60; //旋转角度
    var cha = deg - 50; //后半段角度的值
    var timeall = 2000; //旋转时间 毫秒
    var sec = timeall / deg; //速度值
    var time2 = cha * sec; //后半段角度的旋转时间
    var time = timeall - time2; //前半段角度的旋转时间
    var i = 0; //临时变量 用来存储百分比数字

    //角度小于一半 则 时间减半
    if (deg < 50) {
        time = (time / 2);
        sec = time / deg;

        //turn代表圈   1 turn 就是一圈
        $('.pies').css({
            'transition': 'transform ' + time + 'ms linear',
            'transform': 'rotate(.' + deg + 'turn)'
        });
    } else {
        $('.pies').css({
            'transition': 'transform ' + time + 'ms linear',
            'transform': 'rotate(.5turn)'
        });
    }

    //百分比效果定时器
    var times = setInterval(function() {

        //递增百分比数字 并赋值
        i++;
        h1.html(i + '%');

        //核心思路:
        //右侧叠加两个半圆
        //当角度超过一半时 启用第二个半圆动画
        if (deg > 50 && i == 50) {

            //改变第二个半圆的层级
            pieRight2.addClass('up');
            $('.pieRight2').css({
                'transition': 'transform ' + time2 + 'ms linear',
                'transform': 'rotate(.' + cha + 'turn)'
            });
        }

        //达到目标角度 清除定时器
        if (i >= deg) {
            clearInterval(times);
        }

    },
    sec);

})()

查看升级后的饼图实例:升级版饼图动画实例
下载源码:下载源码

jq+css实现饼图动画效果

上代码:

; (function() {
    var pieRight = $('.pieRight'); //右边的半圆
    var pieLeft = $('.pieLeft'); //左边的半圆
    var h1 = $('.pie h1'); //百分比数字
    var deg = 60; //旋转角度
    var time = 3000; //旋转时间 毫秒
    var sec = time / deg; //速度值
    var i = 0; //临时变量 用来存储百分比数字

    //角度小于一半 则 时间减半
    if (deg < 50) {
        time = (time / 2);
        sec = time / deg;
    }

    //turn代表圈   1 turn 就是一圈
    $('.pies').css({
        'transition': 'transform ' + time + 'ms linear',
        'transform': 'rotate(.' + deg + 'turn)'
    });

    //百分比效果定时器
    var times = setInterval(function() {

        //递增百分比数字 并赋值
        i++;
        h1.html(i + '%');

        //核心思路:
        //角度超过一半时 将右边的半圆层级+1 并隐藏左边的半圆
        //有个bug 速度过快或过慢时会有闪动出现(目前还没有解决思路)
        if (deg > 50 && i == 50) {
            pieRight.addClass('up');
            pieLeft.addClass('hide');
        }

        //达到目标角度 清除定时器
        if (i >= deg) {
            clearInterval(times);
        }

    },
    sec);

})()

查看实例:饼图动画实例
下载源码:下载源码

移动端rem应用实例分析

rem只需要改变根元素的字体大小就可以根据屏幕的宽度等比例改变页面元素大小而不会出现模糊

因为js是在页面加载完成后才执行,所以会有一些页面动态变化
因此可以结合媒体查询来做适配:
例如:

@media only screen and (max-width: 320px){html{font-size: 9px;} }
@media only screen and (min-width: 320px) and (max-width: 352px){html{font-size: 10px;} }
@media only screen and (min-width: 352px) and (max-width: 384px){html{font-size: 11px;} }
@media only screen and (min-width: 384px) and (max-width: 416px){html{font-size: 12px;} }
@media only screen and (min-width: 416px) and (max-width: 448px){html{font-size: 13px;} }
@media only screen and (min-width: 448px) and (max-width: 480px){html{font-size: 14px;} }
@media only screen and (min-width: 480px) and (max-width: 512px){html{font-size: 15px;} }
@media only screen and (min-width: 512px) and (max-width: 544px){html{font-size: 16px;} }
@media only screen and (min-width: 544px) and (max-width: 576px){html{font-size: 17px;} }
@media only screen and (min-width: 576px) and (max-width: 608px){html{font-size: 18px;} }
@media only screen and (min-width: 608px) and (max-width: 640px){html{font-size: 19px;} }
@media only screen and (min-width: 640px){html{font-size: 20px;} }

来看js代码:

//第一种 rem计算方法
;(function (doc, win) {
  var docEl = doc.documentElement,
    // orientationchange 是手机屏幕翻转方向事件
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function() {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;

      //核心计算方法 根元素字体大小 = 基数 * (屏幕宽度/设计图宽度)
      //基数可以自定义,(一般640的设计图对应的基数为 20) 可参考http://huaban.com/pins/491459146/
      //元素或字体的rem = 设计图上元素或字体的大小 * 根元素字体大小
      docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
    };

  if (!doc.addEventListener) return;

  //绑定屏幕翻转事件/屏幕尺寸改变事件
  win.addEventListener(resizeEvt, recalc, false);

  //初始化调用
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

//第二种:

!function(win) {
    var doc = win.document
      , el = doc.documentElement
      , design = 720
      , size = design / 100
      , evt = "orientationchange"in win ? "orientationchange" : "resize"
      , setFont = function() {
            var docWth = el.clientWidth || 320;
            docWth > 720 && (docWth = 720),
            el.style.fontSize = docWth / size + "px"
        };
   
    doc.addEventListener && (win.addEventListener(evt, setFont, !1),
    doc.addEventListener("DOMContentLoaded", setFont, !1))
}(window);

另外一种是:大神分享的升级版 rem计算方法

//另外一种是:大神分享的升级版 rem计算方法
!function (doc, win) {
    var docWidth = 750;// 设计图文档宽度

    // css值为:设计图尺寸/100  例:100px => 1rem;
    var docEl = doc.documentElement,

    // orientationchange 是手机屏幕翻转方向事件
        resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize';
    var recalc = (function refreshRem() {

        //getBoundingClientRect用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置
        var clientWidth = docEl.getBoundingClientRect().width;

        // 8.533333为iPhone4[最小宽为iPhone4尺寸]
        // *5为了方便计算 => 设计图px值除以100得出rem值
        docEl.style.fontSize = Math.max(Math.min(20 * (clientWidth / docWidth), 11), 8.5) * 5 + 'px';
        return refreshRem;
    })();
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);

    // 解决:active这个高端洋气的CSS伪类不能使用问题 特别注意:有可能跟FastClick冲突
    doc.addEventListener('touchstart', function () {}, false);
}(document, window);

还有一种简便写法,dpr > 1 会缩放页面,可能会有偏差

var dpr = 1 / window.devicePixelRatio;
var docEl = document.documentElement;
document.write('<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale='+dpr+',minimum-scale='+dpr+',maximum-scale='+dpr+'" />')
var fz = docEl.clientWidth / 10;
docEl.style.fontSize = fz + 'px';

简便的写法二

var html = document.getElementsByTagName("html")[0];
var rootResize = function() {
    var winClient = document.documentElement.clientWidth;
    var fontSize = winClient < 640 ? winClient / 16 : 40;
    if (fontSize < 20) {
        fontSize = 20;
    }
    html.style.fontSize = fontSize + "px";
}
rootResize();
window.onresize = function() {
    rootResize();
}

参考的文章:web app变革之rem
查看demo:rem应用实例
下载源码:下载源码

一行/多行文字超出用省略号代替(总是忘记)

以下样式必须同时使用!

   overflow:hidden;//内容溢出隐藏
   white-space:nowrap;//强制在同一行内显示所有文本,合并文本间的多余空白,直到文本结束或者遭遇br对象
   text-overflow:ellipsis;//文本溢出时用省略号代替

多行文字超出省略号代替:

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;//要显示的行数
    -webkit-box-orient: vertical;

参阅:CSS单行、多行文本溢出显示省略号(……)

自调用匿名函数的几种写法

先来看看下面这行代码
function(){alert(1)}() //报错

//解释器判定:以function开头的语句 是函数声明语句
//函数声明是不能立即执行的,需要转成函数对象
//只需要在function前面加上其他字符 解释器就不会判定为函数声明了

下面是常用的一些写法

(function(){})()

;(function(){})()//压缩代码之后前面的代码漏写分号可能会导致语法错误

!function(){}()

~function(){}();

+function(){}();

-function(){}();

void function(){}();

参考知乎:(function(){…})(); 与 (function(){…}()); 这两种写法在意义上有什么区别?