JS 遮罩 Mask

一、介绍

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

二、使用

 1 var opts = {
 2            lines: 7, // The number of lines to draw
 3           length: 14, // The length of each line
 4           width: 2, // The line thickness
 5           radius: 0, // The radius of the inner circle
 6           corners: 1, // Corner roundness (0..1)
 7           rotate: 90, // The rotation offset
 8           color: '#000', // #rgb or #rrggbb
 9           speed: 2.2, // Rounds per second
10           trail: 100, // Afterglow percentage
11           shadow: false, // Whether to render a shadow
12           hwaccel: false, // Whether to use hardware acceleration
13           className: 'spinner', // The CSS class to assign to the spinner
14           zIndex: 2e9, // The z-index (defaults to 2000000000)
15           top: 'auto', // Top position relative to parent in px
16           left: 'auto' // Left position relative to parent in px
17     };
18     var target = document.createElement('div');
19     target.id="wait";
20 //设置弹出层位置
21     target.style.top=(document.documentElement.clientHeight/2)-70+"px";
22     target.style.left=(document.documentElement.clientWidth/2)-300+"px";
23 
24     if(!!window.attachEvent)//ie浏览器下。
25     {
26         window.attachEvent('onScroll',showInCenter);
27     }
28     else if(!!window.addEventListener)//非ie浏览器下
29     {
30         window.addEventListener("scroll",showInCenter);
31     }
32     target.innerHTML="<div>Please wait...</div>";
33     document.body.appendChild(target);
34     if(typeof(Spinner)=="function"){
35         var spinner = new Spinner(opts).spin(target);
36     }

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

三、扩展

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

posted on 2012-10-31 21:34 NeverGiveUp_ZONE 阅读(1350) 评论(0) 编辑收藏举报