master

分支 (2)

管理

管理

master

dev_test

web-test
/
loading纯css和js实现.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/***loading***/
			.loading-box {
				position: absolute;
				text-align: center;
			}

			.loading-box .loading-message {
				height: 30px;
				line-height: 30px;
				color: #999999;
			}

			.sideslip {
				background-color: #f9f9f9;
				font-size: 12px;
				color: #666666;
				position: relative;
			}

			.scroll-box {
				margin: 1px auto 0px auto;
			}
		</style>
		<script src="js/jquery-1.7.2.min.js"></script>
	</head>
	<body>
	</body>
</html>
<script>
	(function($, undefined) {
		$.widget('ui.loading', {
			options: {
				loadingStyle: {
					backgroundColor: '#F3F3F3'
				},
				message: '任务加载中'
			},
			_create: function() {
				this.html =
					'<div class="loading"><div class="loading-box"><div class="loading-img"><img src="/Images/282.GIF" width="32" height="32"  alt=""/></div><div class="loading-message"></div></div></div>';

			},
			show: function() {
				var wrapW = this.element.innerWidth(),
					wrapH = this.element.innerHeight();
				this.loadingHtml = $(this.html).appendTo(this.element).css(this.options.loadingStyle).css({
					width: wrapW,
					height: wrapH,
					position: 'absolute',
					top: 0,
					left: 0
				});
				this.loadingHtml.find('.loading-box').position({
					my: 'center center',
					at: 'center center-10%',
					of: this.loadingHtml
				});
				this.loadingHtml.find('.loading-message').text(this.options.message);

			},
			hide: function() {
				if (this.loadingHtml != undefined) {
					this.loadingHtml.remove();
				}
			}
		});
	})(jQuery)
	 $('.sideslip').loading();
</script>