` element will link to the contributor’s GitHub Profile. For example: In 2007, Chris Wanstrath (@defunkt), PJ Hyett (@pjhyett), and Tom Preston-Werner (@mojombo) founded GitHub.\r\n\r\n### Support or Contact\r\nHaving trouble with Pages? Check out our [documentation](https://help.github.com/pages) or [contact support](https://github.com/contact) and we’ll help you sort it out.\r\n",
5 | "note": "Don't delete this file! It's used internally to help with page regeneration."
6 | }
--------------------------------------------------------------------------------
/demo/11/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
65 |
66 |
67 | 务必在移动端下查看，谷歌可用手机模式
68 |
72 |
73 |
74 |
75 |
--------------------------------------------------------------------------------
/demo/quene/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | 队列
9 |
10 |
11 |
12 | class Quene {
13 | constructor() {
14 | this.data = [];
15 | this.front = 0;
16 | this.rear = 0;
17 | }
18 | push(elm) {
19 | this.data[this.rear] = elm;
20 | this.rear++;
21 | }
22 | pop() {
23 | if(this.isEmpty()) {
24 | return console.error('队列已经为空了，这次操作为下溢');
25 | }
26 | return this.data[this.front++];
27 | }
28 | size() {
29 | return this.rear - this.front;
30 | }
31 | isEmpty() {
32 | return this.front === this.rear;
33 | }
34 | clear() {
35 | this.front = this.rear = 0;
36 | }
37 | }
38 |
39 | var q = new Quene();
40 | q.push(1);
41 | q.push(2);
42 | q.size(); // 2
43 | q.pop();
44 | q.pop();
45 | q.isEmpty(); // true
46 | q.pop();// error
47 | q.push(1);
48 | q.push(2);
49 | q.clear();
50 | console.log(q.isEmpty()); // true
51 |
52 |
93 |
94 |
--------------------------------------------------------------------------------
/demo/stack/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 栈
8 |
9 |
10 |
11 | class Stack {
12 | constructor() {
13 | this.data = [];
14 | this.index = -1;
15 | }
16 |
17 | pop() { // 出栈
18 | if(this.index === -1) {
19 | return console.log('栈下溢');
20 | }
21 | return this.data[this.index--]
22 | }
23 |
24 | push(elm) { // 入栈
25 | this.index = ++this.index;
26 | this.data[this.index] = elm;
27 | }
28 |
29 | size() { // 返回length
30 | return this.index + 1;
31 | }
32 |
33 | isEmpty() { // 是否为空
34 | return this.index === -1;
35 | }
36 |
37 | clear() { // 清空
38 | this.index = -1;
39 | }
40 |
41 | }
42 |
43 | var stack = new Stack();
44 | stack.push(1); // [1]
45 | stack.push(2); // [1,2]
46 | stack.clear(); //
47 | console.log(stack.isEmpty()); // true
48 | stack.push(2);
49 | console.log(stack.isEmpty()); // false
50 | console.log(stack)
51 |
52 |
97 |
98 |
--------------------------------------------------------------------------------
/demo/9/9-1/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
24 |
25 |
26 | sdfsdfsdf
27 |
28 |
74 |
75 |
76 |
--------------------------------------------------------------------------------
/demo/10/headtitle.js:
--------------------------------------------------------------------------------
1 | //创建滑动导航构造函数
2 | function Slider(target) {
3 | this.dom = target.dom;
4 | this.lis = this.dom.getElementsByTagName("li");
5 |
6 | this.Width = this.dom.offsetWidth;
7 | console.log(this.Width);
8 | this.Click();
9 | this.move();
10 | }
11 | Slider.prototype.Click = function() {
12 | var lis = this.lis;
13 | for (var i = 0; i < lis.length; i++) {
14 |
15 | lis[i].onclick = function() {
16 | for (var j = 0; j < lis.length; j++) {
17 | lis[j].className = ' '; //循环干死li
18 | }
19 | this.className = 'nav_hover'; //当前的li
20 | }
21 | }
22 | }
23 | Slider.prototype.move = function() {
24 | var self = this;
25 | var touchStart = function(e) {
26 | self.startX = e.touches[0].pageX;
27 | self.stime = new Date() * 1;
28 | self.touchX = 0;
29 |
30 | var reg=/\-?[0-9]+/g;
31 | self.leftX = parseInt(getComputedStyle(self.dom,null).webkitTransform.match(reg)[4]);
32 | console.log(getComputedStyle(self.dom,null).webkitTransform);
33 | self.dom.style.webkitTransition = '0s'; //触摸开始时 让动画效果为0
34 |
35 | }
36 | var touchMove = function(e) {
37 | e.preventDefault();
38 | self.touchX = (e.touches[0].pageX - self.startX);
39 |
40 | self.moveX = (self.touchX + self.leftX);
41 | self.dom.style.webkitTransition = '-webkit-transform .4s ease-out';
42 | self.dom.style.webkitTransform = 'translate3d('+ self.moveX +'px,0,0)';
43 | }
44 | var touchEnd = function(e) {
45 | self.lastRight = parseInt(self.Width - window.innerWidth -5); //判断屏幕自适应ul右侧是否到头
46 | var etime = new Date() * 1;
47 | var lis = self.lis;
48 |
49 | if (self.moveX >= 15) { //判断左是否到头的弹性恢复
50 | console.log(1);
51 | self.dom.style.webkitTransition = '-webkit-transform .5s ease';
52 | self.dom.style.webkitTransform = 'translate3d(0,0,0)';
53 |
54 | }else if(self.moveX <= -self.lastRight){ //判断右是否到头的弹性恢复
55 | self.dom.style.webkitTransition = '-webkit-transform .5s ease';
56 | self.dom.style.webkitTransform = 'translate3d('+ -self.lastRight +'px,0,0)';
57 | }
58 | }
59 | this.dom.addEventListener('touchstart',touchStart);
60 | this.dom.addEventListener('touchmove',touchMove);
61 | this.dom.addEventListener('touchend',touchEnd);
62 | }
63 | //滑动导航方法结束
64 |
--------------------------------------------------------------------------------
/demo/loadImg/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 预加载图片
8 |
9 |
10 |
11 |
12 | 预加载图片，可以作用于需要图多的H5，然后做loading，也能拓展下做加载的进度
13 | 打开控制台查看
14 |
15 |
16 | function loadImg() {
17 | const loadPromiseArr = imgArr.map((url) => {
18 | return new Promise((resolve) => {
19 | const img = new Image();
20 | img.src = url;
21 | img.onload = function imgOnLoad() {
22 | resolve(url);
23 | };
24 | img.onerror = function imgOnError() {
25 | // 可以返回一个友好的占位图链接
26 | resolve('load fail');
27 | }
28 | })
29 | });
30 | Promise.all(loadPromiseArr)
31 | .then((arr) => {
32 | console.log(arr);
33 | // TODO 最图片返回的链接进行而外操作
34 | })
35 | }
36 |
37 |
76 |
77 |
--------------------------------------------------------------------------------
/readme.MD:
--------------------------------------------------------------------------------
1 | ### 我的前端 demo 库
2 |
3 | - [x] 32.[长文件名中间截取](http://meckodo.github.io/myDemo/demo/Text-overflow/index.html)
4 | - [x] 31.[预加载图片](http://meckodo.github.io/myDemo/demo/loadImg/index.html)
5 | - [x] 30.[函数节流和防抖](http://meckodo.github.io/myDemo/demo/BandT/index.html)
6 | - [x] 29.[冒泡排序](http://meckodo.github.io/myDemo/demo/BubbleSort/index.html)
7 | - [x] 28.[快排](http://meckodo.github.io/myDemo/demo/QuickSort/index.html)
8 | - [x] 27.[小学生打字游戏](http://meckodo.github.io/myDemo/demo/typer/index.html)
9 | - [x] 26.[3D 立方体](http://meckodo.github.io/myDemo/demo/3Dcube/index.html)
10 | - [x] 25.[队列](http://meckodo.github.io/myDemo/demo/quene/index.html)
11 | - [x] 24.[栈](http://meckodo.github.io/myDemo/demo/stack/index.html)
12 | - [x] 23.[DeepClone](http://meckodo.github.io/myDemo/demo/deepcopy/index.html)
13 | - [x] 22.[实现后缀表达式算法](http://meckodo.github.io/myDemo/demo/rpn/index.html)
14 | - [x] 21.[微信面试题 LazyMan](http://meckodo.github.io/myDemo/demo/lazyman/index.html)
15 | - [x] 20.[熊猫书院官网](https://www.pandateacher.com/)
16 | - [x] 19.[移动端日历组件](http://meckodo.github.io/myDemo/demo/17/index.html)
17 | - [x] 18.[某种轮播样式](http://meckodo.github.io/myDemo/demo/18/index.html)
18 | - [x] 17.[弹窗组件](http://meckodo.github.io/myDemo/demo/14/index.html)
19 | - [x] 16.[SVG 圆环动效](http://meckodo.github.io/myDemo/demo/16/index.html)
20 | - [x] 15.[forchange 官网](http://www.forchange.cn/)
21 | - [x] 14.[倒计时小项目(移动端)](http://meckodo.github.io/myDemo/demo/timeout/index.html)
22 | - [x] 13.[气泡墙](http://meckodo.github.io/myDemo/demo/13/index.html)
23 | - [x] 12.[纯 CSS 三级菜单](http://meckodo.github.io/myDemo/demo/12/index.html)
24 | - [x] 11.[ios 滑动解锁文字效果](http://meckodo.github.io/myDemo/demo/11/index.html)
25 | - [x] 10.[移动端弹性导航](http://meckodo.github.io/myDemo/demo/10/index.html)
26 | - [x] 9.[拖拽(1-4)](http://meckodo.github.io/myDemo/)
27 | - [x] 8.[获取手机验证码](http://meckodo.github.io/myDemo/demo/8/index.html)
28 | - [x] 7.[SVG 描边动画](http://meckodo.github.io/myDemo/demo/7/index.html)
29 | - [x] 6.[倒计时](http://meckodo.github.io/myDemo/demo/6/index.html)
30 | - [x] 5.[HTML5 图片上传预览](http://meckodo.github.io/myDemo/demo/5/index.html)
31 | - [x] 4.[动态添加文本并带有事件](http://meckodo.github.io/myDemo/demo/4/index.html)
32 | - [x] 3.[仿淘宝移动响应式](http://meckodo.github.io/myDemo/demo/3/index.html)
33 | - [x] 2.[仿淘宝移动端轮播](http://meckodo.github.io/myDemo/demo/2/m-taobao.html)
34 | - [x] 1.[两组图片切换](http://meckodo.github.io/myDemo/demo/1/banner-demo.html)
35 |
36 | [Demo 链接地址!](http://meckodo.github.io/myDemo/)
37 |
--------------------------------------------------------------------------------
/demo/2/m-taobao.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
39 |
40 |
41 |
49 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
--------------------------------------------------------------------------------
/demo/Text-overflow/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 中间字符截断
8 |
48 |
49 |
50 | 方案一
51 |
52 | 字符中间截断：
53 |
54 |
59 |
60 | 方案二
61 |
62 |
This is the big name of my file.txt
63 |
2020年6月30号还有
53 |
54 |
55 |
56 |
57 |
84 |
85 |
86 |
--------------------------------------------------------------------------------
/demo/deepcopy/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 深拷贝
8 |
9 |
10 |
11 | const isObject = obj => Object.prototype.toString(obj) === '[object Object]';
12 | const isArray = array => Array.isArray(array);
13 |
14 | let human = {
15 | name: 'kodo',
16 | age: 18,
17 | work1: ['web', 'student'],
18 | hobby: {
19 | game: ['sc2', 'dota2']
20 | }
21 | };
22 | function deepClone(target) {
23 |
24 | if (target === null || typeof target !== "object") {
25 | return target;
26 | }
27 |
28 | let newTarget = isArray(target) ? [] : {};
29 |
30 | for ( let key in target ) {
31 | if (target.hasOwnProperty(key)) {
32 | let value = target[key];
33 |
34 | if (value === target) {
35 | continue;
36 | }
37 |
38 | if (isObject(value) || isArray(value)) {
39 | newTarget[key] = deepClone(value)
40 | } else {
41 | newTarget[key] = value;
42 | }
43 | }
44 | }
45 |
46 | return newTarget;
47 | }
48 |
49 |
50 | var a = deepClone(human);
51 | // console.log(a);
52 | a.name = 'sc222';
53 | console.log(human, '---human---');
54 | console.log(a, '---a---');
55 |
56 |
106 |
107 |
--------------------------------------------------------------------------------
/demo/typer/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 打字游戏
6 |
7 |
39 |
40 |
41 |
42 | 请根据提示按键
43 |
44 |
45 |
46 |
47 |
111 |
112 |
113 |
--------------------------------------------------------------------------------
/demo/lazyman/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | test
8 |
9 |
10 |
11 |
12 | function Lazyman(name) {
13 | console.log('HI! this is ' + name);
14 | this.task = [];
15 |
16 | setTimeout(function() {
17 | var fn = this.task.shift();
18 | fn()
19 | }.bind(this))
20 | }
21 | Lazyman.prototype = {
22 | constructor : Lazyman,
23 | next() {
24 | var fn = this.task.shift();
25 | fn && fn();
26 | },
27 | eat(food) {
28 | var self = this;
29 | var fn = function eat() {
30 | console.log('eat ' + food);
31 | self.next();
32 | };
33 | this.task.push(fn);
34 | return this;
35 | },
36 | sleep(second) {
37 | var self = this;
38 | var fn = function sleep() {
39 | console.log("Wake up after " + second + "s!");
40 | setTimeout(function() {
41 | self.next();
42 | },second * 1000);
43 | };
44 | this.task.push(fn);
45 | return this;
46 | },
47 | sleepFirst(second) {
48 | var self = this;
49 | var fn = function sleepFirst() {
50 | console.log("sleepFirst Wake up after " + second + "s!");
51 | setTimeout(function () {
52 | self.next();
53 | },second * 1000);
54 | };
55 | this.task.unshift(fn);
56 | return this;
57 | }
58 | };
59 |
60 | new Lazyman('kodo').sleep(3).eat('b').sleepFirst(2).sleep(4).eat('c');
61 |
62 | 打开控制台查看
63 |
64 |
61 |
62 | -
63 | 1
64 |
65 | - 1-1
66 |
67 | - 1-1-1
68 | - 1-1-2
69 | - 1-1-3
70 |
71 |
72 | -
73 | 1-2
74 |
75 | - 1-2-1
76 | - 1-2-2
77 | - 1-2-3
78 |
79 |
80 | -
81 | 1-3
82 |
83 | - 1-3-1
84 | - 1-3-2
85 | - 1-3-3
86 |
87 |
88 |
89 |
90 | -
91 | 2
92 |
93 | -
94 | 2-1
95 |
96 | - 2-1-1
97 | - 2-1-2
98 | - 2-1-3
99 |
100 |
101 | -
102 | 2-2
103 |
104 | - 2-2-1
105 | - 2-2-2
106 | - 2-2-3
107 |
108 |
109 | -
110 | 2-3
111 |
112 | - 2-3-1
113 | - 2-3-2
114 | - 2-3-3
115 |
116 |
117 |
118 |
119 | -
120 | 3
121 |
122 | -
123 | 3-1
124 |
125 | - 3-1-1
126 | - 3-1-2
127 | - 3-1-3
128 |
129 |
130 | -
131 | 3-2
132 |
133 | - 3-2-1
134 | - 3-2-2
135 | - 3-2-3
136 |
137 |
138 | -
139 | 3-3
140 |
141 | - 3-3-1
142 | - 3-3-2
143 | - 3-3-3
144 |
145 |
146 |
147 |
148 |
149 |
11 | RPN 后缀表达式转换器
12 |
13 | 可转换普通的加减乘除 （） 的算式
14 | 数字只能0-9 不得出现大于9的数 如10
15 | 你可输入类似以下的算式进行测试
16 | 1. 7+2/6-1+3*9 => 72*61-3+/9*
17 | 2. a*1+(b+C)+1-d => a1+*bc+1+d-
18 |
19 | 具体代码请查看源码
20 |
21 |
22 |
23 |
149 |
150 |
--------------------------------------------------------------------------------
/demo/1/banner-demo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
49 |
50 |
51 |
52 | 两组图片切换
53 |
54 | 把颜色换为img即可
55 |
56 |
57 |
58 | - 0
59 | - 1
60 | - 2
61 | - 3
62 |
63 |
64 |
66 |
67 | - 0
68 | - 1
69 | - 2
70 |
71 |
72 |
92 |
116 |
117 |
118 |
122 |
126 |
130 |
134 |
136 |
140 |
144 |
148 |
152 |
154 |
77 |
78 | 左
79 | 右
80 | - 1
81 | - 2
82 | - 3
83 | - 4
84 | - 5
85 |
86 |
87 |
我的DEMO
74 |
164 |
178 |
179 |
180 |
--------------------------------------------------------------------------------
/demo/timeout/css/ifont/timeout.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
72 |
--------------------------------------------------------------------------------
/stylesheets/stylesheet.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box; }
3 |
4 | body {
5 | padding: 0;
6 | margin: 0;
7 | font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
8 | font-size: 16px;
9 | line-height: 1.5;
10 | color: #606c71; }
11 |
12 | a {
13 | color: #1e6bb8;
14 | text-decoration: none; }
15 | a:hover {
16 | text-decoration: underline; }
17 |
18 | .btn {
19 | display: inline-block;
20 | margin-bottom: 1rem;
21 | color: rgba(255, 255, 255, 0.7);
22 | background-color: rgba(255, 255, 255, 0.08);
23 | border-color: rgba(255, 255, 255, 0.2);
24 | border-style: solid;
25 | border-width: 1px;
26 | border-radius: 0.3rem;
27 | transition: color 0.2s, background-color 0.2s, border-color 0.2s; }
28 | .btn + .btn {
29 | margin-left: 1rem; }
30 |
31 | .btn:hover {
32 | color: rgba(255, 255, 255, 0.8);
33 | text-decoration: none;
34 | background-color: rgba(255, 255, 255, 0.2);
35 | border-color: rgba(255, 255, 255, 0.3); }
36 |
37 | @media screen and (min-width: 64em) {
38 | .btn {
39 | padding: 0.75rem 1rem; } }
40 |
41 | @media screen and (min-width: 42em) and (max-width: 64em) {
42 | .btn {
43 | padding: 0.6rem 0.9rem;
44 | font-size: 0.9rem; } }
45 |
46 | @media screen and (max-width: 42em) {
47 | .btn {
48 | display: block;
49 | width: 100%;
50 | padding: 0.75rem;
51 | font-size: 0.9rem; }
52 | .btn + .btn {
53 | margin-top: 1rem;
54 | margin-left: 0; } }
55 |
56 | .page-header {
57 | color: #fff;
58 | text-align: center;
59 | background-color: #159957;
60 | background-image: linear-gradient(120deg, #155799, #159957); }
61 |
62 | @media screen and (min-width: 64em) {
63 | .page-header {
64 | padding: 5rem 6rem; } }
65 |
66 | @media screen and (min-width: 42em) and (max-width: 64em) {
67 | .page-header {
68 | padding: 3rem 4rem; } }
69 |
70 | @media screen and (max-width: 42em) {
71 | .page-header {
72 | padding: 2rem 1rem; } }
73 |
74 | .project-name {
75 | margin-top: 0;
76 | margin-bottom: 0.1rem; }
77 |
78 | @media screen and (min-width: 64em) {
79 | .project-name {
80 | font-size: 3.25rem; } }
81 |
82 | @media screen and (min-width: 42em) and (max-width: 64em) {
83 | .project-name {
84 | font-size: 2.25rem; } }
85 |
86 | @media screen and (max-width: 42em) {
87 | .project-name {
88 | font-size: 1.75rem; } }
89 |
90 | .project-tagline {
91 | margin-bottom: 2rem;
92 | font-weight: normal;
93 | opacity: 0.7; }
94 |
95 | @media screen and (min-width: 64em) {
96 | .project-tagline {
97 | font-size: 1.25rem; } }
98 |
99 | @media screen and (min-width: 42em) and (max-width: 64em) {
100 | .project-tagline {
101 | font-size: 1.15rem; } }
102 |
103 | @media screen and (max-width: 42em) {
104 | .project-tagline {
105 | font-size: 1rem; } }
106 |
107 | .main-content :first-child {
108 | margin-top: 0; }
109 | .main-content img {
110 | max-width: 100%; }
111 | .main-content h1, .main-content h2, .main-content h3, .main-content h4, .main-content h5, .main-content h6 {
112 | margin-top: 2rem;
113 | margin-bottom: 1rem;
114 | font-weight: normal;
115 | color: #159957; }
116 | .main-content p {
117 | margin-bottom: 1em; }
118 | .main-content code {
119 | padding: 2px 4px;
120 | font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
121 | font-size: 0.9rem;
122 | color: #383e41;
123 | background-color: #f3f6fa;
124 | border-radius: 0.3rem; }
125 | .main-content pre {
126 | padding: 0.8rem;
127 | margin-top: 0;
128 | margin-bottom: 1rem;
129 | font: 1rem Consolas, "Liberation Mono", Menlo, Courier, monospace;
130 | color: #567482;
131 | word-wrap: normal;
132 | background-color: #f3f6fa;
133 | border: solid 1px #dce6f0;
134 | border-radius: 0.3rem; }
135 | .main-content pre > code {
136 | padding: 0;
137 | margin: 0;
138 | font-size: 0.9rem;
139 | color: #567482;
140 | word-break: normal;
141 | white-space: pre;
142 | background: transparent;
143 | border: 0; }
144 | .main-content .highlight {
145 | margin-bottom: 1rem; }
146 | .main-content .highlight pre {
147 | margin-bottom: 0;
148 | word-break: normal; }
149 | .main-content .highlight pre, .main-content pre {
150 | padding: 0.8rem;
151 | overflow: auto;
152 | font-size: 0.9rem;
153 | line-height: 1.45;
154 | border-radius: 0.3rem; }
155 | .main-content pre code, .main-content pre tt {
156 | display: inline;
157 | max-width: initial;
158 | padding: 0;
159 | margin: 0;
160 | overflow: initial;
161 | line-height: inherit;
162 | word-wrap: normal;
163 | background-color: transparent;
164 | border: 0; }
165 | .main-content pre code:before, .main-content pre code:after, .main-content pre tt:before, .main-content pre tt:after {
166 | content: normal; }
167 | .main-content ul, .main-content ol {
168 | margin-top: 0; }
169 | .main-content blockquote {
170 | padding: 0 1rem;
171 | margin-left: 0;
172 | color: #819198;
173 | border-left: 0.3rem solid #dce6f0; }
174 | .main-content blockquote > :first-child {
175 | margin-top: 0; }
176 | .main-content blockquote > :last-child {
177 | margin-bottom: 0; }
178 | .main-content table {
179 | display: block;
180 | width: 100%;
181 | overflow: auto;
182 | word-break: normal;
183 | word-break: keep-all; }
184 | .main-content table th {
185 | font-weight: bold; }
186 | .main-content table th, .main-content table td {
187 | padding: 0.5rem 1rem;
188 | border: 1px solid #e9ebec; }
189 | .main-content dl {
190 | padding: 0; }
191 | .main-content dl dt {
192 | padding: 0;
193 | margin-top: 1rem;
194 | font-size: 1rem;
195 | font-weight: bold; }
196 | .main-content dl dd {
197 | padding: 0;
198 | margin-bottom: 1rem; }
199 | .main-content hr {
200 | height: 2px;
201 | padding: 0;
202 | margin: 1rem 0;
203 | background-color: #eff0f1;
204 | border: 0; }
205 |
206 | @media screen and (min-width: 64em) {
207 | .main-content {
208 | max-width: 64rem;
209 | padding: 2rem 6rem;
210 | margin: 0 auto;
211 | font-size: 1.1rem; } }
212 |
213 | @media screen and (min-width: 42em) and (max-width: 64em) {
214 | .main-content {
215 | padding: 2rem 4rem;
216 | font-size: 1.1rem; } }
217 |
218 | @media screen and (max-width: 42em) {
219 | .main-content {
220 | padding: 2rem 1rem;
221 | font-size: 1rem; } }
222 |
223 | .site-footer {
224 | padding-top: 2rem;
225 | margin-top: 2rem;
226 | border-top: solid 1px #eff0f1; }
227 |
228 | .site-footer-owner {
229 | display: block;
230 | font-weight: bold; }
231 |
232 | .site-footer-credits {
233 | color: #819198; }
234 |
235 | @media screen and (min-width: 64em) {
236 | .site-footer {
237 | font-size: 1rem; } }
238 |
239 | @media screen and (min-width: 42em) and (max-width: 64em) {
240 | .site-footer {
241 | font-size: 1rem; } }
242 |
243 | @media screen and (max-width: 42em) {
244 | .site-footer {
245 | font-size: 0.9rem; } }
246 |
--------------------------------------------------------------------------------
/demo/13/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
157 |
158 |
159 |
160 | 以下效果只是一个小demo具体实现可看以上链接
161 |
162 |
164 |
165 |
双击后有惊喜哟!
166 |
167 |
168 |
169 |
170 |
171 |
172 |
78 | 本组件重写了window.alert();
79 |
80 | alert();为默认调用方式;
81 |
82 | alert({
83 | title : "我是title的标题",
84 | desc : "我是详细描述",
85 | btnText : "按钮文本",
86 | ok : function() {
87 | console.log('ok按钮的回调');
88 | },
89 | cancel : function() {
90 | console.log('cancel按钮的回调');
91 | }
92 | });
93 |
94 |
102 |
211 |
212 |
213 |
--------------------------------------------------------------------------------
/demo/timeout/js/toucher.js:
--------------------------------------------------------------------------------
1 | (function(global,doc,factoryFn){
2 | //初始化toucher主方法
3 | var factory = factoryFn(global,doc);
4 |
5 | //提供window.util.toucher()接口
6 | global.util = global.util || {};
7 | global.util.toucher = global.util.toucher || factory;
8 |
9 | //提供CommonJS规范的接口
10 | global.define && define(function(require,exports,module){
11 | //对外接口
12 | return factory;
13 | });
14 | })(this,document,function(window,document){
15 | /**
16 | * 判断是否拥有某个class
17 | */
18 | function hasClass(dom,classSingle){
19 | return dom.className.match(new RegExp('(\\s|^)' + classSingle +'(\\s|$)'));
20 | }
21 |
22 | /**
23 | * @method 向句柄所在对象增加事件监听
24 | * @description 支持链式调用
25 | *
26 | * @param string 事件名
27 | * @param [string] 事件委托至某个class（可选）
28 | * @param function 符合条件的事件被触发时需要执行的回调函数
29 | *
30 | */
31 | function ON(eventStr,a,b){
32 | this._events = this._events || {};
33 | var className,fn;
34 | if(typeof(a) == 'string'){
35 | className = a.replace(/^\./,'');
36 | fn = b;
37 | }else{
38 | className = null;
39 | fn = a;
40 | }
41 | //检测callback是否合法,事件名参数是否存在·
42 | if(typeof(fn) == 'function' && eventStr && eventStr.length){
43 | var eventNames = eventStr.split(/\s+/);
44 | for(var i=0,total=eventNames.length;i=
161 | Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'Left' : 'Right') : (y1 - y2 > 0 ? 'Up' : 'Down')
162 | }
163 |
164 | /**
165 | * 监听原生的事件，主动触发模拟事件
166 | *
167 | */
168 | function eventListener(DOM){
169 | var this_touch = this;
170 |
171 | //轻击开始时间
172 | var touchStartTime = 0;
173 |
174 | //记录上一次点击时间
175 | var lastTouchTime = 0;
176 |
177 | //记录初始轻击的位置
178 | var x1,y1,x2,y2;
179 |
180 | //轻击事件的延时器
181 | var touchDelay;
182 |
183 | //测试长按事件的延时器
184 | var longTap;
185 |
186 | //记录当前事件是否已为等待结束的状态
187 | var isActive = false;
188 | //记录有坐标信息的事件
189 | var eventMark = null;
190 | //单次用户操作结束
191 | function actionOver(e){
192 | isActive = false;
193 | clearTimeout(longTap);
194 | clearTimeout(touchDelay);
195 | }
196 |
197 | //触屏开始
198 | function touchStart(e){
199 | //缓存事件
200 | eventMark = e;
201 |
202 | x1 = e.touches[0].pageX;
203 | y1 = e.touches[0].pageY;
204 | x2 = 0;
205 | y2 = 0;
206 | isActive = true;
207 | touchStartTime = new Date();
208 | EMIT.call(this_touch,'swipeStart',e);
209 | //检测是否为长按
210 | clearTimeout(longTap);
211 | longTap = setTimeout(function(){
212 | actionOver(e);
213 | //断定此次事件为长按事件
214 | EMIT.call(this_touch,'longTap',e);
215 | },500);
216 | }
217 | //触屏结束
218 | function touchend(e){
219 | //touchend中，拿不到坐标位置信息，故使用全局保存下的事件
220 | EMIT.call(this_touch,'swipeEnd',eventMark);
221 | if(!isActive){
222 | return
223 | }
224 | var now = new Date();
225 | if(now - lastTouchTime > 260){
226 | touchDelay = setTimeout(function(){
227 | //断定此次事件为轻击事件
228 | actionOver();
229 | EMIT.call(this_touch,'singleTap',eventMark);
230 | },250);
231 | }else{
232 | clearTimeout(touchDelay);
233 | actionOver(e);
234 | //断定此次事件为连续两次轻击事件
235 | EMIT.call(this_touch,'doubleTap',eventMark);
236 | }
237 | lastTouchTime = now;
238 | }
239 |
240 | //手指移动
241 | function touchmove(e){
242 | //缓存事件
243 | eventMark = e;
244 | //在原生事件基础上记录初始位置（为swipe事件增加参数传递）
245 | e.startPosition = {
246 | pageX : x1,
247 | pageY : y1
248 | };
249 | //断定此次事件为移动事件
250 | EMIT.call(this_touch,'swipe',e);
251 |
252 | if(!isActive){
253 | return
254 | }
255 | x2 = e.touches[0].pageX
256 | y2 = e.touches[0].pageY
257 | if(Math.abs(x1-x2)>2 || Math.abs(y1-y2)>2){
258 | //断定此次事件为移动手势
259 | var direction = swipeDirection(x1, x2, y1, y2);
260 | EMIT.call(this_touch,'swipe' + direction,e);
261 | }else{
262 | //断定此次事件为轻击事件
263 | actionOver(e);
264 | EMIT.call(this_touch,'singleTap',e);
265 | }
266 | actionOver(e);
267 | }
268 |
269 | /**
270 | * 对开始手势的监听
271 | */
272 | DOM.addEventListener('touchstart',touchStart);
273 | DOM.addEventListener('MSPointerDown',touchStart);
274 | DOM.addEventListener('pointerdown',touchStart);
275 |
276 | /**
277 | * 对手势结束的监听（轻击）
278 | */
279 | DOM.addEventListener('touchend',touchend);
280 | DOM.addEventListener('MSPointerUp',touchend);
281 | DOM.addEventListener('pointerup',touchend);
282 |
283 | /**
284 | * 对移动手势的监听
285 | */
286 | DOM.addEventListener('touchmove',touchmove);
287 | DOM.addEventListener('MSPointerMove',touchmove);
288 | DOM.addEventListener('pointermove',touchmove);
289 |
290 | /**
291 | * 对移动结束的监听
292 | */
293 | DOM.addEventListener('touchcancel',actionOver);
294 | DOM.addEventListener('MSPointerCancel',actionOver);
295 | DOM.addEventListener('pointercancel',actionOver);
296 | }
297 |
298 | /**
299 | * touch类
300 | *
301 | */
302 | function touch(DOM,param){
303 | var param = param || {};
304 |
305 | this.dom = DOM;
306 | //监听DOM原生事件
307 | eventListener.call(this,this.dom);
308 | }
309 | //拓展事件绑定方法
310 | touch.prototype['on'] = ON;
311 |
312 | //对外提供接口
313 | return function (dom){
314 | return new touch(dom);
315 | };
316 | });
--------------------------------------------------------------------------------
/demo/17/css/index.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | body, ul, li, ol, p, span, i, input, img, textarea, button, iframe, h1, h2, h3, h4, h5, h6 {
3 | padding: 0;
4 | margin: 0;
5 | -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
6 |
7 | i, address {
8 | font-style: normal; }
9 |
10 | ol, ul {
11 | list-style: none; }
12 |
13 | a {
14 | text-decoration: none; }
15 |
16 | html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6, b {
17 | -webkit-text-size-adjust: none;
18 | font-weight: 100; }
19 |
20 | article, aside, details, figcaption, figure, footer, header, menu, nav, section, summary, time, mark, audio, video, svg, path, select, option {
21 | display: block;
22 | margin: 0;
23 | padding: 0;
24 | -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
25 |
26 | body {
27 | font: 14px/1.5 aileron,微软雅黑,"arial", "sans-serif"; }
28 |
29 | input, select {
30 | -webkit-appearance: none;
31 | -moz-appearance: none;
32 | appearance: none; }
33 |
34 | input:focus, textarea:focus, button {
35 | outline: none;
36 | display: block;
37 | -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
38 |
39 | a {
40 | color: #333; }
41 |
42 | img {
43 | display: block;
44 | width: 100%; }
45 |
46 | .clearfix:before, .clearfix:after {
47 | content: " ";
48 | display: table; }
49 |
50 | .clearfix:after {
51 | clear: both;
52 | overflow: hidden; }
53 |
54 | .clearfix {
55 | zoom: 1; }
56 |
57 | @font-face {
58 | font-family: 'iconfont';
59 | src: url("//at.alicdn.com/t/font_1455607634_882192.eot");
60 | /* IE9*/
61 | src: url("//at.alicdn.com/t/font_1455607634_882192.eot?#iefix") format("embedded-opentype"), url("//at.alicdn.com/t/font_1455607634_882192.woff") format("woff"), url("//at.alicdn.com/t/font_1455607634_882192.ttf") format("truetype"), url("//at.alicdn.com/t/font_1455607634_882192.svg#iconfont") format("svg");
62 | /* iOS 4.1- */ }
63 |
64 | .iconfont {
65 | font-family: 'iconfont';
66 | font-size: 18px;
67 | -webkit-font-smoothing: antialiased;
68 | font-weight: normal;
69 | font-style: normal; }
70 |
71 | body {
72 | padding: 0 0 50px; }
73 | #container{
74 | max-width: 540px;
75 | margin: 0 auto;
76 | }
77 | #header {
78 | position: relative;
79 | padding: 10px 0 5px;
80 | color: #fff;
81 | background: #FF9C47; }
82 |
83 | #header > div {
84 | width: 92%;
85 | margin: 0 auto; }
86 |
87 | #header span {
88 | font-size: 12px;
89 | color: #F3F3F3; }
90 |
91 | #header p {
92 | font-size: 14px;
93 | display: block;
94 | line-height: 1; }
95 |
96 | #header p i {
97 | font-size: 26px;
98 | font-weight: bold; }
99 |
100 | #header a {
101 | position: absolute;
102 | top: 25px;
103 | right: 15px;
104 | height: 26px;
105 | line-height: 26px;
106 | width: 110px;
107 | text-align: center;
108 | display: inline-block;
109 | border: 1px solid #fff;
110 | border-radius: 25px;
111 | color: #fff; }
112 |
113 | #header nav {
114 | margin: 25px 0 0; }
115 |
116 | #header li {
117 | width: 14.28571427%;
118 | text-align: center;
119 | float: left; }
120 |
121 | /*顶部结束*/
122 | /*日历开始*/
123 | #date {
124 | width: 92%;
125 | min-height: 150px;
126 | margin: 0 auto;
127 | -webkit-transition: height .2s ease;
128 | transition: height .2s ease;
129 | overflow: hidden; }
130 |
131 | #dateBox {
132 | -webkit-transform: translate3d(0px, 0, 0);
133 | transform: translate3d(0px, 0, 0);
134 | -webkit-user-select: none;
135 | -moz-user-select: none;
136 | -ms-user-select: none;
137 | user-select: none;
138 | cursor: pointer; }
139 |
140 | #dateBox ul {
141 | position: absolute;
142 | top: 0;
143 | left: 0;
144 | width: 100%;
145 | margin: 3px 0 0;
146 | border-right: 1px solid red;
147 | -webkit-box-sizing: border-box;
148 | box-sizing: border-box; }
149 |
150 | #dateBox ul li {
151 | width: 14.285714285%;
152 | padding: 3px 0;
153 | margin: 3px 0;
154 | color: #000;
155 | text-align: center;
156 | float: left; }
157 |
158 | #dateBox ul li.other {
159 | color: #ccc; }
160 |
161 | .trans {
162 | -webkit-transition: -webkit-transform .23s ease;
163 | transition: -webkit-transform .23s ease; }
164 |
165 | /*日历结束*/
166 | /*图例开始*/
167 | #footer {
168 | width: 85%;
169 | margin: 5px auto 0; }
170 |
171 | #footer b {
172 | display: inline-block;
173 | margin: 0 0 0 20px;
174 | font-size: 12px;
175 | color: #747474;
176 | font-weight: bolder; }
177 |
178 | #footer:before {
179 | content: '';
180 | position: absolute;
181 | margin: 3px 0;
182 | height: 14px;
183 | width: 14px;
184 | background: #f3f3f3;
185 | border-radius: 50%; }
186 |
187 | /*图例结束*/
188 | /*数据统计开始*/
189 | #totalBox {
190 | width: 92%;
191 | margin: 5px auto;
192 | border-top: 1px solid #efefef;
193 | border-bottom: 1px solid #efefef; }
194 |
195 | #nav {
196 | padding: 5px;
197 | height: 22px;
198 | line-height: 22px; }
199 |
200 | #nav b {
201 | width: 40%;
202 | font-size: 12px;
203 | font-weight: bold;
204 | color: #333; }
205 |
206 | #nav ul {
207 | display: inline-block;
208 | float: right;
209 | height: 26px;
210 | line-height: 25px;
211 | font-size: 0;
212 | border-bottom: 1px solid #F9F9F9; }
213 |
214 | #nav ul li {
215 | display: inline-block;
216 | width: 30px;
217 | margin: 0 3px;
218 | font-size: 14px;
219 | font-weight: bolder;
220 | text-align: center;
221 | color: #ccc; }
222 |
223 | #nav ul li.on {
224 | color: #FF9C47;
225 | border-bottom: 2px solid #FF9C47; }
226 |
227 | #dateList {
228 | padding: 20px 0; }
229 |
230 | #dateList ul {
231 | font-size: 0; }
232 |
233 | #dateList ul li {
234 | position: relative;
235 | display: inline-block;
236 | width: 33.33%;
237 | text-align: center;
238 | vertical-align: top; }
239 |
240 | #dateList ul li h3 {
241 | font-size: 10px;
242 | font-weight: bolder;
243 | color: #666; }
244 |
245 | #dateList ul li b {
246 | margin: 0 3px;
247 | font-size: 26px;
248 | font-weight: bold;
249 | color: #333; }
250 |
251 | #dateList ul li i {
252 | font-size: 14px;
253 | font-weight: bolder;
254 | color: #ccc; }
255 |
256 | #dateList ul li:first-child:before {
257 | content: '';
258 | position: absolute;
259 | top: 0;
260 | right: -10px;
261 | border-bottom: 55px solid #FFCEA4;
262 | border-left: 20px solid transparent; }
263 |
264 | #dateList ul li:first-child:after {
265 | content: '';
266 | position: absolute;
267 | top: 1px;
268 | right: -10px;
269 | border-bottom: 55px solid white;
270 | border-left: 20px solid transparent; }
271 |
272 | #dateList ul li:last-child:before {
273 | content: '';
274 | position: absolute;
275 | top: 0;
276 | left: -10px;
277 | border-bottom: 55px solid #FFCEA4;
278 | border-left: 20px solid transparent; }
279 |
280 | #dateList ul li:last-child:after {
281 | content: '';
282 | position: absolute;
283 | top: 1px;
284 | left: -10px;
285 | border-bottom: 55px solid white;
286 | border-left: 20px solid transparent; }
287 |
288 | /*列表*/
289 | #dateList2 {
290 | border: 1px solid aqua;
291 | margin: 10px 0; }
292 |
293 | #dateList2 ul {
294 | margin: 10px; }
295 |
296 | #dateList2 ul li {
297 | margin: 8px 0; }
298 |
299 | #dateList2 ul li span {
300 | font-weight: bolder;
301 | color: #8f8f8f; }
302 |
303 | #dateList2 ul li b {
304 | float: right;
305 | font-weight: bold;
306 | color: #414141; }
307 |
308 | /*数据统计结束*/
309 | #foot {
310 | position: fixed;
311 | bottom: 0;
312 | left: 0;
313 | width: 100%;
314 | height: 50px;
315 | line-height: 50px;
316 | background: #fff;
317 | text-align: center;
318 | -webkit-box-shadow: 0 0 10px #F1F1F1;
319 | box-shadow: 0 0 10px #F1F1F1; }
320 |
321 | #foot a {
322 | position: relative;
323 | width: 33.33333%;
324 | float: left;
325 | font-size: 24px;
326 | color: #666; }
327 |
328 | #foot a.on {
329 | color: #FF9E21;
330 | background: #f5f5f5;
331 | text-shadow: 0 3px 10px #CACACA; }
332 |
333 | #foot a.on:before {
334 | content: '';
335 | position: absolute;
336 | bottom: 0;
337 | left: 0;
338 | right: 0;
339 | margin: 0 auto;
340 | width: 55%;
341 | height: 3px;
342 | background: #FF9E21; }
343 |
344 | /*# sourceMappingURL=../maps/Index/date.css.map */
345 |
--------------------------------------------------------------------------------
/demo/timeout/js/index.js:
--------------------------------------------------------------------------------
1 | var setTimeType = 1;
2 | var ktop, kleft;
3 | $(document).ready(function() {
4 | var winW = $(window).width();
5 | var nowW = winW - 320;
6 | var needH = (nowW * (11/55)) + 64;
7 | $("#andSvg").height(needH);
8 | var nowTime = getTime();
9 | $("#time").attr('value',nowTime);
10 | /*$("#itemsTpl li").each(function(index,dom) {
11 | $(dom).attr('class','items-'+ index +'');
12 | });*/
13 | });
14 | $(document).on('touchmove', function(e) {
15 | e.preventDefault();
16 | });
17 | var myScroll = new IScroll('#wrapper', {
18 | bounceTime: 500,
19 | deceleration: 0.003,
20 | tap: true,
21 | scrollbars: 'custom' ,
22 | shrinkScrollbars: 'scale',
23 | resizeScrollbars: true,
24 | fadeScrollbars: true
25 | });
26 | function scaleRound() {
27 | $(".kodo").css({
28 | 'top': ktop,
29 | 'left': kleft,
30 | 'width': 40,
31 | 'height': 40
32 | });
33 | setTimeout(function() {
34 | $(".kodo").addClass('kodo-on');
35 | }, 0);
36 | }
37 | function initDetailDom(leftT,precent) {
38 | $("#detail").css('z-index', 100);
39 | $("#round").css('stroke-dashoffset', precent*1145);
40 | $(".watch-svg").addClass('watch-svg-on');
41 | $(".detail-main").addClass('detail-main-on');
42 | var numAnim = new CountUp("leftTime",0,leftT,'',3.5,{separator : ''});
43 | numAnim.start();
44 | var len = $("#leftTime").html().length;
45 | if (len == 4) {
46 | $("#leftTime").css('font-size','38px');
47 | } else if(len >= 5) {
48 | $("#leftTime").css('font-size','32px');
49 | }
50 | }
51 | function detailGetItemsData(cls) { //直接进入详情页调用的方法
52 | var leftT = $(cls).find('span').html(),
53 | time = $(cls).find('b').html(),
54 | info = $(cls).find('.item-detail').html(),
55 | day = $(cls).find('time').html(),
56 | tpw = $(cls).find('.item-progress').width(),
57 | pw = $(cls).find('.progress-now').width(),
58 | needp = pw/tpw;
59 | scaleRound();
60 | initDetailData(time, info, day);
61 | setTimeout(function() {
62 | initDetailDom(leftT,needp);
63 | }, 500);
64 | }
65 | function initDetailData(time, info, day) {
66 | var data = {
67 | time: time,
68 | info: info,
69 | day: day
70 | };
71 | var html = template('detailDom', data);
72 | $("#mask").before(html);
73 | }
74 | $("#wrapper").on('tap', 'li', function(e) {
75 | var day = $(this).find('.J_day').html(),
76 | hour = $(this).find('.J_hour').html(),
77 | minu = $(this).find('.J_minutes').html(),
78 | info = $(this).find('.item-detail').html(),
79 | year = $(this).find('time').html(),
80 | tpw = $(this).find('.item-progress').width(),
81 | pw = $(this).find('.progress-now').width(),
82 | needp = pw/tpw;
83 | var minutes = day * 24 * 60 + parseInt(hour) * 60 + parseInt(minu);
84 | console.log(minutes);
85 | scaleRound();
86 | initDetailData('分', info, year);
87 | setTimeout(function() {
88 | initDetailDom(minutes,needp);
89 | }, 500);
90 | });
91 | $("body").on('touchstart', '.detail-back', function(e) {
92 | $("#detail").addClass('detail-off');
93 | $(".kodo").removeClass('kodo-on').css({
94 | 'width': 0,
95 | 'height': 0
96 | });
97 | setTimeout(function() {
98 | $(".watch-svg").removeClass('watch-svg-on');
99 | $("#round").css('stroke-dashoffset', 1145);
100 | }, 500);
101 | setTimeout(function() {
102 | $("#detail").remove();
103 | }, 700);
104 | });
105 | $("#itemsTpl").on('touchstart', 'li', function(e) {
106 | ktop = e.touches[0].pageY,
107 | kleft = e.touches[0].pageX;
108 | });
109 |
110 | $("#timeAdd").on('touchstart', function() {
111 | openAdd();
112 | var len = $(".home-items li").length;
113 | if (len < 4) {
114 | $("#timeAdd").addClass('time-add-4');
115 | }
116 | });
117 | $("#secondAdd").on('touchstart',function() {
118 | closeAdd();
119 | closeDeatilNav();
120 | var len = $(".home-items li").length;
121 | if (len < 4) {
122 | $("#timeAdd").removeClass('time-add-4');
123 | }
124 | });
125 | $("#mask").on('touchstart', closeAdd);
126 | function openAdd() {
127 | $("#timeAdd").css('z-index',1000);
128 | $("#mask").show();
129 | $(".time-add").addClass('time-add-on');
130 | $(".svg").css('z-index',1000).addClass('svg-on');
131 | $("#andSvg").show();
132 | setTimeout(function() {
133 | $(".svg").css('opacity', 1);
134 | }, 500);
135 | }
136 | function closeAdd() {
137 | $(".svg").css('opacity', 0);
138 | setTimeout(function() {
139 | $("#mask").hide();
140 | $(".time-add").removeClass('time-add-on');
141 | $(".svg").css('z-index',50).removeClass('svg-on');
142 | $("#andSvg").hide();
143 | $("#timeAdd").css('z-index',50);
144 | }, 500)
145 | }
146 | /*$(".item-time span").each(function(index, dom) {
147 | var len = $(dom).html().length;
148 | if (len == 4) {
149 | $(dom).next().css('font-size','20px');
150 | $(dom).next().next().css('padding','9px 0 0 0');
151 | $(dom).css('font-size', '38px');
152 | } else if (len >= 5) {
153 | $(dom).next().next().css('padding','7px 0 0 0');
154 | $(dom).css('font-size', '32px');
155 | } else if (len < 4) {
156 | $(dom).next().css('font-size','22px');
157 | }
158 | });*/
159 | function getTime() {
160 | var now = new Date();
161 | var minutes,month;
162 | if(now.getMinutes().toString().length == 1) {
163 | minutes = '0'+ now.getMinutes() +'';
164 | } else {
165 | minutes = now.getMinutes();
166 | }
167 | if (now.getMonth().toString().length == 1) {
168 | month = '0' + (now.getMonth() + 1) + '';
169 | } else {
170 | month = now.getMonth() + 1;
171 | }
172 | return now.getFullYear() + '-' +
173 | month + '-' +
174 | now.getDate() + 'T' +
175 | now.getHours() + ':'+
176 | minutes;
177 | }
178 | $("#sub").on('touchstart', function() {
179 | var dVal = $("#time").val();
180 | var end = dateTime_to_unix(dVal); //返回时间戳
181 | console.log(dVal); //返回 yyyy-mm-ddThh:mm
182 |
183 | var len = $(".home-items li").length;
184 | if (len < 4) {
185 | $("#timeAdd").removeClass('time-add-4');
186 | }
187 | });
188 | function resetSub() {
189 |
190 | $("#title").val('');
191 | $("#setTime").html('设置时间');
192 |
193 | }
194 | function surplusTime(endD) {
195 | var now = new Date();
196 | var endDate = endD;
197 | var leftTime = endD-now.getTime(); //相差的时间戳
198 | var leftsecond = Math.floor(leftTime/1000); //相差的秒数
199 | var day1 = Math.floor(leftsecond/(60*60*24)); //相差的天数
200 | var hour = Math.floor((leftsecond%(60*60*24))/3600); //相差的小时
201 | var minute = Math.floor((leftsecond-day1*24*60*60-hour*3600)/60); //分钟
202 | var str = '还有'+ day1 +'天，'+ hour +'小时，'+ minute +'分';
203 | return str;
204 | }
205 | function dateTime_to_unix(datetime) {
206 | var tmp_datetime = datetime.replace(/:/g, '-');
207 | tmp_datetime = tmp_datetime.replace(/T/g,"-");
208 | tmp_datetime = tmp_datetime.replace(/ /g, '-');
209 | var arr = tmp_datetime.split("-");
210 | var now = new Date(Date.UTC(arr[0], arr[1] - 1, arr[2], arr[3] - 8, arr[4]));
211 | var setTime = parseInt(now.getTime());
212 | var nowTime = +new Date();
213 | if (setTime < nowTime) {
214 | alert('你要穿越吗？！');
215 | } else {
216 | subAnimate();
217 | $("#setTime").html(surplusTime(setTime));
218 | return setTime;
219 | }
220 | }
221 |
222 | function subAnimate() {
223 | var $sub = $("#sub");
224 | $sub.html('').addClass('sub-on');
225 | setTimeout(function() {
226 | $sub.addClass('rotate');
227 | }, 700);
228 | setTimeout(function() {
229 | $sub.html('');
230 | }, 2200);
231 | setTimeout(function() {
232 | closeAdd();
233 | }, 2700);
234 | setTimeout(function() {
235 | $sub.removeClass('sub-on rotate').html('确 定');
236 | resetSub();
237 | }, 3400);
238 | }
239 | //详情页面包按钮
240 | $("body").on('touchstart', '.detail-nav', function() {
241 | var change = $(".detail-nav").data('change');
242 | if (change == 1) {
243 | $(".detail-nav").addClass('detail-nav-on').data('change', '2').html('');
244 | $(".footer-box").addClass('on');
245 | } else {
246 | closeDeatilNav();
247 | }
248 | });
249 | $("body").on('touchstart', '.detail-edit', function() {
250 | openAdd();
251 | });
252 | $("body").on('touchstart', '.detail-del', function() {
253 | if (confirm('真的要删除吗？')) {
254 | alert('ok');
255 | closeDeatilNav();
256 | } else {
257 | closeDeatilNav();
258 | return;
259 | }
260 | });
261 | $("body").on('touchstart', '.detail-share', function() {
262 | shareMask();
263 | });
264 | $("body").on('touchstart','#shareMask',function() {
265 | $("#shareMask").hide();
266 | $(".detail-back").removeClass('detail-back-on');
267 | closeDeatilNav();
268 | });
269 | function closeDeatilNav() {
270 | $(".detail-nav").removeClass('detail-nav-on').data('change', '1').html('');
271 | $(".footer-box").removeClass('on');
272 | }
273 | function shareMask() {
274 | $("#shareMask").show();
275 | $(".detail-back").addClass('detail-back-on');
276 | }
277 |
--------------------------------------------------------------------------------
/demo/17/js/etouch.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @description 手势构造函数，暂支持tap和上下左右滑动，支持事件代理
3 | * @param {String} id
4 | * @param {String} selector(可选) 支持复杂选择器
5 | * @param {function} fn
6 | *
7 | * @example 事件代理例子 !!!!!第一个参数仅支持id!!!!!!
8 | * 支持复杂选择器代理
9 | * etouch('#pox','.ul li span',function(e,touch) {
10 | * console.log('我仅仅至少一个tap啊！');
11 | * console.log(touch);
12 | * }).on('swiper',function(e,touch) {
13 | * console.log('实时获取');
14 | * }).on('up',function(e,touch) {
15 | * console.log('上滑回调');
16 | * }).on('down',function(e,touch) {
17 | * console.log('下滑回调');
18 | * }).on('left',function(e,touch) {
19 | * console.log('左滑回调');
20 | * }).on('right',function(e,touch) {
21 | * console.log('右滑回调');
22 | * });
23 | *
24 | * @example 直接事件绑定
25 | * etouch('li',function(e,touch) {
26 | * console.log(this,e,touch);
27 | * }).on('left',function() {
28 | *
29 | * })
30 | * e为事件对象，touch为触摸返回对象
31 | */
32 | (function(window, undefined) {
33 | function swipeDirection(x1, x2, y1, y2) {
34 | return Math.abs(x1 - x2) >= Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'left' : 'right') : (y1 - y2 > 0 ? 'up' : 'down');
35 | }
36 | //事件代理用的函数
37 |
38 | function delegate(agent, type, selector, fn) {
39 | //为了复杂的选择器实现
40 | if (typeof selector != "string") {
41 | for (var i = 0; i < agent.length; i++) {
42 | agent[i].addEventListener(type, fn, false);
43 | }
44 | return;
45 | }
46 | agent[0].addEventListener(type, function(e) {
47 | var target = e.target;
48 | var ctarget = e.currentTarget;
49 | var bubble = true;
50 | while (bubble && target != ctarget) {
51 | if (filiter(agent, selector, target)) {
52 | bubble = fn.call(target, e); //要吧事件e返回出去调用
53 | }
54 | target = target.parentNode;
55 | }
56 | return bubble;
57 | }, false);
58 |
59 | function filiter(agent, selector, target) {
60 | var nodes = agent[0].querySelectorAll(selector);
61 | for (var i = 0; i < nodes.length; i++) {
62 | if (nodes[i] == target) {
63 | return true;
64 | }
65 | }
66 | }
67 | }
68 | //事件代理用的函数结束
69 |
70 | function eTouch(root, selector, fn) {
71 | this.root = document.querySelectorAll(root); //root委托元素
72 | if (!this.root) {
73 | console.log('root不存在');
74 | return;
75 | }
76 |
77 | this.target = {//当前点击的对象
78 | el : null,
79 | w : null,
80 | h : null
81 | };
82 | this.touchObj = {
83 | status: '',
84 | pageX: 0,
85 | pageY: 0,
86 | clientX: 0,
87 | clientY: 0,
88 | distanceX: 0,
89 | distanceY: 0
90 | };
91 | this.isTap = false; //用来判断是否为tap
92 | this.time = 0; //记录点击的时间间隔
93 | this.selector = selector;
94 | this.Event = []; //存放上下左右滑的回调事件
95 | this.count = 0;
96 | this.p = 0;
97 | this.clock = null; //给div加锁,完全阻止默认行为
98 | if (arguments[2] == undefined) {
99 | this.operate(arguments[1]);
100 | if(String(arguments[1]).indexOf('e.clock') > 1)
101 | this.clock = false;
102 | } else {
103 | this.operate(arguments[2]);
104 | if(String(arguments[2]).indexOf('e.clock') > 1)
105 | this.clock = false;
106 | }
107 | }
108 |
109 | eTouch.prototype.init = function() {
110 | this.touchObj.distanceX = 0;
111 | this.touchObj.distanceY = 0;
112 | }
113 | eTouch.prototype.operate = function(fn) {
114 | var touchObj = this.touchObj, //缓存touchObj
115 | isTap = this.isTap,
116 | _this = this;
117 | delegate(this.root, 'touchstart', this.selector, function(e) {
118 | _this.target.el = this; //存储点击对象是谁
119 | _this.target.w = this.getBoundingClientRect().width;
120 | _this.target.h = this.getBoundingClientRect().height;
121 | touchStart(e, touchObj, _this);
122 | });
123 | delegate(this.root, 'touchmove', this.selector, function(e) {
124 | touchMove(e, _this.target, touchObj, _this);
125 | });
126 | delegate(this.root, 'touchend', this.selector, function(e) {
127 | touchEnd(e, this, touchObj, _this, fn);
128 | });
129 | return this;
130 | }
131 | eTouch.prototype.trigger = function(type, e) {
132 | for (var i = 0; i < this.Event.length; i++) {
133 | if (this.Event[i].type == type) {
134 | this.Event[i].method.call(this.target.el,e, this.touchObj);
135 | }
136 | }
137 | return this;
138 | }
139 | eTouch.prototype.on = function(type, fn) {
140 | this.Event.push({
141 | type: type,
142 | method: fn
143 | })
144 | return this;
145 | }
146 |
147 | //把3个状态提取出来
148 | function touchStart(e, touchObj, module) {
149 | module.init(); //滑动或者点击结束要初始化
150 | var touches = e.touches[0];
151 | //赋值手指初始位置
152 | touchObj.pageX = touches.pageX;
153 | touchObj.pageY = touches.pageY;
154 | touchObj.clientX = touches.clientX;
155 | touchObj.clientY = touches.clientY;
156 | module.time = +new Date();
157 | }
158 |
159 | function touchMove(e, target, touchObj, module) {
160 | var touches = e.touches[0];
161 | touchObj.status = 'swiper';
162 | //计算手指移动位置
163 | touchObj.distanceX = touches.pageX - touchObj.pageX;
164 | touchObj.distanceY = touches.pageY - touchObj.pageY;
165 | /*
166 | * 以下是
167 | * 手指划过微积分算法
168 | * */
169 | module.count++;
170 | module.p = module.p + 0.5 * touchObj.distanceY * touchObj.distanceY / touchObj.distanceX;
171 | var pAvg = module.p / module.count;
172 | var touchS = (2/3) * (2 * pAvg * touchObj.distanceX) * Math.sqrt(2 * pAvg * touchObj.distanceX);
173 |
174 | var targetH = target.h;
175 | var targetW = target.w;
176 | var targetS = 0;
177 | if((targetH / targetW) > 0.1405) { //触摸的元素宽高比问题,选择了tan8°做标准
178 | targetS = (2/3) * (Math.abs(touchObj.distanceX) * targetW * 0.0197) * Math.sqrt( Math.abs(touchObj.distanceX) * targetW * 0.0197 );
179 | } else {
180 | targetS = (2/3) * ( targetH * targetH * Math.abs(touchObj.distanceX) / targetW) * Math.sqrt( targetH * targetH * Math.abs(touchObj.distanceX) / targetW);
181 | }
182 |
183 | /*
184 | * 以上是
185 | * 手指划过微积分算法
186 | * */
187 | //console.log(touchS,'手指曲线');
188 | //console.log(targetS,'目标曲线');
189 | if(module.clock == false) {
190 | e.preventDefault();
191 | module.trigger(touchObj.status, e, touchObj);
192 | }
193 | if (touchS < targetS ) {
194 | e.preventDefault();
195 | module.trigger(touchObj.status, e, touchObj);
196 | }
197 | }
198 |
199 | function touchEnd(e, target, touchObj, module, fn) {
200 | var touches = e.changedTouches[0];
201 | var time = +new Date() - module.time;
202 | touchObj.distanceX = touches.pageX - touchObj.pageX;
203 | touchObj.distanceY = touches.pageY - touchObj.pageY;
204 | //计算手指滑动方向
205 | var x1 = touchObj.pageX;
206 | var x2 = touchObj.pageX + touchObj.distanceX;
207 | var y1 = touchObj.pageY;
208 | var y2 = touchObj.pageY + touchObj.distanceY;
209 | touchObj.status = swipeDirection(x1, x2, y1, y2);
210 |
211 | //当手指触摸时间＜150和位移小于2px则为tap事件
212 | if (time < 150 && Math.abs(touchObj.distanceX) < 2 && Math.abs(touchObj.distanceY) < 2) {
213 | module.isTap = true;
214 | if (module.isTap) {
215 | touchObj.status = 'tap';
216 | //返二个参数 指向被触发的dom，和当前构造函数
217 | setTimeout(function() {
218 | module.isTap = false;
219 | fn.call(target, e, touchObj);
220 | }, 30);
221 | }
222 | } else { //否则为滑动或者双击，双击暂不想做
223 | module.trigger(touchObj.status, e, touchObj);
224 | }
225 | module.count = 0;
226 | module.p = 0;
227 | }
228 |
229 | if (typeof define === 'function' && (define.amd || define.cmd)) {
230 | define(function() {
231 | return eTouch(root, selector, fn);
232 | });
233 | } else {
234 | window.etouch = function(root, selector, fn) {
235 | return new eTouch(root, selector, fn);
236 | };
237 | }
238 |
239 | })(window, undefined);
240 |
--------------------------------------------------------------------------------
/demo/10/headtitle.css:
--------------------------------------------------------------------------------
1 | * {
2 | padding: 0;
3 | margin: 0;
4 | font: 10px Microsoft YaHei;
5 | }
6 | body{
7 | overflow-x: hidden;
8 | }
9 | #nav {
10 | position: fixed;
11 | top: 0;
12 | left: 0;
13 | z-index: 98;
14 | height: 40px;
15 | width: 100%;
16 | background: #F5F5F5;
17 | overflow: hidden;
18 | }
19 | #nav .slider {
20 | width: 670px;
21 | height: 40px;
22 | /* 移动是个矩阵变化之一 要获取其中的一个数值 */
23 |
24 | -webkit-transform: translate3d(0, 0, 0);
25 | }
26 | #nav .slider li {
27 | list-style: none;
28 | line-height: 10px;
29 | font-size: 14px;
30 | padding: 5px 8px;
31 | margin: 10px;
32 | float: left;
33 | }
34 | .nav_hover {
35 | background: #f00;
36 | color: #fff;
37 | text-align: center;
38 | border-radius: 5px;
39 | }
40 | /*导航结束*/
41 |
42 | #main {
43 | width: 90%;
44 | margin: 40px auto;
45 | }
46 | .list1 {
47 | position: relative;
48 | border-bottom: 1px solid #eee;
49 | }
50 | .list1 .list1_title {
51 | padding: 15px 0 10px 0;
52 | font-size: 15px;
53 | font-weight: bold;
54 | }
55 | .list1 .list1_author {
56 | display: block;
57 | margin: 15px 0 10px 0;
58 | width: 100%;
59 | color: #ccc;
60 | font-size: 10px;
61 | }
62 | .list1 .list1_read {
63 | margin: 0 0 0 10px;
64 | color: #ccc;
65 | }
66 | .list1 time,
67 | #main .list1 .list1_plus {
68 | margin: 0 0 0 5px;
69 | font-size: 13px;
70 | float: right;
71 | }
72 | .list1 .list1_plus {
73 | border: 1px solid #ccc;
74 | background: #fff;
75 | height: 13px;
76 | line-height: 13px;
77 | width: 20px;
78 | font-size: 20px;
79 | border-radius: 10px;
80 | text-align: center;
81 | }
82 | /* 加号里的自我兴趣 */
83 |
84 | .list_like1 {
85 | position: absolute;
86 | bottom: 0;
87 | right: 0;
88 | background: #000;
89 | color: #fff;
90 | height: 30px;
91 | line-height: 30px;
92 | width: 180px;
93 | border-radius: 5px;
94 | opacity: .8;
95 | display: none;
96 | z-index: 10;
97 | }
98 | .like_favo1,
99 | .like_nofavo1 {
100 | border-right: 1px solid #858585;
101 | position: relative;
102 | left: 10px;
103 | font-size: 14px;
104 | height: 20px;
105 | }
106 | .like_favo1 {
107 | padding: 0 5px 0 0;
108 | }
109 | .like_nofavo1 {
110 | padding: 0 5px 0 5px;
111 | }
112 | .like_close1 {
113 | padding: 0 5px 0 15px;
114 | font-size: 13px;
115 | }
116 | /*一张图样式*/
117 |
118 | .list2 {
119 | position: relative;
120 | border-bottom: 1px solid #eee;
121 | }
122 | .list2:after {
123 | content: "";
124 | display: block;
125 | clear: both;
126 | }
127 | .list2 .list2_title {
128 | margin: 10px 0 0px 0;
129 | width: 68%;
130 | font-size: 15px;
131 | float: left;
132 | font-weight: bold;
133 | }
134 | .list_img2 {
135 | margin: 10px 0px 0px 0px;
136 | width: 31%;
137 | float: left;
138 | }
139 | .list2 .list2_img {
140 | width: 100%;
141 | }
142 | .list2 .list2_author {
143 | display: block;
144 | font-size: 10px;
145 | color: #ccc;
146 | margin: 0 0 10px 0;
147 | }
148 | .list2 .list2_read {
149 | margin: 0 0 0 10px;
150 | color: #ccc;
151 | }
152 | .list2 time,
153 | #main .list2 .list2_plus {
154 | float: right;
155 | margin: 0 0 0 5px;
156 | font-size: 13px;
157 | }
158 | .list2 .list2_plus {
159 | border: 1px solid #ccc;
160 | background: #fff;
161 | height: 13px;
162 | line-height: 13px;
163 | width: 20px;
164 | font-size: 20px;
165 | border-radius: 10px;
166 | text-align: center;
167 | }
168 | /* 一张图的自我兴趣 */
169 |
170 | .list_like2 {
171 | position: absolute;
172 | bottom: 0;
173 | right: 0;
174 | background: #000;
175 | color: #fff;
176 | height: 30px;
177 | line-height: 30px;
178 | width: 180px;
179 | border-radius: 5px;
180 | opacity: .8;
181 | display: none;
182 | z-index: 10;
183 | }
184 | .like_favo2,
185 | .like_nofavo2 {
186 | border-right: 1px solid #858585;
187 | position: relative;
188 | left: 10px;
189 | font-size: 14px;
190 | height: 20px;
191 | }
192 | .like_favo2 {
193 | padding: 0 5px 0 0;
194 | }
195 | .like_nofavo2 {
196 | padding: 0 5px 0 5px;
197 | }
198 | .like_close2 {
199 | padding: 0 5px 0 15px;
200 | font-size: 13px;
201 | }
202 | /* 三张图样式 */
203 |
204 | .list3 {
205 | position: relative;
206 | border-bottom: 1px solid #eee;
207 | }
208 | .list3 img {
209 | padding: 0 10px 0 0;
210 | width: 31%;
211 | height: 50%;
212 | margin: 15px 0 0 0;
213 | }
214 | .list3 img:nth-child(4) {
215 | padding: 0;
216 | }
217 | .list3 .list3_title {
218 | position: relative;
219 | top: 10px;
220 | font-size: 15px;
221 | font-weight: bold;
222 | }
223 | .list3 .list3_author {
224 | display: inline-block;
225 | color: #ccc;
226 | margin: 5px 0 4px 0;
227 | font-size: 10px;
228 | width: 100%;
229 | }
230 | .list3 .list3_read {
231 | margin: 0 0 0 10px;
232 | color: #ccc;
233 | }
234 | .list3 time,
235 | #main .list3 .list3_plus {
236 | position: relative;
237 | float: right;
238 | margin: 0 0 5px 5px;
239 | font-size: 13px;
240 | }
241 | .list3 .list3_plus {
242 | border: 1px solid #ccc;
243 | background: #fff;
244 | height: 13px;
245 | line-height: 13px;
246 | width: 20px;
247 | font-size: 20px;
248 | border-radius: 10px;
249 | text-align: center;
250 | }
251 | /* 三张图的自我兴趣 */
252 |
253 | .list_like3 {
254 | position: absolute;
255 | bottom: 0;
256 | right: 0;
257 | background: #000;
258 | color: #fff;
259 | height: 30px;
260 | line-height: 30px;
261 | width: 180px;
262 | border-radius: 5px;
263 | opacity: .8;
264 | display: none;
265 | z-index: 10;
266 | }
267 | .like_favo3,
268 | .like_nofavo3 {
269 | border-right: 1px solid #858585;
270 | position: relative;
271 | left: 10px;
272 | font-size: 14px;
273 | height: 20px;
274 | }
275 | .like_favo3 {
276 | padding: 0 5px 0 0;
277 | }
278 | .like_nofavo3 {
279 | padding: 0 5px 0 5px;
280 | }
281 | .like_close3 {
282 | padding: 0 5px 0 15px;
283 | font-size: 13px;
284 | }
285 | /* 广告横幅样式 */
286 |
287 | .list4 {
288 | position: relative;
289 | border-bottom: 1px solid #eee;
290 | }
291 | .list4 .list4_title {
292 | padding: 10px 0 0 0;
293 | font-size: 15px;
294 | font-weight: bold;
295 | }
296 | .list4 img {
297 | width: 100%;
298 | margin: 5px 0 3px 0;
299 | height: 90px;
300 | }
301 | .list4 .list4_author {
302 | display: inline-block;
303 | color: #ccc;
304 | margin: 5px 0 4px 0;
305 | font-size: 10px;
306 | width: 100%;
307 | }
308 | .list4 .list4_read {
309 | margin: 0 0 0 10px;
310 | color: #ccc;
311 | }
312 | .list4 time,
313 | #main .list4 .list4_plus {
314 | position: relative;
315 | float: right;
316 | margin: 0 0 5px 5px;
317 | font-size: 13px;
318 | }
319 | .list4 .list4_plus {
320 | border: 1px solid #ccc;
321 | background: #fff;
322 | height: 13px;
323 | line-height: 13px;
324 | width: 20px;
325 | font-size: 20px;
326 | border-radius: 10px;
327 | text-align: center;
328 | }
329 | /* 广告横幅自我兴趣 */
330 |
331 | .list_like3 {
332 | position: absolute;
333 | bottom: 0;
334 | right: 0px;
335 | background: #000;
336 | color: #fff;
337 | height: 30px;
338 | line-height: 30px;
339 | width: 180px;
340 | border-radius: 5px;
341 | opacity: .8;
342 | display: none;
343 | z-index: 10;
344 | }
345 | .like_favo3,
346 | .like_nofavo3 {
347 | border-right: 1px solid #858585;
348 | position: relative;
349 | left: 10px;
350 | font-size: 14px;
351 | height: 20px;
352 | }
353 | .like_favo3 {
354 | padding: 0 5px 0 0;
355 | }
356 | .like_nofavo3 {
357 | padding: 0 5px 0 5px;
358 | }
359 | .like_close3 {
360 | padding: 0 5px 0 15px;
361 | font-size: 13px;
362 | }
363 | /* 左边红色热点小块 */
364 |
365 | .list_hot,
366 | .list_tuijian {
367 | position: absolute;
368 | left: -15px;
369 | top: 18px;
370 | width: 15px;
371 | height: 15px;
372 | line-height: 15px;
373 | text-align: center;
374 | color: #fff;
375 | }
376 | .list_hot {
377 | background: rgb(253, 82, 82);
378 | }
379 | .list_tuijian {
380 | background: rgb(0, 153, 255);
381 | }
382 |
383 |
384 | /*底部fixed*/
385 | #foot{
386 | height: 40px;
387 | line-height: 40px;
388 | width: 100%;
389 | position: fixed;
390 | z-index: 100;
391 | bottom: 0;
392 | left: 0;
393 | border-top: 1px solid #ccc;
394 | background: #fff;
395 | display: block;
396 | }
397 | #foot .foot_p {
398 | display: inline;
399 | width: 33%;
400 | height: 40px;
401 | line-height: 40px;
402 | text-align: center;
403 | float: left;
404 | }
405 | #foot .city {
406 | font-size: 16px;
407 | padding: 2px 10px;
408 | background: #abc;
409 | }
410 | .foot_content{
411 | position: fixed;
412 | bottom: 0;left: 0;
413 | background: #fff;
414 | width: 100%;
415 | display: none;
416 |
417 | }
418 | .content_list{
419 | width: 100%;
420 | height: 240px;
421 | overflow-y:scroll;
422 | }
423 | .foot_content p{
424 | display: inline;
425 | width: 33%;
426 | height: 35px;
427 | line-height: 35px;
428 | text-align: center;
429 | float: left;
430 | background: #fff;
431 | font-size: 16px;
432 | }
433 | .foot_content span[name=city] {
434 | font-size: 14px;
435 | width: 25%;
436 | margin: 7px 0;
437 | display: none;
438 | float: left;
439 | text-align: center;
440 | font-size: 14px;
441 | }
442 | .foot_content span[name=school] {
443 | font-size: 14px;
444 | width: 50%;
445 | margin: 7px 0;
446 | float: left;
447 | text-align: center;
448 | display: none;
449 | font-size: 14px;
450 | }
451 | .foot_content span[name=in] {
452 | font-size: 14px;
453 | width: 33%;
454 | margin: 7px 0;
455 | display: none;
456 | float: left;
457 | text-align: center;
458 | font-size: 14px;
459 | }
460 |
461 | #mask {
462 | width: 100%;
463 | height: 100%;
464 | position: fixed;
465 | z-index: 99;
466 | background: rgba(0,0,0,0.7);
467 | display: none;
468 | }
469 |
470 |
--------------------------------------------------------------------------------
/stylesheets/normalize.css:
--------------------------------------------------------------------------------
1 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */
2 |
3 | /**
4 | * 1. Set default font family to sans-serif.
5 | * 2. Prevent iOS text size adjust after orientation change, without disabling
6 | * user zoom.
7 | */
8 |
9 | html {
10 | font-family: sans-serif; /* 1 */
11 | -ms-text-size-adjust: 100%; /* 2 */
12 | -webkit-text-size-adjust: 100%; /* 2 */
13 | }
14 |
15 | /**
16 | * Remove default margin.
17 | */
18 |
19 | body {
20 | margin: 0;
21 | }
22 |
23 | /* HTML5 display definitions
24 | ========================================================================== */
25 |
26 | /**
27 | * Correct `block` display not defined for any HTML5 element in IE 8/9.
28 | * Correct `block` display not defined for `details` or `summary` in IE 10/11
29 | * and Firefox.
30 | * Correct `block` display not defined for `main` in IE 11.
31 | */
32 |
33 | article,
34 | aside,
35 | details,
36 | figcaption,
37 | figure,
38 | footer,
39 | header,
40 | hgroup,
41 | main,
42 | menu,
43 | nav,
44 | section,
45 | summary {
46 | display: block;
47 | }
48 |
49 | /**
50 | * 1. Correct `inline-block` display not defined in IE 8/9.
51 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
52 | */
53 |
54 | audio,
55 | canvas,
56 | progress,
57 | video {
58 | display: inline-block; /* 1 */
59 | vertical-align: baseline; /* 2 */
60 | }
61 |
62 | /**
63 | * Prevent modern browsers from displaying `audio` without controls.
64 | * Remove excess height in iOS 5 devices.
65 | */
66 |
67 | audio:not([controls]) {
68 | display: none;
69 | height: 0;
70 | }
71 |
72 | /**
73 | * Address `[hidden]` styling not present in IE 8/9/10.
74 | * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
75 | */
76 |
77 | [hidden],
78 | template {
79 | display: none;
80 | }
81 |
82 | /* Links
83 | ========================================================================== */
84 |
85 | /**
86 | * Remove the gray background color from active links in IE 10.
87 | */
88 |
89 | a {
90 | background-color: transparent;
91 | }
92 |
93 | /**
94 | * Improve readability when focused and also mouse hovered in all browsers.
95 | */
96 |
97 | a:active,
98 | a:hover {
99 | outline: 0;
100 | }
101 |
102 | /* Text-level semantics
103 | ========================================================================== */
104 |
105 | /**
106 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
107 | */
108 |
109 | abbr[title] {
110 | border-bottom: 1px dotted;
111 | }
112 |
113 | /**
114 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
115 | */
116 |
117 | b,
118 | strong {
119 | font-weight: bold;
120 | }
121 |
122 | /**
123 | * Address styling not present in Safari and Chrome.
124 | */
125 |
126 | dfn {
127 | font-style: italic;
128 | }
129 |
130 | /**
131 | * Address variable `h1` font-size and margin within `section` and `article`
132 | * contexts in Firefox 4+, Safari, and Chrome.
133 | */
134 |
135 | h1 {
136 | font-size: 2em;
137 | margin: 0.67em 0;
138 | }
139 |
140 | /**
141 | * Address styling not present in IE 8/9.
142 | */
143 |
144 | mark {
145 | background: #ff0;
146 | color: #000;
147 | }
148 |
149 | /**
150 | * Address inconsistent and variable font size in all browsers.
151 | */
152 |
153 | small {
154 | font-size: 80%;
155 | }
156 |
157 | /**
158 | * Prevent `sub` and `sup` affecting `line-height` in all browsers.
159 | */
160 |
161 | sub,
162 | sup {
163 | font-size: 75%;
164 | line-height: 0;
165 | position: relative;
166 | vertical-align: baseline;
167 | }
168 |
169 | sup {
170 | top: -0.5em;
171 | }
172 |
173 | sub {
174 | bottom: -0.25em;
175 | }
176 |
177 | /* Embedded content
178 | ========================================================================== */
179 |
180 | /**
181 | * Remove border when inside `a` element in IE 8/9/10.
182 | */
183 |
184 | img {
185 | border: 0;
186 | }
187 |
188 | /**
189 | * Correct overflow not hidden in IE 9/10/11.
190 | */
191 |
192 | svg:not(:root) {
193 | overflow: hidden;
194 | }
195 |
196 | /* Grouping content
197 | ========================================================================== */
198 |
199 | /**
200 | * Address margin not present in IE 8/9 and Safari.
201 | */
202 |
203 | figure {
204 | margin: 1em 40px;
205 | }
206 |
207 | /**
208 | * Address differences between Firefox and other browsers.
209 | */
210 |
211 | hr {
212 | box-sizing: content-box;
213 | height: 0;
214 | }
215 |
216 | /**
217 | * Contain overflow in all browsers.
218 | */
219 |
220 | pre {
221 | overflow: auto;
222 | }
223 |
224 | /**
225 | * Address odd `em`-unit font size rendering in all browsers.
226 | */
227 |
228 | code,
229 | kbd,
230 | pre,
231 | samp {
232 | font-family: monospace, monospace;
233 | font-size: 1em;
234 | }
235 |
236 | /* Forms
237 | ========================================================================== */
238 |
239 | /**
240 | * Known limitation: by default, Chrome and Safari on OS X allow very limited
241 | * styling of `select`, unless a `border` property is set.
242 | */
243 |
244 | /**
245 | * 1. Correct color not being inherited.
246 | * Known issue: affects color of disabled elements.
247 | * 2. Correct font properties not being inherited.
248 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
249 | */
250 |
251 | button,
252 | input,
253 | optgroup,
254 | select,
255 | textarea {
256 | color: inherit; /* 1 */
257 | font: inherit; /* 2 */
258 | margin: 0; /* 3 */
259 | }
260 |
261 | /**
262 | * Address `overflow` set to `hidden` in IE 8/9/10/11.
263 | */
264 |
265 | button {
266 | overflow: visible;
267 | }
268 |
269 | /**
270 | * Address inconsistent `text-transform` inheritance for `button` and `select`.
271 | * All other form control elements do not inherit `text-transform` values.
272 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
273 | * Correct `select` style inheritance in Firefox.
274 | */
275 |
276 | button,
277 | select {
278 | text-transform: none;
279 | }
280 |
281 | /**
282 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
283 | * and `video` controls.
284 | * 2. Correct inability to style clickable `input` types in iOS.
285 | * 3. Improve usability and consistency of cursor style between image-type
286 | * `input` and others.
287 | */
288 |
289 | button,
290 | html input[type="button"], /* 1 */
291 | input[type="reset"],
292 | input[type="submit"] {
293 | -webkit-appearance: button; /* 2 */
294 | cursor: pointer; /* 3 */
295 | }
296 |
297 | /**
298 | * Re-set default cursor for disabled elements.
299 | */
300 |
301 | button[disabled],
302 | html input[disabled] {
303 | cursor: default;
304 | }
305 |
306 | /**
307 | * Remove inner padding and border in Firefox 4+.
308 | */
309 |
310 | button::-moz-focus-inner,
311 | input::-moz-focus-inner {
312 | border: 0;
313 | padding: 0;
314 | }
315 |
316 | /**
317 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in
318 | * the UA stylesheet.
319 | */
320 |
321 | input {
322 | line-height: normal;
323 | }
324 |
325 | /**
326 | * It's recommended that you don't attempt to style these elements.
327 | * Firefox's implementation doesn't respect box-sizing, padding, or width.
328 | *
329 | * 1. Address box sizing set to `content-box` in IE 8/9/10.
330 | * 2. Remove excess padding in IE 8/9/10.
331 | */
332 |
333 | input[type="checkbox"],
334 | input[type="radio"] {
335 | box-sizing: border-box; /* 1 */
336 | padding: 0; /* 2 */
337 | }
338 |
339 | /**
340 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain
341 | * `font-size` values of the `input`, it causes the cursor style of the
342 | * decrement button to change from `default` to `text`.
343 | */
344 |
345 | input[type="number"]::-webkit-inner-spin-button,
346 | input[type="number"]::-webkit-outer-spin-button {
347 | height: auto;
348 | }
349 |
350 | /**
351 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
352 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
353 | * (include `-moz` to future-proof).
354 | */
355 |
356 | input[type="search"] {
357 | -webkit-appearance: textfield; /* 1 */ /* 2 */
358 | box-sizing: content-box;
359 | }
360 |
361 | /**
362 | * Remove inner padding and search cancel button in Safari and Chrome on OS X.
363 | * Safari (but not Chrome) clips the cancel button when the search input has
364 | * padding (and `textfield` appearance).
365 | */
366 |
367 | input[type="search"]::-webkit-search-cancel-button,
368 | input[type="search"]::-webkit-search-decoration {
369 | -webkit-appearance: none;
370 | }
371 |
372 | /**
373 | * Define consistent border, margin, and padding.
374 | */
375 |
376 | fieldset {
377 | border: 1px solid #c0c0c0;
378 | margin: 0 2px;
379 | padding: 0.35em 0.625em 0.75em;
380 | }
381 |
382 | /**
383 | * 1. Correct `color` not being inherited in IE 8/9/10/11.
384 | * 2. Remove padding so people aren't caught out if they zero out fieldsets.
385 | */
386 |
387 | legend {
388 | border: 0; /* 1 */
389 | padding: 0; /* 2 */
390 | }
391 |
392 | /**
393 | * Remove default vertical scrollbar in IE 8/9/10/11.
394 | */
395 |
396 | textarea {
397 | overflow: auto;
398 | }
399 |
400 | /**
401 | * Don't inherit the `font-weight` (applied by a rule above).
402 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
403 | */
404 |
405 | optgroup {
406 | font-weight: bold;
407 | }
408 |
409 | /* Tables
410 | ========================================================================== */
411 |
412 | /**
413 | * Remove most spacing between table cells.
414 | */
415 |
416 | table {
417 | border-collapse: collapse;
418 | border-spacing: 0;
419 | }
420 |
421 | td,
422 | th {
423 | padding: 0;
424 | }
425 |
--------------------------------------------------------------------------------
97 |
98 |
99 | 
102 |
103 |
104 |