https://www.lilidong.cn/js/mobile.js

1define([], function(){
2	var _isShow = false;
3	var $tag, $aboutme, $friends;
4
5	var ctn,radio,scaleW,idx,basicwrap;
6
7	//第一步 -- 初始化
8	var reset = function() {
9		//设定窗口比率
10		radio = document.body.scrollHeight/document.body.scrollWidth;
11		//设定一页的宽度
12		scaleW = document.body.scrollWidth;
13		//设定初始的索引值
14		idx = 0;
15	};
16	//第一步 -- 组合
17	var combine = function(){
18		if($tag){
19			document.getElementById("js-mobile-tagcloud").innerHTML = $tag.innerHTML;
20		}
21		if($aboutme){
22			document.getElementById("js-mobile-aboutme").innerHTML = $aboutme.innerHTML;
23		}
24		if($friends){
25			document.getElementById("js-mobile-friends").innerHTML = $friends.innerHTML;
26		}
27	}
28	//第三步 -- 根据数据渲染DOM
29	var renderDOM = function(){
30		//生成节点
31		var $viewer = document.createElement("div");
32		$viewer.id = "viewer";
33		$viewer.className = "hide";
34		$tag = document.getElementById("js-tagcloud");
35		$aboutme = document.getElementById("js-aboutme");
36		$friends = document.getElementById("js-friends");
37		var tagStr = $tag?'<span class="viewer-title">标签</span><div class="viewer-div tagcloud" id="js-mobile-tagcloud"></div>':"";
38		var friendsStr = $friends?'<span class="viewer-title">友情链接</span><div class="viewer-div friends" id="js-mobile-friends"></div>':"";
39		var aboutmeStr = $aboutme?'<span class="viewer-title">关于我</span><div class="viewer-div aboutme" id="js-mobile-aboutme"></div>':"";
40
41		$viewer.innerHTML = '<div id="viewer-box">\
42		<div class="viewer-box-l">\
43			<div class="viewer-box-wrap">'+aboutmeStr+friendsStr+tagStr+'</div>\
44		</div>\
45		<div class="viewer-box-r"></div>\
46		</div>';
47
48		//主要图片节点
49		document.getElementsByTagName("body")[0].appendChild($viewer);
50		var wrap = document.getElementById("viewer-box");
51		basicwrap = wrap;
52		wrap.style.height = document.body.scrollHeight + 'px';
53	};
54
55	var show = function(target, idx){
56		document.getElementById("viewer").className = "";
57		setTimeout(function(){
58			basicwrap.className = "anm-swipe";
59		},0);
60		_isShow = true;
61		document.ontouchstart=function(e){
62			if(e.target.tagName != "A"){
63				return false;
64			}
65		}
66	}
67
68	var hide = function(){
69		document.getElementById("viewer-box").className = "";
70		_isShow = false;
71		document.ontouchstart=function(){
72			return true;
73		}
74	}
75
76	//第四步 -- 绑定 DOM 事件
77	var bindDOM = function(){
78		var scaleW = scaleW;
79		
80		//滑动隐藏
81		document.getElementById("viewer-box").addEventListener("webkitTransitionEnd", function(){
82
83			if(_isShow == false){
84				document.getElementById("viewer").className = "hide";
85				_isShow = true;
86			}else{
87			}
88			
89		}, false);
90
91		//点击展示和隐藏
92		ctn.addEventListener("touchend", function(){
93			show();
94		}, false);
95
96		var $right = document.getElementsByClassName("viewer-box-r")[0];
97		var touchStartTime;
98		var touchEndTime;
99		$right.addEventListener("touchstart", function(){
100			touchStartTime = + new Date();
101		}, false);
102		$right.addEventListener("touchend", function(){
103			touchEndTime = + new Date();
104			if(touchEndTime - touchStartTime < 300){
105				hide();
106			}
107			touchStartTime = 0;
108			touchEndTime = 0;
109		}, false);
110
111		//滚动样式

112		var $overlay = $("#mobile-nav .overlay");
113		var $header = $(".js-mobile-header");
114		window.onscroll = function(){
115		    var scrollTop = document.documentElement.scrollTop + document.body.scrollTop;
116		    if(scrollTop >= 69){
117		    	$overlay.addClass("fixed");
118		    }else{
119		    	$overlay.removeClass("fixed");
120		    }
121		    if(scrollTop >= 160){
122		    	$header.removeClass("hide").addClass("fixed");
123		    }else{
124		    	$header.addClass("hide").removeClass("fixed");
125		    }
126		};
127		$header[0].addEventListener("touchstart", function(){
128			$('html, body').animate({scrollTop:0}, 'slow');
129		}, false);
130	};
131
132	var resetTags = function(){
133		var tags = $(".tagcloud a");
134		tags.css({"font-size": "12px"});
135		for(var i=0,len=tags.length; i<len; i++){
136			var num = tags.eq(i).html().length % 5 +1;
137			tags[i].className = "";
138			tags.eq(i).addClass("color"+num);
139		}
140	}
141
142	return{
143		init: function(){
144			//构造函数需要的参数
145			ctn = document.getElementsByClassName("slider-trigger")[0];
146			//构造四步
147			reset();
148			renderDOM();
149			combine();
150			bindDOM();
151			resetTags();
152		}
153	}
154})