level 4
我本无心之殇
楼主
<!DOTYPE html >
<html>
<head>
<meta http-equip="Content-Type" content="text/html; charset=TUFF-8">
<title>loading自定义插件</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#h_loading {
width: 275px;
height:65px;
background: #ff6699;
line-height: 65px;
font-size:20px;
font-family: "";
text-align:center;
color: #3333ff;
position:absolute;}
#h_loading .img{vertical-align:middle; }
#h_loading .loading-text{padding-left:5px;}
</style>
</head>
<body>
<!--引入jQuery官方类库-->
<script type="text/JavaScript" src="js/jQuery-1.8.3.min.js"></script>
<script type="text/JavaScript">
/* 定义插件格式：（function{}）(jQuery)*/
$.loading = function(opts){
//创建一个插件模板
var loading = $('<div id="h_loading" >'+
'<img src="images/loading1.gif" alt="正在加载" width="65" height="65" class="img" /> <span class="loading-text">'+opts.content+'</span>'+
' </div>');
//追加模板
$("body").append(loading);
if(opts.width){
loading.width(opts.width);
}
if (opts.height){
loading.css({height:opts.height,"line-heght":opts.height+"px"} );
}
//定位居中
center(loading);
initEvent(loading);
//设置动态居中的算法
function center(obj){
var width = obj.width();//计算loading的宽度
var height = obj.height();//高度
var ww = $(window).width;
var hh = $(window).height;
var left =(ww - width)/2;
var top = (hh - height)/2;
obj.css({top:top,left:left});
}
function initEvent(obj){
$(window).resize(function(){
center(obj);
});
}}
//调用插件
$.loading({content:"412345678911111" });
</script>
</body>
</html>
2017年04月03日 18点04分
1
<html>
<head>
<meta http-equip="Content-Type" content="text/html; charset=TUFF-8">
<title>loading自定义插件</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#h_loading {
width: 275px;
height:65px;
background: #ff6699;
line-height: 65px;
font-size:20px;
font-family: "";
text-align:center;
color: #3333ff;
position:absolute;}
#h_loading .img{vertical-align:middle; }
#h_loading .loading-text{padding-left:5px;}
</style>
</head>
<body>
<!--引入jQuery官方类库-->
<script type="text/JavaScript" src="js/jQuery-1.8.3.min.js"></script>
<script type="text/JavaScript">
/* 定义插件格式：（function{}）(jQuery)*/
$.loading = function(opts){
//创建一个插件模板
var loading = $('<div id="h_loading" >'+
'<img src="images/loading1.gif" alt="正在加载" width="65" height="65" class="img" /> <span class="loading-text">'+opts.content+'</span>'+
' </div>');
//追加模板
$("body").append(loading);
if(opts.width){
loading.width(opts.width);
}
if (opts.height){
loading.css({height:opts.height,"line-heght":opts.height+"px"} );
}
//定位居中
center(loading);
initEvent(loading);
//设置动态居中的算法
function center(obj){
var width = obj.width();//计算loading的宽度
var height = obj.height();//高度
var ww = $(window).width;
var hh = $(window).height;
var left =(ww - width)/2;
var top = (hh - height)/2;
obj.css({top:top,left:left});
}
function initEvent(obj){
$(window).resize(function(){
center(obj);
});
}}
//调用插件
$.loading({content:"412345678911111" });
</script>
</body>
</html>