主页 > 技术领域 >

页面过度,loading效果

2018-04-15 14:00

今天有点时间,给移动端,加了loading效果,基于jQuery,这里来记录下,蛮简单的,兼容PC端、移动端。

首先,在要按照顺序引用两个外部的JS文件,分别是jQuery.js与loading.js,如下:

<script src="jquery-1.11.0.min.js"></script>
<script src="loading.js"></script>

然后再需要加loading的页面,引用触发js,如下:

<script>
	function loading1() {
		$('body').loading({
			loadingWidth:240,
			title:'请稍等!',
			name:'test',
			discription:'描述描述描述描述',
			direction:'column',
			type:'origin',
			// originBg:'#71EA71',
			originDivWidth:40,
			originDivHeight:40,
			originWidth:6,
			originHeight:6,
			smallLoading:false,
			loadingMaskBg:'rgba(0,0,0,0.2)'
		});

		setTimeout(function(){
			removeLoading('test');
		},3000);
	}

	function loading2() {
		$('body').loading({
			loadingWidth:240,
			title:'',
			name:'test',
			discription:'描述描述描述描述',
			direction:'column',
			type:'origin',
			// originBg:'#71EA71',
			originDivWidth:40,
			originDivHeight:40,
			originWidth:6,
			originHeight:6,
			smallLoading:false,
			loadingMaskBg:'rgba(0,0,0,0.2)'
		});

		setTimeout(function(){
			removeLoading('test');
		},3000);
	}

	function loading3() {
		$('body').loading({
			loadingWidth:120,
			title:'',
			name:'test',
			discription:'',
			direction:'column',
			type:'origin',
			// originBg:'#71EA71',
			originDivWidth:40,
			originDivHeight:40,
			originWidth:6,
			originHeight:6,
			smallLoading:false,
			loadingMaskBg:'rgba(0,0,0,0.2)'
		});

		setTimeout(function(){
			removeLoading('test');
		},3000);
	}

	function loading4() {
		$('body').loading({
			loadingWidth:240,
			title:'请稍等!',
			name:'test',
			discription:'这是一个描述...',
			direction:'column',
			type:'origin',
			originBg:'#71EA71',
			originDivWidth:40,
			originDivHeight:40,
			originWidth:6,
			originHeight:6,
			smallLoading:false,
			loadingBg:'#389A81',
			loadingMaskBg:'rgba(123,122,222,0.2)'
		});

		setTimeout(function(){
			removeLoading('test');
		},3000);
	}

	function loading5() {
		$('body').loading({
			loadingWidth:240,
			title:'请稍等!',
			name:'test',
			discription:'这是一个描述...',
			direction:'column',
			type:'pic',
			originBg:'#71EA71',
			originDivWidth:60,
			originDivHeight:60,
			originWidth:6,
			originHeight:6,
			smallLoading:false,
			loadingBg:'#389A81',
			loadingMaskBg:'rgba(123,122,222,0.2)'
		});

		setTimeout(function(){
			removeLoading('test');
		},3000);
	}

	function loading6() {
		$('body').loading({
			loadingWidth:240,
			title:'请稍等!',
			name:'test',
			discription:'这是一个描述...',
			direction:'row',
			type:'pic',
			originBg:'#71EA71',
			originDivWidth:60,
			originDivHeight:60,
			originWidth:6,
			originHeight:6,
			smallLoading:false,
			loadingBg:'rgba(20,125,148,0.8)',
			loadingMaskBg:'rgba(123,122,222,0.2)'
		});

		setTimeout(function(){
			removeLoading('test');
		},3000);
	}

	function loading7() {
		$('body').loading({
			loadingWidth:240,
			title:'请稍等!',
			name:'test',
			discription:'这是一个描述...',
			direction:'row',
			type:'origin',
			originBg:'#71EA71',
			originDivWidth:30,
			originDivHeight:30,
			originWidth:4,
			originHeight:4,
			smallLoading:false,
			titleColor:'#388E7A',
			loadingBg:'#312923',
			loadingMaskBg:'rgba(22,22,22,0.2)'
		});

		setTimeout(function(){
			removeLoading('test');
		},3000);
	}

	function loading8(){
		$('body').loading({
			loadingWidth:220,
			title:'提示',
			name:'test',
			titleColor:'#fff',
			discColor:'#EDEEE9',
			discription:'颜色搭配,我不太懂',
			direction:'column',
			type:'origin',
			originBg:'#ECCFBB',
			originDivWidth:40,
			originDivHeight:40,
			originWidth:6,
			originHeight:6,
			smallLoading:false,
			loadingBg:'rgba(56,43,14,0.8)',
			loadingMaskBg:'rgba(66,66,66,0.2)'
		});

		setTimeout(function(){
			removeLoading('test');
		},3000);
	}

	function loading10(){
		$('body').loading({
			loadingWidth:240,
			title:'请稍等!',
			name:'test',
			animateIn:'none',
			discription:'这是一个描述...',
			direction:'row',
			type:'origin',
			mustRelative:true,
			originBg:'#71EA71',
			originDivWidth:30,
			originDivHeight:30,
			originWidth:4,
			originHeight:4,
			smallLoading:false,
			titleColor:'#388E7A',
			loadingBg:'#312923',
			loadingMaskBg:'rgba(22,22,22,0.2)'
		});

		setTimeout(function(){
			removeLoading('test');
		},3000);
	}
</script>

之后,我们只需要在需要在触发loading的标签上,加入onClick="loading1()"即可,其中,效果有9中效果,分别是loading1()、loading2()、loading3()、loading4()、loading5()、loading6()、loading7()、loading8()、loading10(),具体的效果,查看如下地址:

完整dome:http://www.timeandevent.com/shiyan/003

dome下载:http://www.timeandevent.com/shiyan/003/dome.zip

值得说的是,引用文件的位置,需要注意,不要改变,按照“jQuery.js → loading.js → 触发js”这样,可以加到body中,也可以加到head中。

小强博客

小强博客

1990年人士,8年互联网经验。
商业服务
  • (1)黑白帽SEO高端外包服务
  • (2)黑白帽SEO高端顾问
  • (3)中大型程序开发
  • (4)中大型数据库优化与开发
  • (5)高端培训(技术 & 思维)
  • (6)指定网站入侵扫描 & 安全检测
  • (7)指定服务器入侵扫描 & 安全检测
  • (8)黑灰色项目承接 & 合作 & 顾问
  • (9)开源CMS二次开发与BUG修复
  • (10)开源CMS模版设计开发与仿站
  • (11)小 & 中 & 大型网站从零开发
  • (12)品牌解决方案
  • (13)销量解决方案
  • (14)顾问与培训解决方案
  • 联系方式
  • QQ:97028048
  • 微信:zjkszq1990 & zZ683135
  • E-mail:adolph@timeandevent.com