• 黑帽SEO小技巧:首页关键词劫持修改
  • 页面过度,loading效果
  • 不会过时的黑帽SEO思路
  • 关于淘宝客采集到dedecms的一些思路
  • dedecms系统自定义变量删除方法
  • 页面过度,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中。

    博主简介

    小强哥Adolph

    我有一个梦想,且一直在为它努力!

    1990年人士,8年互联网经验。

    商业服务

    (1)黑白帽SEO高端外包服务

    (2)黑白帽SEO高端顾问

    (3)中大型程序开发

    (4)中大型数据库优化与开发

    (5)高端培训(技术 & 思维 & 关门弟子)

    (6)指定网站入侵扫描 & 安全检测

    (7)指定服务器入侵扫描 & 安全检测

    (8)黑灰色项目承接 & 合作 & 顾问

    (9)开源CMS二次开发与BUG修复

    (10)开源CMS模版设计开发与仿站

    (11)小 & 中 & 大型网站从零开发

    (12)品牌解决方案

    (13)销量解决方案

    (14)顾问与培训解决方案

    联系方式

    QQ:2161484381 & 1307935636

    微信:zjkszq1990 & zZ683135

    E-mail:adolph@timeandevent.com

    微博推荐

      今天这小饭馆,大厨不在,她的姐姐在,我来了说,小伙子,吃什么呀,我只会炒米饭和煮面条[捂脸][捂脸][捂脸],我以为逗我呢,结果一看其他人,吃的不是炒米饭就是煮面条。。。

      2018-11-09 18:28:23

      1

      睡觉了。。。晚安。

      2018-10-12 00:53:08

      推荐首歌曲,Despacito,不错。。。点我去听听

      2018-10-11 11:52:51

      哈哈哈,小仙女IMG_20180911_154710

      2018-09-14 03:48:22

      这个天气...没有秋天啊...

      这个天气...没有秋天啊...

      2018-09-09 03:01:30

      I'm learning English.

      2018-08-27 20:26:11

      1

      I am Groot!

      2018-08-23 09:30:28

      伏特加这味道,和他妈纯酒精似的,白酒都算不上...总看美剧说来一杯伏特加,买了一瓶,尝一尝,真是...

      1

      2018-07-19 02:48:54

      1

      竟然,再给同学们上课...

      2018-07-03 16:58:20

      这几天,累死了,给某府做的项目,终于做完了,算一算,用到了java、C++、PHP、MY SQL、JS、HTML、CSS。。。我艹。。。。。。。。。。。。。哦对,还有一个小软件,用的E。。。

      2018-06-14 02:23:48

      最近在做这个项目。。。简直无语。。。安卓端,用到了JAVA。。。补习了好久。PC端,用到了My SQL、PHP、C++。。。哇,,一个小小的项目(没几个钱),用到了4中逻辑语言。。。还有一点没做完,加油,今天还做不完,下午早早的去找朋友协助解决。。。

      2018-06-13 05:22:51

      wx_camera_1527924958357

      周六,有点累,就自己出来看电影,嗯,我包场了。。。

      2018-06-02 15:37:54

      因为,自己有好多项目,要亲自手写页面,每次都重写css,准备看下Bootstrap,有太繁琐,索性,每天抽点时间,写个自己想css框架。

      2018-05-26 17:33:53

      同样的经历,已经经历过一次,现在想起来还是那么的不可描述。

      2018-05-22 01:36:24