JS 遮罩 Mask

一、介绍

　　Spin.js是一个用于创建过程进度提醒控件的框架，使用CSS3来渲染UI，当浏览器不支持时，采用VML支持。不需要图片，没有外部CSS，没有依赖其它框架，高度可配置，分辨率无关，兼容所有主流浏览器包括IE6

二、使用

 

var opts = {
           lines: 7, // The number of lines to draw
          length: 14, // The length of each line
          width: 2, // The line thickness
          radius: 0, // The radius of the inner circle
          corners: 1, // Corner roundness (0..1)
          rotate: 90, // The rotation offset
          color: '#000', // #rgb or #rrggbb
          speed: 2.2, // Rounds per second
          trail: 100, // Afterglow percentage
          shadow: false, // Whether to render a shadow
          hwaccel: false, // Whether to use hardware acceleration
          className: 'spinner', // The CSS class to assign to the spinner
          zIndex: 2e9, // The z-index (defaults to 2000000000)
          top: 'auto', // Top position relative to parent in px
          left: 'auto' // Left position relative to parent in px
    };
    var target = document.createElement('div');
    target.id="wait";
//设置弹出层位置
    target.style.top=(document.documentElement.clientHeight/2)-70+"px";
    target.style.left=(document.documentElement.clientWidth/2)-300+"px";

    if(!!window.attachEvent)//ie浏览器下。
    {
        window.attachEvent('onScroll',showInCenter);
    }
    else if(!!window.addEventListener)//非ie浏览器下
    {
        window.addEventListener("scroll",showInCenter);
    }
    target.innerHTML="<div>Please wait...</div>";
    document.body.appendChild(target);
    if(typeof(Spinner)=="function"){
        var spinner = new Spinner(opts).spin(target);
    }

 

 文档地址    http://fgnass.github.com/spin.js/

 

三、扩展

　　http://www.open-lib.com/Type/204-1.jsp