├── .gitattributes ├── .gitignore ├── .idea ├── demos.iml ├── modules.xml ├── vcs.xml └── workspace.xml ├── 3dBomb ├── 3dBomb.html ├── img │ └── zoro.jpg └── js │ └── bomb.js ├── DOM └── index.html ├── README.md ├── audioVisualizer ├── index.html └── js │ ├── loader.js │ └── main.js ├── contacts ├── contacts.css ├── contacts.html ├── icon.jpg ├── jquery.qrcode.min.js └── zoro.jpg ├── fakeZhihu ├── 0001.html ├── 0002.html ├── 0003.html ├── README.md ├── collections.html ├── css │ ├── header.css │ ├── index.css │ ├── login.css │ └── navigator.css ├── draft.html ├── img │ ├── 002.gif │ ├── favicon.ico │ ├── icons@2x_a9b07ecead.58bad5a6.png │ ├── new_logo.ede2316d.png │ ├── new_logo@2x.9187366b.png │ ├── pictest.png │ ├── pictest001.png │ ├── sprites-1.9.2.4c54885a-old.png │ ├── sprites-1.9.2.4c54885a.png │ ├── sprites@2x.auto.1cc5b15c.png │ ├── sprites@2x.auto.40df1bd9.png │ └── user_001.jpg ├── index.html ├── js │ └── main.js ├── login.html ├── topics.html └── user.html ├── hashtabel ├── book.txt ├── index.html ├── keywords.txt └── search.js ├── heal ├── heal.css ├── heal.html └── lib │ ├── cubes.js │ ├── hexagons.js │ ├── rectangle.js │ └── require.js ├── index.css ├── index.html ├── license ├── lottery ├── img │ ├── 1.png │ ├── 2.png │ ├── 3.png │ ├── 4.png │ ├── 5.png │ ├── 6.png │ ├── 7.png │ ├── 8.png │ ├── arrow.png │ ├── bg-dither-boom.gif │ ├── bg-dither.gif │ ├── bg.jpg │ ├── buttons_01.png │ ├── disc-bg.gif │ └── disc-rotate.gif ├── lottery_01.html └── lottery_02.html ├── particlesLoader ├── js │ └── loader.js └── particlesLoader.html ├── rippleEffect ├── ripple.css └── ripple.html ├── somecode.html ├── svg └── svg.html ├── template ├── index.css ├── index.html ├── index.js └── widget │ └── list.html └── wxShake ├── css └── index.css ├── js └── shaked.js ├── source ├── 000.jpg ├── 001.jpg ├── 002.jpg ├── favicon.ico ├── shakBox.png └── shake_sound.mp3 └── wxShake.html /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | 7 | # Standard to msysgit 8 | *.doc diff=astextplain 9 | *.DOC diff=astextplain 10 | *.docx diff=astextplain 11 | *.DOCX diff=astextplain 12 | *.dot diff=astextplain 13 | *.DOT diff=astextplain 14 | *.pdf diff=astextplain 15 | *.PDF diff=astextplain 16 | *.rtf diff=astextplain 17 | *.RTF diff=astextplain 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | node_modules -------------------------------------------------------------------------------- /.idea/demos.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.idea/workspace.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 19 | 20 | 22 | 23 | 24 | 25 | 26 | 27 | 29 | 30 | 31 | 32 | true 33 | DEFINITION_ORDER 34 | 35 | 36 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 74 | 75 | 76 | 77 | 80 | 81 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 1471144095018 107 | 114 | 115 | 116 | 117 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 145 | 148 | 149 | 150 | 152 | 153 | 154 | 155 | 156 | -------------------------------------------------------------------------------- /3dBomb/3dBomb.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 图片大爆炸 10 | 30 | 31 | 32 | 33 | 34 |

点击图片，体验扑面而来的感觉

35 |
36 | 37 | 38 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /3dBomb/img/zoro.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qieguo2016/demos/751c60679c80fb3aad3ed191398d8b91c9f2cadb/3dBomb/img/zoro.jpg -------------------------------------------------------------------------------- /3dBomb/js/bomb.js: -------------------------------------------------------------------------------- 1 | /*-----------------------------【程序说明】----------------------------- 2 | * 程序说明： 图片爆炸立体效果 3 | * 浏览器支持：Chrome、Firefox、Safari、国产主流移动浏览器（性能较差） 4 | * Created by Qieguo on 2016-05-15. 5 | * 更多信息请关注我的博客：http://www.cnblogs.com/qieguo/ 6 | * 7 | * Reference: Zachstronaut LLC @ http://www.zachstronaut.com/ 8 | * Licensed under the MIT，转载使用请注明出处！http://www.cnblogs.com/qieguo/ 9 | *-------------------------------------------------------------------- 10 | */ 11 | 12 | function ParticlesTemplate() { 13 | var that = this, 14 | _halfPageWidth = document.body.clientWidth / 2, 15 | _pageHeigth = document.body.clientHeight, 16 | img = null, 17 | cnt = null; 18 | 19 | this.particleCount = 0; 20 | this.activeCount = 0; 21 | 22 | this.nodes = []; 23 | this.alives = []; 24 | this.xs = []; 25 | this.ys = []; 26 | this.zs = []; 27 | this.xvs = []; 28 | this.yvs = []; 29 | this.zvs = []; 30 | 31 | this.xa = 0; //x axis acceleration 32 | this.ya = 0.3; //y axis acceleration 33 | this.za = 0.5; //z axis acceleration 34 | 35 | this.xf = 0.97; //x axis force 36 | this.yf = 1; //y axis force 37 | this.zf = 0.97; //z axis force 38 | 39 | this.timeToStop = false; 40 | this.transformProperty = false; 41 | this.vendorPrefix = false; 42 | this.support3D = false; 43 | 44 | //make particles 45 | this.init = function(exploreImg, wrapper) { 46 | var pwidth = pheight = 10, //particle's size 47 | x = y = 0, 48 | div = styleCtn = '', 49 | imgWidth = exploreImg.width, 50 | imgHeight = exploreImg.height, 51 | nx = Math.floor(imgWidth / pwidth), 52 | ny = Math.floor(imgHeight / pheight), 53 | head = document.head || document.getElementsByTagName('head')[0], 54 | bombStyle = document.createElement('style'); 55 | 56 | img = exploreImg; 57 | cnt = wrapper; 58 | 59 | //define common style 60 | bombStyle.type = 'text/css'; 61 | bombStyle.appendChild(document.createTextNode('.bomb { position: absolute; height: 10px; width: 10px; background-image: url(' + exploreImg.src + '); }')); 62 | head.appendChild(bombStyle); 63 | 64 | for (var i = 0, num = nx * ny; i < num; i++) { 65 | x = (i % nx) * pwidth; 66 | y = Math.floor(i / ny) * pheight; 67 | styleCtn = 'left: ' + x + 'px; top: ' + y + 'px; background-position: ' + (-x) + 'px ' + (-y) + 'px;'; 68 | div = div + '
'; 69 | } 70 | wrapper.innerHTML = div; //add particles to wrapper 71 | 72 | var particles = document.getElementsByClassName('bomb'), 73 | i = particles.length; 74 | while (i--) { 75 | this._add(particles[i], true); 76 | } 77 | }; 78 | 79 | //start animation 80 | var _t = 0; 81 | this.go = function() { 82 | if (that.activeCount) { 83 | if (that.timeToStop) { 84 | return that.timeToStop = false; 85 | } 86 | 87 | window.requestAnimationFrame(that.go); 88 | 89 | var nt = Date.now() 90 | if (nt - _t > 32) { 91 | _t = nt; 92 | that._updateAll(); 93 | } 94 | } else { 95 | that.init(img, cnt); 96 | } 97 | } 98 | 99 | //stop animation 100 | this.stop = function() { 101 | that.timeToStop = true; 102 | } 103 | 104 | //add nodes to particles 105 | this._add = function(node) { 106 | if (!this.transformProperty) { 107 | var p, properties = ['transform', 'WebkitTransform', 'msTransform', 'MozTransform', 'OTransform']; 108 | while (p = properties.shift()) { 109 | if (typeof node.style[p] != 'undefined') { 110 | this.transformProperty = p; 111 | if (p != 'transform') { 112 | this.vendorPrefix = p.replace('Transform', ''); 113 | } 114 | if (typeof node.style.perspective != 'undefined' || (this.vendorPrefix && typeof node.style[this.vendorPrefix + 'Perspective'] != 'undefined')) { 115 | this.support3D = true; 116 | } 117 | break; 118 | } 119 | } 120 | } 121 | 122 | this.nodes.push(node); 123 | 124 | var i = this.particleCount; 125 | this._revive(i); 126 | this.particleCount++; 127 | } 128 | 129 | //initialize particle's coordinate and speed 130 | this._revive = function(i) { 131 | this.xs[i] = 0; 132 | this.ys[i] = 0; 133 | this.zs[i] = 0; 134 | var xFactor = (parseInt(this.nodes[i].style.left) - 60) / 40; 135 | var yFactor = (parseInt(this.nodes[i].style.top) - 95) / 80; 136 | this.xvs[i] = (10 + Math.floor(Math.random() * 10)) * xFactor; 137 | this.yvs[i] = (10 + Math.floor(Math.random() * 10)) * yFactor; 138 | this.zvs[i] = -20 + Math.floor(Math.random() * 40); 139 | 140 | this.activeCount++; 141 | this.alives[i] = true; 142 | } 143 | 144 | //judge whether particle[i] should be killed or not 145 | this._shouldBeKilled = function(i) { 146 | if (this.xs[i] < -_halfPageWidth || this.xs[i] > _halfPageWidth || this.ys[i] > _pageHeigth || this.zs[i] > 500) { 147 | this.xs[i] = -9999; 148 | this.ys[i] = 0; 149 | this.activeCount--; 150 | this.alives[i] = false; 151 | } 152 | } 153 | 154 | //update particle's coordinate and speed 155 | this._updateAll = function() { 156 | var i = this.particleCount; 157 | while (i--) { 158 | if (this.alives[i]) { 159 | this.xvs[i] += this.xa; 160 | this.yvs[i] += this.ya; 161 | this.zvs[i] += this.za; 162 | 163 | this.xvs[i] *= this.xf; 164 | this.yvs[i] *= this.yf; 165 | this.zvs[i] *= this.zf; 166 | 167 | this.xs[i] += this.xvs[i]; 168 | this.ys[i] += this.yvs[i]; 169 | this.zs[i] += this.zvs[i]; 170 | 171 | this._shouldBeKilled(i); 172 | 173 | var s = 1 + this.zs[i] / 200; 174 | if (s < 0) { 175 | s = 0; 176 | } 177 | if (this.support3D) { 178 | this.nodes[i].style[this.transformProperty] = 'translate3d(' + this.xs[i] + 'px, ' + this.ys[i] + 'px, ' + this.zs[i] + 'px) rotateX(' + Math.cos(0.1 * this.ys[i]) + 'rad) rotateY(' + Math.sin(0.1 * this.xs[i]) + 'rad)'; 179 | } else { 180 | this.nodes[i].style[this.transformProperty] = 'translate(' + this.xs[i] + 'px, ' + this.ys[i] + 'px) scale(' + s + ', ' + s + ')'; 181 | } 182 | } 183 | } 184 | } 185 | 186 | } -------------------------------------------------------------------------------- /DOM/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | DOM 7 | 16 | 17 | 18 | 19 | 20 |
21 | 23 |

1

24 |

2

25 |

3

26 |

4

27 |

5

28 | 29 |
30 | 40 | 41 | 74 | 75 | 120 | 121 | 122 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | MY DEMOS 2 | --- 3 | * **[多关键词匹配](http://qieguo2016.github.io/demos/hashtabel/index.html)** (PS：关键词需要以中文顿号、分隔) 4 | 5 | * **[二维码名片][1] (PS：关键词需要以中文顿号、分隔)** 6 | 7 | * **[FakeZhihu][2]** 8 | 9 | * **[3D图片爆裂效果][3]** 10 | 11 | * **[H5音乐可视化效果][4]** 12 | 13 | * **[密集恐惧症患者福音][5]** 14 | 15 | * **[粒子效果进度条][6]** 16 | 17 | * **[Web版微信摇一摇][7]** 18 | 19 | * **[转盘抽奖](http://qieguo2016.github.io/demos/lottery/lottery_01.html)** 20 | 21 | For more information: http://www.cnblogs.com/qieguo/ 22 | 23 | [1]:http://qieguo2016.github.io/demos/contacts/contacts.html 24 | [2]:http://qieguo2016.github.io/demos/fakeZhihu/index.html 25 | [3]:http://qieguo2016.github.io/demos/3dBomb/3dBomb.html 26 | [4]:http://qieguo2016.github.io/demos/audioVisualizer/index.html 27 | [5]:http://qieguo2016.github.io/demos/heal/heal.html 28 | [6]:http://qieguo2016.github.io/demos/particlesLoader/particlesLoader.html 29 | [7]:http://qieguo2016.github.io/demos/wxShake/wxShake.html -------------------------------------------------------------------------------- /audioVisualizer/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | HTML5 Web Audio Demo 11 | 12 | 50 | 51 | 52 |
53 |
54 |

HTML5 Audio visualizer

55 | 56 | Click me to select an audio file. 57 | 58 | 59 |
60 | 61 |
62 | 63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /audioVisualizer/js/loader.js: -------------------------------------------------------------------------------- 1 | var lightLoader = function(c, cw, ch){ 2 | 3 | var that = this; 4 | this.c = c; 5 | this.ctx = c.getContext('2d'); 6 | this.cw = cw; 7 | this.ch = ch; 8 | this.raf = null; 9 | 10 | this.loaded = 0; 11 | this.loaderSpeed = .6; 12 | this.loaderWidth = cw * 0.8; 13 | this.loaderHeight = 20; 14 | this.loader = { 15 | x: (this.cw/2) - (this.loaderWidth/2), 16 | y: (this.ch/2) - (this.loaderHeight/2) 17 | }; 18 | this.particles = []; 19 | this.particleLift = 220; 20 | this.hueStart = 0 21 | this.hueEnd = 120; 22 | this.hue = 0; 23 | this.gravity = .15; 24 | this.particleRate = 4; 25 | 26 | /*========================================================*/ 27 | /* Initialize 28 | /*========================================================*/ 29 | this.init = function(){ 30 | this.loaded = 0; 31 | this.particles = []; 32 | this.loop(); 33 | }; 34 | 35 | /*========================================================*/ 36 | /* Utility Functions 37 | /*========================================================*/ 38 | this.rand = function(rMi, rMa){return ~~((Math.random()*(rMa-rMi+1))+rMi);}; 39 | this.hitTest = function(x1, y1, w1, h1, x2, y2, w2, h2){return !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 < y1);}; 40 | 41 | /*========================================================*/ 42 | /* Update Loader 43 | /*========================================================*/ 44 | this.updateLoader = function(){ 45 | if(this.loaded < 100){ 46 | this.loaded += this.loaderSpeed; 47 | } else { 48 | this.loaded = 0; 49 | } 50 | }; 51 | 52 | /*========================================================*/ 53 | /* Render Loader 54 | /*========================================================*/ 55 | this.renderLoader = function(){ 56 | this.ctx.fillStyle = '#000'; 57 | this.ctx.fillRect(this.loader.x, this.loader.y, this.loaderWidth, this.loaderHeight); 58 | 59 | this.hue = this.hueStart + (this.loaded/100)*(this.hueEnd - this.hueStart); 60 | 61 | var newWidth = (this.loaded/100)*this.loaderWidth; 62 | this.ctx.fillStyle = 'hsla('+this.hue+', 100%, 40%, 1)'; 63 | this.ctx.fillRect(this.loader.x, this.loader.y, newWidth, this.loaderHeight); 64 | 65 | this.ctx.fillStyle = '#222'; 66 | this.ctx.fillRect(this.loader.x, this.loader.y, newWidth, this.loaderHeight/2); 67 | }; 68 | 69 | /*========================================================*/ 70 | /* Particles 71 | /*========================================================*/ 72 | this.Particle = function(){ 73 | this.x = that.loader.x + ((that.loaded/100)*that.loaderWidth) - that.rand(0, 1); 74 | this.y = that.ch/2 + that.rand(0,that.loaderHeight)-that.loaderHeight/2; 75 | this.vx = (that.rand(0,4)-2)/100; 76 | this.vy = (that.rand(0,that.particleLift)-that.particleLift*2)/100; 77 | this.width = that.rand(2,6)/2; 78 | this.height = that.rand(2,6)/2; 79 | this.hue = that.hue; 80 | }; 81 | 82 | this.Particle.prototype.update = function(i){ 83 | this.vx += (that.rand(0,6)-3)/100; 84 | this.vy += that.gravity; 85 | this.x += this.vx; 86 | this.y += this.vy; 87 | 88 | if(this.y > that.ch){ 89 | that.particles.splice(i, 1); 90 | } 91 | }; 92 | 93 | this.Particle.prototype.render = function(){ 94 | that.ctx.fillStyle = 'hsla('+this.hue+', 100%, '+that.rand(50,70)+'%, '+that.rand(20,100)/100+')'; 95 | that.ctx.fillRect(this.x, this.y, this.width, this.height); 96 | }; 97 | 98 | this.createParticles = function(){ 99 | var i = this.particleRate; 100 | while(i--){ 101 | this.particles.push(new this.Particle()); 102 | }; 103 | }; 104 | 105 | this.updateParticles = function(){ 106 | var i = this.particles.length; 107 | while(i--){ 108 | var p = this.particles[i]; 109 | p.update(i); 110 | }; 111 | }; 112 | 113 | this.renderParticles = function(){ 114 | var i = this.particles.length; 115 | while(i--){ 116 | var p = this.particles[i]; 117 | p.render(); 118 | }; 119 | }; 120 | 121 | 122 | /*========================================================*/ 123 | /* Clear Canvas 124 | /*========================================================*/ 125 | this.clearCanvas = function(){ 126 | this.ctx.globalCompositeOperation = 'source-over'; 127 | this.ctx.clearRect(0,0,this.cw,this.ch); 128 | this.ctx.globalCompositeOperation = 'lighter'; 129 | }; 130 | 131 | /*========================================================*/ 132 | /* Animation Loop 133 | /*========================================================*/ 134 | this.loop = function(){ 135 | var loopIt = function(){ 136 | that.raf = requestAnimationFrame(loopIt); 137 | that.clearCanvas(); 138 | 139 | that.createParticles(); 140 | 141 | that.updateLoader(); 142 | that.updateParticles(); 143 | 144 | that.renderLoader(); 145 | that.renderParticles(); 146 | 147 | }; 148 | loopIt(); 149 | }; 150 | 151 | 152 | this.stop = function(){ 153 | window.cancelAnimationFrame(this.raf); 154 | this.clearCanvas(); 155 | } 156 | 157 | }; 158 | 159 | 160 | /*========================================================*/ 161 | /* Setup requestAnimationFrame when it is unavailable. 162 | /*========================================================*/ 163 | var setupRAF = function(){ 164 | var lastTime = 0; 165 | var vendors = ['ms', 'moz', 'webkit', 'o']; 166 | for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x){ 167 | window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; 168 | window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame']; 169 | }; 170 | 171 | if(!window.requestAnimationFrame){ 172 | window.requestAnimationFrame = function(callback, element){ 173 | var currTime = new Date().getTime(); 174 | var timeToCall = Math.max(0, 16 - (currTime - lastTime)); 175 | var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); 176 | lastTime = currTime + timeToCall; 177 | return id; 178 | }; 179 | }; 180 | 181 | if (!window.cancelAnimationFrame){ 182 | window.cancelAnimationFrame = function(id){ 183 | clearTimeout(id); 184 | }; 185 | }; 186 | }; -------------------------------------------------------------------------------- /contacts/contacts.css: -------------------------------------------------------------------------------- 1 | /* common CSS start */ 2 | 3 | html { 4 | -ms-text-size-adjust: 100%; 5 | -webkit-text-size-adjust: 100%; 6 | } 7 | 8 | body { 9 | line-height: 1.6; 10 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 11 | -webkit-font-smoothing: antialiased; 12 | } 13 | 14 | body, 15 | h1, 16 | h2, 17 | h3, 18 | h4, 19 | h5, 20 | h6, 21 | p, 22 | ol, 23 | ul, 24 | li { 25 | margin: 0; 26 | padding: 0; 27 | } 28 | 29 | a img { 30 | border: 0; 31 | } 32 | 33 | a { 34 | text-decoration: none; 35 | } 36 | 37 | 38 | /* common CSS end */ 39 | 40 | .base-layer { 41 | display: none; 42 | } 43 | 44 | .cd { 45 | margin: 15px 0; 46 | /* display: none; */ 47 | } 48 | 49 | .cd-item { 50 | box-sizing: border-box; 51 | height: 44px; 52 | margin: 0 15px; 53 | padding-bottom: 6px; 54 | border-bottom: 1px solid #ccc; 55 | list-style-type: none; 56 | display: -webkit-box; 57 | display: -webkit-flex; 58 | display: -ms-flexbox; 59 | display: flex; 60 | -webkit-box-align: end; 61 | -webkit-align-items: flex-end; 62 | -ms-flex-align: end; 63 | align-items: flex-end; 64 | } 65 | 66 | .cd-input { 67 | margin-left: 12px; 68 | font-size: 17px; 69 | border: none; 70 | -webkit-box-flex: 1; 71 | -webkit-flex: 1; 72 | -ms-flex: 1; 73 | flex: 1; 74 | min-width: 220px; 75 | line-height: 23px; 76 | } 77 | 78 | .cd-input:focus, 79 | .cd-input:active { 80 | outline: none; 81 | } 82 | 83 | .ct { 84 | /* text-align: center; */ 85 | margin: 0 15px; 86 | } 87 | 88 | .ct-btn { 89 | color: white; 90 | background-color: #2a93ff; 91 | height: 40px; 92 | border: none; 93 | font-size: 16px; 94 | width: 100%; 95 | box-sizing: border-box; 96 | margin-top: 20px; 97 | } 98 | 99 | .ct-btn:focus, 100 | .ct-btn:active { 101 | outline: none; 102 | } 103 | 104 | .mordal-layer { 105 | /* display: none; */ 106 | position: fixed; 107 | width: 100%; 108 | height: 100%; 109 | top: 0; 110 | left: 0; 111 | text-align: center; 112 | background-color: white; 113 | padding-top: 50px; 114 | } 115 | 116 | .card-img { 117 | width: 256px; 118 | height: 256px; 119 | /* z-index: 200; */ 120 | /* position: absolute; */ 121 | /* left: 30px; */ 122 | /* opacity: 0.5; */ 123 | } 124 | .handle-wrp { 125 | margin: 15px 10px; 126 | } 127 | .hint { 128 | margin-top: 5px; 129 | } 130 | canvas { 131 | display: none; 132 | } -------------------------------------------------------------------------------- /contacts/contacts.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 生成2维码 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 |

长按二维码识别，一键保存到手机通讯录

21 |

点微信右上角分享，马上发送给朋友

22 | 23 |
24 | 25 |
26 |
27 | 37 |
38 | 39 |
40 |
41 | 42 | 212 | 213 | 214 | 215 | -------------------------------------------------------------------------------- /contacts/icon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qieguo2016/demos/751c60679c80fb3aad3ed191398d8b91c9f2cadb/contacts/icon.jpg -------------------------------------------------------------------------------- /contacts/jquery.qrcode.min.js: -------------------------------------------------------------------------------- 1 | (function(r){r.fn.qrcode=function(h){var s;function u(a){this.mode=s;this.data=a}function o(a,c){this.typeNumber=a;this.errorCorrectLevel=c;this.modules=null;this.moduleCount=0;this.dataCache=null;this.dataList=[]}function q(a,c){if(void 0==a.length)throw Error(a.length+"/"+c);for(var d=0;da||this.moduleCount<=a||0>c||this.moduleCount<=c)throw Error(a+","+c);return this.modules[a][c]},getModuleCount:function(){return this.moduleCount},make:function(){if(1>this.typeNumber){for(var a=1,a=1;40>a;a++){for(var c=p.getRSBlocks(a,this.errorCorrectLevel),d=new t,b=0,e=0;e=d;d++)if(!(-1>=a+d||this.moduleCount<=a+d))for(var b=-1;7>=b;b++)-1>=c+b||this.moduleCount<=c+b||(this.modules[a+d][c+b]= 5 | 0<=d&&6>=d&&(0==b||6==b)||0<=b&&6>=b&&(0==d||6==d)||2<=d&&4>=d&&2<=b&&4>=b?!0:!1)},getBestMaskPattern:function(){for(var a=0,c=0,d=0;8>d;d++){this.makeImpl(!0,d);var b=j.getLostPoint(this);if(0==d||a>b)a=b,c=d}return c},createMovieClip:function(a,c,d){a=a.createEmptyMovieClip(c,d);this.make();for(c=0;c=f;f++)for(var i=-2;2>=i;i++)this.modules[b+f][e+i]=-2==f||2==f||-2==i||2==i||0==f&&0==i?!0:!1}},setupTypeNumber:function(a){for(var c= 7 | j.getBCHTypeNumber(this.typeNumber),d=0;18>d;d++){var b=!a&&1==(c>>d&1);this.modules[Math.floor(d/3)][d%3+this.moduleCount-8-3]=b}for(d=0;18>d;d++)b=!a&&1==(c>>d&1),this.modules[d%3+this.moduleCount-8-3][Math.floor(d/3)]=b},setupTypeInfo:function(a,c){for(var d=j.getBCHTypeInfo(this.errorCorrectLevel<<3|c),b=0;15>b;b++){var e=!a&&1==(d>>b&1);6>b?this.modules[b][8]=e:8>b?this.modules[b+1][8]=e:this.modules[this.moduleCount-15+b][8]=e}for(b=0;15>b;b++)e=!a&&1==(d>>b&1),8>b?this.modules[8][this.moduleCount- 8 | b-1]=e:9>b?this.modules[8][15-b-1+1]=e:this.modules[8][15-b-1]=e;this.modules[this.moduleCount-8][8]=!a},mapData:function(a,c){for(var d=-1,b=this.moduleCount-1,e=7,f=0,i=this.moduleCount-1;0g;g++)if(null==this.modules[b][i-g]){var n=!1;f>>e&1));j.getMask(c,b,i-g)&&(n=!n);this.modules[b][i-g]=n;e--; -1==e&&(f++,e=7)}b+=d;if(0>b||this.moduleCount<=b){b-=d;d=-d;break}}}};o.PAD0=236;o.PAD1=17;o.createData=function(a,c,d){for(var c=p.getRSBlocks(a, 9 | c),b=new t,e=0;e8*a)throw Error("code length overflow. ("+b.getLengthInBits()+">"+8*a+")");for(b.getLengthInBits()+4<=8*a&&b.put(0,4);0!=b.getLengthInBits()%8;)b.putBit(!1);for(;!(b.getLengthInBits()>=8*a);){b.put(o.PAD0,8);if(b.getLengthInBits()>=8*a)break;b.put(o.PAD1,8)}return o.createBytes(b,c)};o.createBytes=function(a,c){for(var d= 10 | 0,b=0,e=0,f=Array(c.length),i=Array(c.length),g=0;g>>=1;return c},getPatternPosition:function(a){return j.PATTERN_POSITION_TABLE[a-1]},getMask:function(a,c,d){switch(a){case 0:return 0==(c+d)%2;case 1:return 0==c%2;case 2:return 0==d%3;case 3:return 0==(c+d)%3;case 4:return 0==(Math.floor(c/2)+Math.floor(d/3))%2;case 5:return 0==c*d%2+c*d%3;case 6:return 0==(c*d%2+c*d%3)%2;case 7:return 0==(c*d%3+(c+d)%2)%2;default:throw Error("bad maskPattern:"+ 14 | a);}},getErrorCorrectPolynomial:function(a){for(var c=new q([1],0),d=0;dc)switch(a){case 1:return 10;case 2:return 9;case s:return 8;case 8:return 8;default:throw Error("mode:"+a);}else if(27>c)switch(a){case 1:return 12;case 2:return 11;case s:return 16;case 8:return 10;default:throw Error("mode:"+a);}else if(41>c)switch(a){case 1:return 14;case 2:return 13;case s:return 16;case 8:return 12;default:throw Error("mode:"+ 15 | a);}else throw Error("type:"+c);},getLostPoint:function(a){for(var c=a.getModuleCount(),d=0,b=0;b=g;g++)if(!(0>b+g||c<=b+g))for(var h=-1;1>=h;h++)0>e+h||c<=e+h||0==g&&0==h||i==a.isDark(b+g,e+h)&&f++;5a)throw Error("glog("+a+")");return l.LOG_TABLE[a]},gexp:function(a){for(;0>a;)a+=255;for(;256<=a;)a-=255;return l.EXP_TABLE[a]},EXP_TABLE:Array(256), 17 | LOG_TABLE:Array(256)},m=0;8>m;m++)l.EXP_TABLE[m]=1<m;m++)l.EXP_TABLE[m]=l.EXP_TABLE[m-4]^l.EXP_TABLE[m-5]^l.EXP_TABLE[m-6]^l.EXP_TABLE[m-8];for(m=0;255>m;m++)l.LOG_TABLE[l.EXP_TABLE[m]]=m;q.prototype={get:function(a){return this.num[a]},getLength:function(){return this.num.length},multiply:function(a){for(var c=Array(this.getLength()+a.getLength()-1),d=0;d 18 | this.getLength()-a.getLength())return this;for(var c=l.glog(this.get(0))-l.glog(a.get(0)),d=Array(this.getLength()),b=0;b>>7-a%8&1)},put:function(a,c){for(var d=0;d>>c-d-1&1))},getLengthInBits:function(){return this.length},putBit:function(a){var c=Math.floor(this.length/8);this.buffer.length<=c&&this.buffer.push(0);a&&(this.buffer[c]|=128>>>this.length%8);this.length++}};"string"===typeof h&&(h={text:h});h=r.extend({},{render:"canvas",width:256,height:256,typeNumber:-1, 26 | correctLevel:2,background:"#ffffff",foreground:"#000000"},h);return this.each(function(){var a;if("canvas"==h.render){a=new o(h.typeNumber,h.correctLevel);a.addData(h.text);a.make();var c=document.createElement("canvas");c.width=h.width;c.height=h.height;for(var d=c.getContext("2d"),b=h.width/a.getModuleCount(),e=h.height/a.getModuleCount(),st=Math.floor(Math.random()*360),f=0;f").css("width",h.width+"px").css("height",h.height+"px").css("border","0px").css("border-collapse","collapse").css("background-color",h.background);d=h.width/a.getModuleCount();b=h.height/a.getModuleCount();for(e=0;e").css("height",b+"px").appendTo(c);for(i=0;i").css("width", 28 | d+"px").css("background-color",a.isDark(e,i)?h.foreground:h.background).appendTo(f)}}a=c;jQuery(a).appendTo(this)})}})(jQuery); 29 | -------------------------------------------------------------------------------- /contacts/zoro.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qieguo2016/demos/751c60679c80fb3aad3ed191398d8b91c9f2cadb/contacts/zoro.jpg -------------------------------------------------------------------------------- /fakeZhihu/0002.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Fake Zhihu 11 | 12 | 13 | 14 | 15 |
16 | 首页-知乎 17 | 21 | 22 |
23 | 24 |
25 | 42 | 49 | 80 |
81 | 82 |
83 |
84 |
85 | 网页设计(Web Design) 86 | 用户体验 87 | 互联网 88 | 修改 89 |
90 |
91 |

你的手机上有什么很有意思的 App？

修改 92 |
93 |
94 | 你的手机上有什么很有意思的 App？ 95 | 修改 96 |
97 |
98 | 9 条评论 99 | 分享 100 | • 101 | 邀请回答 102 | 举报 103 |
104 |
105 | 106 |
107 |

27 个回答

108 |
109 | 110 |
111 |
112 | 郁一 113 | 114 | 115 |
116 |
117 | 118 | KMTT、 119 | 纯色帆布、 120 | Libear 121 | 122 | 等 3135 人赞同 123 |
124 |
125 | 怦然心动？或许还谈不上，但我推荐的这些网站绝对会让你爱上，流连忘返。 126 |
    127 |
  1. StumbleUpon 第一次上这个网站就被震惊了，太有有趣了，里面有很多精彩的内容。你根据你的个人偏好，把符合你偏好的、被最多人所推荐的网站推荐给你，这样，你就能够轻松访问到那些内容高质量的网页，而不用总是浪费时间访问很多内容质量平平的网页。
    2. 128 |
  2. Quora - Your Best Source for Knowledge Quora是一个知识问答网站，里面有太多大牛了，世界各国的人有，这才是认识更大的世界，知乎和它比起来只能算作一个小池塘。
    3. 129 |
  3. Brain Games & Brain Training大脑和身体上其它肌肉一样，也是需要持续的锻炼。Lumosity提供了很多智力小游戏，可以提升你的大脑。
    4. 130 |
  4. Productivity News, Videos, Reviews and Gossip lifehacker是一个可以让你每天都能进步一点的网站，里面有很多生活的技巧。
    5. The Art of Manliness到底怎么样成为一个成功的男人？什么样才是成功的男人？男人必备网站 131 |
  5. HowStuffWorks就是个小百科吧，里面有很多冷门的知识，让人欲罢不能。
    6. 132 |
  6. Random Facts很多你跟本想不到的小知识，比如说你知道圣经其实是西方流行歌手的创作源泉吗？中国还有百万人每天消费一美元以下（疑问？）
    7. 133 |
  7. IFTTT用过的都知道，离不开了，就像它宣传口号说的一样“put the Internet to work for you
    8. 134 |
  8. Duolingo 你是否曾想学习一门外语，但又找不到可靠的资源？或许你可以尝试下多邻国。
    9. 135 |
  9. Learn to code想学编程吗？让你高效利用上网的时间，学习当下流行的所有计算机语言。
    10. 136 |
  10. reddit厌烦豆瓣贴吧了吧？你可以来这里看看，看看米国人民的幽默无节操段子，很多微博段子也是从这里抄来的。
    11. 137 |
  11. Ratatype 你打字速度怎么样？慢的话可以来这里来学学了。
    12. 138 |
  12. Z-Type一个让人根本停不下来的打字小游戏。
    13. 139 | 3135 编辑于 2014-11-02 90 条评论 感谢 更多 • 作者保留权利 140 |
141 |
142 |
143 | 3135 144 | 关注问题 145 | 90 条评论 146 | • 147 | 作者保留权利 148 |
149 |
150 | 151 |
152 |
153 | 康石石 154 | ，艺术留学大拿 155 | 156 |
157 |
158 | 159 | 刘开元、 160 | DaraW、 161 | 托托 162 | 163 | 等 869 人赞同 164 |
165 |
166 | 推荐2个，一个给人耳目一新的网站浏览体验，一个是超级实用的设计灵感来源网站I Remember一个关于回忆的网站（强烈建议，亲身体验）IntroHome page所有的光斑都是用户登录网站留下的回忆，就像浩瀚银河通过鼠标，可以在回忆的银河中穿行滚动鼠标滑轮，可以… 167 |
168 |
169 | 869 170 | 关注问题 171 | 9 条评论 172 | • 173 | 禁止转载 174 |
175 |
176 | 177 |
178 |
179 |
180 | 许达 181 | ，APP，互联网，广告新媒体，个人微信公众号:省略一百字，更多 app 推荐请关注「***」公众号以及官网 182 | 183 |
184 |
185 | 186 | 刘开元、 187 | DaraW、 188 | 托托 189 | 190 | 等 25 人赞同 191 |
192 |
193 | Roronoa Zoro，草帽海贼团剑士，路飞招募的第一个船员，评价Zoro我想从以下几个方面来说。一、实力索隆作为三大主力之一，毫无疑问是草帽海贼团最重要的战斗力之一，三大主力的战斗风格分别是拳头、剑和踢技。理论上，兵刃总比拳脚厉害，所以画起索隆的实力 194 | Roronoa Zoro，草帽海贼团剑士，路飞招募的第一个船员，评价Zoro我想从以下几个方面来说。一、实力索隆作为三大主力之一，毫无疑问是草帽海贼团最重要的战斗力之一，三大主力的战斗风格分别是拳头、剑和踢技。理论上，兵刃总比拳脚厉害，所以画起索隆的实力 195 |
196 |
197 | 2040 198 | 关注问题 199 | 172 条评论 200 | • 201 | 作者保留权利 202 |
203 |
204 |
205 | 206 |
207 | 更多 208 |
209 | 210 |
211 |
212 | 石石 213 | ，……添加话题经验，提升回答可信度 214 | 215 |
216 | 217 |
218 | | 219 | 220 |
221 |
222 | 223 | 224 |
225 |
226 |
227 |

问题状态

228 |
229 | 最近活动于 昨天 11:08 230 | • 231 | 查看问题日志 232 |
233 |
234 | 被浏览 1 次，相关话题关注者 279183 人 235 |
236 |
237 | 238 |
239 | 240 |
241 |

Created By Qieguo, Under MIT License

242 |
243 | 244 |
245 |
246 |
247 | 提问 248 |
249 |
250 | 251 |
252 |
问题说明(可选)
253 | 254 |
255 |
256 |
话题分类
257 |
258 | 259 | 260 |
261 |
262 |
263 | 264 | 取消 265 | 266 |
267 |
268 |
269 |
270 | 271 |
272 | 273 | 274 |
275 | 赞同 276 | 反对 277 |
278 |
279 | 280 | 281 | 282 | 289 | 290 | -------------------------------------------------------------------------------- /fakeZhihu/0003.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Fake Zhihu 11 | 12 | 13 | 14 | 15 |
16 | 首页-知乎 17 | 21 | 22 |
23 | 24 |
25 | 42 | 49 | 80 |
81 | 82 |
83 |
84 |
85 | 网页设计(Web Design) 86 | 用户体验 87 | 互联网 88 | 修改 89 |
90 |
91 |

怎么评价海贼王里的索隆？

修改 92 |
93 |
94 | Roronoa Zoro，草帽海贼团剑士，路飞招募的第一个船员，评价Zoro我想从以下几个方面来说。一、实力索隆作为三大主力之一，毫无疑问是草帽海贼团最重要的战斗力之一修改 95 |
96 |
97 | 9 条评论 98 | 分享 99 | • 100 | 邀请回答 101 | 举报 102 |
103 |
104 | 105 |
106 |

27 个回答

107 |
108 | 109 |
110 |
111 |
112 | 许达 113 | ，APP，互联网，广告新媒体，个人微信公众号:省略一百字，更多 app 推荐请关注「***」公众号以及官网 114 | 115 |
116 |
117 | 118 | 刘开元、 119 | DaraW、 120 | 托托 121 | 122 | 等 25 人赞同 123 |
124 |
125 | Roronoa Zoro，草帽海贼团剑士，路飞招募的第一个船员，评价Zoro我想从以下几个方面来说。一、实力索隆作为三大主力之一，毫无疑问是草帽海贼团最重要的战斗力之一，三大主力的战斗风格分别是拳头、剑和踢技。理论上，兵刃总比拳脚厉害，所以画起索隆的实力 126 | Roronoa Zoro，草帽海贼团剑士，路飞招募的第一个船员，评价Zoro我想从以下几个方面来说。一、实力索隆作为三大主力之一，毫无疑问是草帽海贼团最重要的战斗力之一，三大主力的战斗风格分别是拳头、剑和踢技。理论上，兵刃总比拳脚厉害，所以画起索隆的实力 127 |
128 |
129 | 2040 130 | 关注问题 131 | 172 条评论 132 | • 133 | 作者保留权利 134 |
135 |
136 |
137 | 138 |
139 |
140 | 郁一 141 | 142 | 143 |
144 |
145 | 146 | KMTT、 147 | 纯色帆布、 148 | Libear 149 | 150 | 等 3135 人赞同 151 |
152 |
153 | 怦然心动？或许还谈不上，但我推荐的这些网站绝对会让你爱上，流连忘返。 154 |
    155 |
  1. StumbleUpon 第一次上这个网站就被震惊了，太有有趣了，里面有很多精彩的内容。你根据你的个人偏好，把符合你偏好的、被最多人所推荐的网站推荐给你，这样，你就能够轻松访问到那些内容高质量的网页，而不用总是浪费时间访问很多内容质量平平的网页。
    2. 156 |
  2. Quora - Your Best Source for Knowledge Quora是一个知识问答网站，里面有太多大牛了，世界各国的人有，这才是认识更大的世界，知乎和它比起来只能算作一个小池塘。
    3. 157 |
  3. Brain Games & Brain Training大脑和身体上其它肌肉一样，也是需要持续的锻炼。Lumosity提供了很多智力小游戏，可以提升你的大脑。
    4. 158 |
  4. Productivity News, Videos, Reviews and Gossip lifehacker是一个可以让你每天都能进步一点的网站，里面有很多生活的技巧。
    5. The Art of Manliness到底怎么样成为一个成功的男人？什么样才是成功的男人？男人必备网站 159 |
  5. HowStuffWorks就是个小百科吧，里面有很多冷门的知识，让人欲罢不能。
    6. 160 |
  6. Random Facts很多你跟本想不到的小知识，比如说你知道圣经其实是西方流行歌手的创作源泉吗？中国还有百万人每天消费一美元以下（疑问？）
    7. 161 |
  7. IFTTT用过的都知道，离不开了，就像它宣传口号说的一样“put the Internet to work for you
    8. 162 |
  8. Duolingo 你是否曾想学习一门外语，但又找不到可靠的资源？或许你可以尝试下多邻国。
    9. 163 |
  9. Learn to code想学编程吗？让你高效利用上网的时间，学习当下流行的所有计算机语言。
    10. 164 |
  10. reddit厌烦豆瓣贴吧了吧？你可以来这里看看，看看米国人民的幽默无节操段子，很多微博段子也是从这里抄来的。
    11. 165 |
  11. Ratatype 你打字速度怎么样？慢的话可以来这里来学学了。
    12. 166 |
  12. Z-Type一个让人根本停不下来的打字小游戏。
    13. 167 | 3135 编辑于 2014-11-02 90 条评论 感谢 更多 • 作者保留权利 168 |
169 |
170 |
171 | 3135 172 | 关注问题 173 | 90 条评论 174 | • 175 | 作者保留权利 176 |
177 |
178 | 179 |
180 |
181 | 康石石 182 | ，艺术留学大拿 183 | 184 |
185 |
186 | 187 | 刘开元、 188 | DaraW、 189 | 托托 190 | 191 | 等 869 人赞同 192 |
193 |
194 | 推荐2个，一个给人耳目一新的网站浏览体验，一个是超级实用的设计灵感来源网站I Remember一个关于回忆的网站（强烈建议，亲身体验）IntroHome page所有的光斑都是用户登录网站留下的回忆，就像浩瀚银河通过鼠标，可以在回忆的银河中穿行滚动鼠标滑轮，可以… 195 |
196 |
197 | 869 198 | 关注问题 199 | 9 条评论 200 | • 201 | 禁止转载 202 |
203 |
204 | 205 |
206 | 更多 207 |
208 | 209 |
210 |
211 | 石石 212 | ，……添加话题经验，提升回答可信度 213 | 214 |
215 | 216 |
217 | | 218 | 219 |
220 |
221 | 222 | 223 |
224 |
225 |
226 |

问题状态

227 |
228 | 最近活动于 昨天 11:08 229 | • 230 | 查看问题日志 231 |
232 |
233 | 被浏览 1 次，相关话题关注者 279183 人 234 |
235 |
236 | 237 |
238 | 239 |
240 |

Created By Qieguo, Under MIT License

241 |
242 | 243 |
244 |
245 |
246 | 提问 247 |
248 |
249 | 250 |
251 |
问题说明(可选)
252 | 253 |
254 |
255 |
话题分类
256 |
257 | 258 | 259 |
260 |
261 |
262 | 263 | 取消 264 | 265 |
266 |
267 |
268 |
269 | 270 |
271 | 272 | 273 |
274 | 赞同 275 | 反对 276 |
277 |
278 | 279 | 280 | 281 | 288 | 289 | -------------------------------------------------------------------------------- /fakeZhihu/README.md: -------------------------------------------------------------------------------- 1 | FakeZhihu 2 | --- 3 | 4 | This is a Zhihu web page on mobile device, and it is created just for learning. 5 | 6 | It is not finished yet, I am working... 7 | 8 | Demo 9 | --- 10 | 11 | See it in action: http://qieguo2016.github.io/FakeZhihu/ 12 | 13 | Screenshot 14 | --- 15 | 16 | ![atl="Screenshot"](https://github.com/qieguo2016/FakeZhihu/blob/master/img/Screenshot.png) 17 | -------------------------------------------------------------------------------- /fakeZhihu/collections.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Fake Zhihu 11 | 12 | 13 | 14 | 15 |
16 | 首页-知乎 17 | 21 | 22 |
23 | 24 |
25 | 42 | 49 | 80 |
81 | 82 |
83 |
    84 |
  • 我关注的收藏夹
    • 85 |
  • 我创建的收藏夹
    • 86 |
87 | 97 |
98 | 更多 99 |
100 | 120 |
121 | 122 |
123 |

Created By Qieguo, Under MIT License

124 |
125 | 126 |
127 |
128 |
129 | 提问 130 |
131 |
132 | 133 |
134 |
问题说明(可选)
135 | 136 |
137 |
138 |
话题分类
139 |
140 | 141 | 142 |
143 |
144 |
145 | 146 | 取消 147 | 148 |
149 |
150 |
151 |
152 | 153 |
154 | 155 | 156 |
157 | 赞同 158 | 反对 159 |
160 |
161 | 162 | 163 | 164 | 171 | 172 | -------------------------------------------------------------------------------- /fakeZhihu/css/header.css: -------------------------------------------------------------------------------- 1 | .clearfix:after { 2 | content: ""; 3 | clear: both; 4 | display: block; 5 | } 6 | .zh-top { 7 | /*on normal condition*/ 8 | position: fixed; 9 | z-index: 900; 10 | box-sizing: border-box; 11 | width: 100%; 12 | /* height: 2.813rem; */ 13 | padding: 6px; 14 | background-color: #0766C5; 15 | background: -webkit-linear-gradient(#086DD4, #055DB6); 16 | background: linear-gradient(#086DD4, #055DB6); 17 | border-bottom: 1px solid #055DB6; 18 | } 19 | .zh-top-home-link { 20 | float: left; 21 | width: 61px; 22 | height: 31px; 23 | margin-top: -1px; 24 | background-image: url(../img/new_logo@2x.9187366b.png); 25 | background-size: 61px 31px; 26 | background-repeat: no-repeat; 27 | text-indent: -999px; 28 | } 29 | .zh-top-search { 30 | position: absolute; 31 | left: 77px; 32 | right: 4.75rem; 33 | height: 1.875rem; 34 | /*margin-left: 70px;*/ 35 | /*margin-right: 0.2rem;*/ 36 | /* margin-top: 1px; */ 37 | display: -webkit-flex; 38 | display: flex; 39 | justify-content: flex-end; 40 | align-items: center; 41 | background-color: #E1EAF2; 42 | border-radius: 4px; 43 | -webkit-transition: all .5s ease-in-out; 44 | transition: all .5s ease-in-out; 45 | } 46 | .zh-top-search-input { 47 | width: 0; 48 | margin-left: 10px; 49 | flex: 1 1 auto; 50 | background: transparent; 51 | border: none; 52 | font-size: 0.9rem; 53 | } 54 | .zh-top-search-input:focus { 55 | outline: none; 56 | } 57 | .zh-top-search-btn { 58 | box-sizing: border-box; 59 | width: 1.875rem; 60 | height: 1.875rem; 61 | padding: 0.5rem; 62 | border: none; 63 | flex: 0 0 auto; 64 | background-color: transparent; 65 | background-image: url(../img/sprites@2x.auto.1cc5b15c.png); 66 | background-size: 4.5rem 4.375rem; 67 | background-position: -2.25rem -0.5rem; 68 | background-clip: content-box; 69 | cursor: pointer; 70 | } 71 | .zh-top-search-btn:focus { 72 | outline: none; 73 | } 74 | .zh-top-add-question { 75 | float: right; 76 | width: 3.8rem; 77 | height: 2rem; 78 | /* margin-right: 0px; */ 79 | color: white; 80 | background-color: #0D76E1; 81 | box-shadow: 0 1px 2px rgba(0,0,0,.05),inset 1px 2px 6px rgba(255,255,255,0.25); 82 | border: 1px solid #045bb2; 83 | border-radius: 3px; 84 | font-family: monospace; 85 | font-size: 1em; 86 | cursor: pointer; 87 | -webkit-transition: all .5s ease-in-out; 88 | transition: all .5s ease-in-out; 89 | } 90 | .zh-top.searching .zh-top-add-question { 91 | /*searching, searchInput got focus*/ 92 | opacity: 0; 93 | } 94 | .zh-top.searching .zh-top-search { 95 | /*searching, searchInput got focus*/ 96 | right: 6px; 97 | background-color: white; 98 | } 99 | -------------------------------------------------------------------------------- /fakeZhihu/css/login.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qieguo2016/demos/751c60679c80fb3aad3ed191398d8b91c9f2cadb/fakeZhihu/css/login.css -------------------------------------------------------------------------------- /fakeZhihu/css/navigator.css: -------------------------------------------------------------------------------- 1 | /******** common style ********/ 2 | a { 3 | text-decoration: none; 4 | display: block; 5 | color: black; 6 | /* height: 100%; */ 7 | } 8 | 9 | /********************************************/ 10 | 11 | 12 | .zh-nav { 13 | position: relative; 14 | z-index: 99; 15 | top: 45px; 16 | /* height: 2.25rem; */ 17 | background-color: #F3F3F3; 18 | } 19 | .zh-nav-menu { 20 | padding: 0; 21 | margin: 0; 22 | display: -webkit-flex; 23 | display: flex; 24 | flex-flow: row wrap; 25 | align-items: stretch; 26 | /* border-bottom: 1px solid #DFDFDF; */ 27 | text-align: center; 28 | border-bottom: 1px solid #e1e1e1; 29 | } 30 | .zh-nav-menu-li { 31 | position: relative; 32 | box-sizing: border-box; 33 | width: 20%; 34 | height: 36px; 35 | line-height: 36px; 36 | flex: 1 1 auto; 37 | list-style: none; 38 | } 39 | 40 | .zh-nav-user { 41 | position: absolute; 42 | top: 2.25rem; 43 | left: -35%; 44 | width: 140%; 45 | padding: 0; 46 | background-color: #F3F3F3; 47 | } 48 | .show .zh-nav-user-li { 49 | box-sizing: border-box; 50 | padding-left: 15px; 51 | line-height: 3rem; 52 | display: block; 53 | border: none; 54 | list-style: none; 55 | text-align: left; 56 | } 57 | 58 | .zh-nav-user-li { 59 | display: none; 60 | } 61 | 62 | .zh-nav-msg { 63 | /*on normal condition, hide the message menu*/ 64 | display: none; 65 | } 66 | .zh-nav-msg.show { 67 | /*show */ 68 | display: inherit; 69 | box-sizing: border-box; 70 | background-color: white; 71 | border-bottom: 1px solid #DFDFDF; 72 | width: 100%; 73 | } 74 | .zh-nav-msg-sort { 75 | padding: 0; 76 | margin: 0; 77 | display: -webkit-flex; 78 | display: flex; 79 | align-items: center; 80 | border-bottom: 1px solid #DFDFDF; 81 | text-align: center; 82 | } 83 | 84 | .msg-sort { 85 | width: 100%; 86 | border: none; 87 | outline: none; 88 | background-color: transparent; 89 | vertical-align: middle; 90 | cursor: pointer; 91 | flex: 1 1 auto; 92 | } 93 | .msg-sort i{ 94 | display: inline-block; 95 | width: 24px; 96 | height: 24px; 97 | margin-top: 2px; 98 | } 99 | .sprites-b { 100 | background-image: url(../img/sprites-1.9.2.4c54885a.png); 101 | background-size: 308px 250px; 102 | box-sizing: border-box; 103 | background-clip: content-box; 104 | } 105 | .message i{ 106 | background-position: -94px -60px; 107 | } 108 | 109 | .user i{ 110 | background-position: -122px -60px; 111 | } 112 | 113 | .thanks i{ 114 | background-position: -150px -60px; 115 | } 116 | 117 | .current.message i{ 118 | background-position: -94px -81px; 119 | } 120 | 121 | .current.user i{ 122 | background-position: -122px -82px; 123 | } 124 | 125 | .current.thanks i{ 126 | background-position: -150px -82px; 127 | } 128 | 129 | .setting { 130 | display: -webkit-flex; 131 | display: flex; 132 | justify-content: space-between; 133 | align-items: baseline; 134 | border-bottom: 1px solid #DFDFDF; 135 | flex-flow: row wrap; 136 | } 137 | 138 | .setting:last-child { 139 | padding: 0 11px; 140 | } 141 | .setting a { 142 | color: #999; 143 | } 144 | .setting h2 { 145 | color: #666; 146 | margin: 0; 147 | font-size: 1.2rem; 148 | } 149 | 150 | .settingIcon { 151 | width: 30px; 152 | height: 36px; 153 | padding: 6px 3px; 154 | display: inline-block; 155 | vertical-align: middle; 156 | background-position: -47px -138px; 157 | } 158 | -------------------------------------------------------------------------------- /fakeZhihu/draft.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Fake Zhihu 11 | 12 | 13 | 14 | 15 |
16 | 首页-知乎 17 | 21 | 22 |
23 | 24 |
25 | 42 | 49 | 80 |
81 | 82 |
83 | 103 |
104 | 105 |
106 |

Created By Qieguo, Under MIT License

107 |
108 | 109 |
110 |
111 |
112 | 提问 113 |
114 |
115 | 116 |
117 |
问题说明(可选)
118 | 119 |
120 |
121 |
话题分类
122 |
123 | 124 | 125 |
126 |
127 |
128 | 129 | 取消 130 | 131 |
132 |
133 |
134 |
135 | 136 | 137 | 138 | 145 | 146 | -------------------------------------------------------------------------------- /fakeZhihu/img/002.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qieguo2016/demos/751c60679c80fb3aad3ed191398d8b91c9f2cadb/fakeZhihu/img/002.gif -------------------------------------------------------------------------------- /fakeZhihu/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qieguo2016/demos/751c60679c80fb3aad3ed191398d8b91c9f2cadb/fakeZhihu/img/favicon.ico -------------------------------------------------------------------------------- /fakeZhihu/img/icons@2x_a9b07ecead.58bad5a6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qieguo2016/demos/751c60679c80fb3aad3ed191398d8b91c9f2cadb/fakeZhihu/img/icons@2x_a9b07ecead.58bad5a6.png -------------------------------------------------------------------------------- /fakeZhihu/img/new_logo.ede2316d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qieguo2016/demos/751c60679c80fb3aad3ed191398d8b91c9f2cadb/fakeZhihu/img/new_logo.ede2316d.png -------------------------------------------------------------------------------- /fakeZhihu/img/new_logo@2x.9187366b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qieguo2016/demos/751c60679c80fb3aad3ed191398d8b91c9f2cadb/fakeZhihu/img/new_logo@2x.9187366b.png -------------------------------------------------------------------------------- /fakeZhihu/img/pictest.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qieguo2016/demos/751c60679c80fb3aad3ed191398d8b91c9f2cadb/fakeZhihu/img/pictest.png -------------------------------------------------------------------------------- /fakeZhihu/img/pictest001.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qieguo2016/demos/751c60679c80fb3aad3ed191398d8b91c9f2cadb/fakeZhihu/img/pictest001.png -------------------------------------------------------------------------------- /fakeZhihu/img/sprites-1.9.2.4c54885a-old.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qieguo2016/demos/751c60679c80fb3aad3ed191398d8b91c9f2cadb/fakeZhihu/img/sprites-1.9.2.4c54885a-old.png -------------------------------------------------------------------------------- /fakeZhihu/img/sprites-1.9.2.4c54885a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qieguo2016/demos/751c60679c80fb3aad3ed191398d8b91c9f2cadb/fakeZhihu/img/sprites-1.9.2.4c54885a.png -------------------------------------------------------------------------------- /fakeZhihu/img/sprites@2x.auto.1cc5b15c.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qieguo2016/demos/751c60679c80fb3aad3ed191398d8b91c9f2cadb/fakeZhihu/img/sprites@2x.auto.1cc5b15c.png -------------------------------------------------------------------------------- /fakeZhihu/img/sprites@2x.auto.40df1bd9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qieguo2016/demos/751c60679c80fb3aad3ed191398d8b91c9f2cadb/fakeZhihu/img/sprites@2x.auto.40df1bd9.png -------------------------------------------------------------------------------- /fakeZhihu/img/user_001.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qieguo2016/demos/751c60679c80fb3aad3ed191398d8b91c9f2cadb/fakeZhihu/img/user_001.jpg -------------------------------------------------------------------------------- /fakeZhihu/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Fake Zhihu 11 | 12 | 13 | 14 | 15 |
16 | 首页-知乎 17 | 21 | 22 |
23 | 24 |
25 | 42 | 49 | 80 |
81 | 82 |
83 |
84 |

最新动态

85 | 设置 86 |
87 | 88 |
89 |
90 | 来自 用户体验设计 91 | 92 |
93 |
94 |

有哪些好的网站，让人第一眼看了就怦然心动，流连忘返？

95 |
96 |
97 | 康石石 98 | ，艺术留学大拿 99 |
100 |
101 | 推荐2个，一个给人耳目一新的网站浏览体验，一个是超级实用的设计灵感来源网站I Remember一个关于回忆的网站（强烈建议，亲身体验）IntroHome page所有的光斑都是用户登录网站留下的回忆，就像浩瀚银河通过鼠标，可以在回忆的银河中穿行滚动鼠标滑轮，可以… 102 | 显示全部 103 |
104 |
105 | 869 106 | 关注问题 107 | 9 条评论 108 | • 109 | 禁止转载 110 |
111 |
112 |
113 |
114 | 115 |
116 |
117 | 来自 移动互联网产品 118 | 119 |
120 |
121 |

你的手机上有什么很有意思的 App？

122 |
123 |
124 | 互联网杨达 125 | ，APP，互联网，广告新媒体，个人微信公众号:省略一百字，更多 app 推荐请关注「***」公众号以及官网 126 |
127 |
128 | iOS里有太多愚蠢的功能设计，列举几个最典型的：1. 前置摄像头拍出的照片会自动左右颠倒大部分人脸都是左右不对称的，而我们熟悉的自己的相貌其实是镜子里左右颠倒的版本。iOS产品设计者可能觉得前置摄像头如果像镜子那样一切都是反的，该多么不严谨啊，于… 129 | 显示全部 130 |
131 |
132 | 869 133 | 关注问题 134 | 9 条评论 135 | • 136 | 禁止转载 137 |
138 |
139 |
140 |
141 | 142 |
143 |
144 | 来自 海贼王 145 | 146 |
147 |
148 |

怎么评价海贼王里的索隆？

149 |
150 |
151 | 许达 152 | ，知道多一些又不会被灭口 153 |
154 |
155 | Roronoa Zoro，草帽海贼团剑士，路飞招募的第一个船员，评价Zoro我想从以下几个方面来说。一、实力索隆作为三大主力之一，毫无疑问是草帽海贼团最重要的战斗力之一，三大主力的战斗风格分别是拳头、剑和踢技。理论上，兵刃总比拳脚厉害，所以画起索隆的实力… 156 | 显示全部 157 |
158 |
159 | 2040 160 | 关注问题 161 | 172 条评论 162 | • 163 | 作者保留权利 164 |
165 |
166 |
167 |
168 | 169 |
170 | 更多 171 |
172 | 192 |
193 | 194 |
195 |

Created By Qieguo, Under MIT License

196 |
197 | 198 |
199 |
200 |
201 | 提问 202 |
203 |
204 | 205 |
206 |
问题说明(可选)
207 | 208 |
209 |
210 |
话题分类
211 |
212 | 213 | 214 |
215 |
216 |
217 | 218 | 取消 219 | 220 |
221 |
222 |
223 |
224 | 225 |
226 | 227 | 228 |
229 | 赞同 230 | 反对 231 |
232 |
233 | 234 | 235 | 236 | 243 | 244 | -------------------------------------------------------------------------------- /fakeZhihu/js/main.js: -------------------------------------------------------------------------------- 1 | /*-----------------------------【程序说明】----------------------------- 2 | * 程序说明： FakeZhihu的交互脚本 3 | * 程序描述： 使用原生js编写的交互脚本，主要用在移动web端，这里都是一点一点拼凑的，写的非常难看。。。 4 | * 浏览器支持：Chrome、Firefox、Safari，腾讯X5（若有问题，请更新浏览器到最新版） 5 | * 2016年05月 Created by @茄果 6 | * 更多信息请关注我的博客：http://www.cnblogs.com/qieguo/ 7 | * 8 | * Licensed under the MIT，转载使用请注明出处！http://www.cnblogs.com/qieguo/ 9 | *-------------------------------------------------------------------- 10 | */ 11 | 12 | 13 | "use strict" 14 | 15 | var topSearch = document.getElementById('zd-top-search-input'); 16 | var askQuestion = document.getElementById('zd-top-ask-question'); 17 | var navMenu = document.getElementsByClassName('zh-nav-menu')[0]; 18 | var navUser = document.getElementsByClassName('zh-nav-user')[0]; 19 | var navMsg = document.getElementById('zd-nav-msg'); 20 | var navMsgSort = navMsg.getElementsByClassName('zh-nav-msg-sort')[0]; 21 | var navMsgList = navMsg.getElementsByClassName('zh-nav-msg-list')[0]; 22 | var mainCtn = document.getElementById('zd-main'); 23 | var pageMask = document.getElementById('zd-mask'); 24 | var maskAsk = document.getElementById('zd-mask-ask'); 25 | var maskVote = document.getElementById('zd-mask-vote'); 26 | 27 | var collectionsNav = mainCtn.getElementsByClassName('zh-main-tab-nav')[0]; 28 | 29 | /* ******** Header ********/ 30 | //search inputbox stretch when got focus 31 | topSearch.addEventListener('focus', function (e) { 32 | var top = document.getElementById('zd-top'); 33 | top.classList.add('searching'); 34 | //top.className = 'zh-top searching'; 35 | }); 36 | topSearch.addEventListener('blur', function (e) { 37 | var top = document.getElementById('zd-top'); 38 | top.classList.remove('searching'); 39 | //top.className = 'zh-top'; 40 | }); 41 | 42 | //modal mask appear when clicked askQuestion button 43 | askQuestion.addEventListener('click', function (e) { 44 | pageMask.className = 'zh-mask ask'; 45 | document.body.style = 'overflow: hidden;'; 46 | e.stopPropagation(); 47 | }); 48 | /* ******** Header end ********/ 49 | 50 | 51 | /* ******** Navigator ********/ 52 | navMenu.addEventListener('click', function (e) { 53 | var target = e.target; 54 | var child = this.getElementsByClassName('zh-nav-menu-li'); 55 | for (var index = 0; index < child.length; index++) { 56 | child[index].className = 'zh-nav-menu-li'; 57 | } 58 | target.parentElement.className = 'zh-nav-menu-li current'; 59 | switch (target.parentElement.id){ 60 | case 'zd-nav-menu-msg': 61 | navUser.className = 'zh-nav-user'; 62 | navMsg.classList.toggle('show'); 63 | //navMsg.className = (navMsg.className == 'zh-nav-msg') ? 'zh-nav-msg show' : 'zh-nav-msg'; 64 | break; 65 | case 'zd-nav-menu-user': 66 | navMsg.className = 'zh-nav-msg'; 67 | navUser.classList.toggle('show'); 68 | //navUser.className = (navUser.className == 'zh-nav-user') ? 'zh-nav-user show' : 'zh-nav-user'; 69 | break; 70 | default: 71 | break; 72 | } 73 | // e.preventDefault(); 74 | e.stopPropagation(); 75 | }); 76 | navMsgSort.addEventListener('click', function (e) { 77 | var target = (e.target.tagName == 'I') ? e.target : e.target.children[0]; 78 | var child = this.getElementsByClassName('nav-msg-sort'); 79 | for (var index = 0; index < child.length; index++) { 80 | child[index].className = 'nav-msg-sort'; 81 | } 82 | target.parentElement.className = 'nav-msg-sort current'; 83 | switch (target.parentElement.name){ 84 | case 'questions': 85 | navMsgList.innerHTML = '
周宁奕 回答了 能利用爬虫技术做到哪些很酷很有趣很有用的事情？
\ 86 |
周宁奕 回复了你在 能利用爬虫技术做到哪些很酷很有趣很有用的事情？ 中 周宁奕 的回答下的评论
\ 87 |
haochuan 在 _haochuan的RandomNotes 中发布了 当我们说软件工程师的时候我们在说什么
\ 88 |
康石石 回答了 有哪些好的网站，让人第一眼看了就怦然心动，流连忘返？
\ 89 |
康石石 回复了你在 有哪些好的网站，让人第一眼看了就怦然心动，流连忘返？ 中 康石石 的回答下的评论
\ 90 |
张科洋 回答了 关于 JavaScript 的好书有哪些？
'; 91 | break; 92 | case 'users': 93 | navMsgList.innerHTML = '
有人关注你时会显示在这里
'; 94 | break; 95 | case 'thanks': 96 | navMsgList.innerHTML = '
获得 1 次感谢：如何写产品交互文档，一份好的交互文档应该包括哪些方面内容？ 来自 张科洋
'; 97 | break; 98 | default: 99 | break; 100 | } 101 | // e.preventDefault(); 102 | e.stopPropagation(); 103 | }); 104 | /* ******** Navigator end ********/ 105 | 106 | 107 | /* ******** main start ********/ 108 | mainCtn.addEventListener('click', function (e) { 109 | var target = e.target; 110 | var value = target.dataset.opt; 111 | switch (value){ 112 | case 'answer-vote': 113 | pageMask.className = 'zh-mask vote'; 114 | document.body.style = 'overflow: hidden;'; 115 | e.preventDefault(); 116 | break; 117 | default: 118 | break; 119 | } 120 | e.stopPropagation(); 121 | }); 122 | /********* main end ********/ 123 | 124 | /********* pageMask start ********/ 125 | maskAsk.addEventListener('click', function (e) { 126 | var value = e.target.dataset.opt; 127 | switch (value){ 128 | case 'cancel': 129 | pageMask.className = 'zh-mask'; 130 | document.body.style = 'overflow: visible;'; 131 | break; 132 | default: 133 | break; 134 | } 135 | //e.preventDefault(); 136 | e.stopPropagation(); 137 | }); 138 | maskAsk.addEventListener('keypress', function (e) { 139 | var k = e.charCode, 140 | target = e.target; 141 | 142 | switch (k){ 143 | case 13: 144 | // press [enter] 145 | //console.log(target.style.height + " , " +target.scrollHeight); 146 | //target.style.height = target.scrollHeight; 147 | break; 148 | default: 149 | break; 150 | } 151 | //target.rows = (target.scrollHeight - 16) / 24; 152 | //console.log(target.rows + " , " + target.scrollHeight); 153 | //e.preventDefault(); 154 | e.stopPropagation(); 155 | }); 156 | 157 | 158 | maskVote.addEventListener('click', function (e) { 159 | var value = e.target.dataset.opt || e.target.parentElement.dataset.opt; 160 | var btn = this.getElementsByClassName('zh-mask-vote-btn'); 161 | function returnCurrentPage() { 162 | pageMask.className = 'zh-mask'; 163 | document.body.style = 'overflow: visible;'; 164 | } 165 | switch (value){ 166 | case 'cancel': 167 | returnCurrentPage(); 168 | break; 169 | case 'vote-approval': 170 | //这里还需要判断不同回答下的赞同和反对 171 | btn[1].classList.remove('pressed'); 172 | btn[0].classList.toggle('pressed'); 173 | setTimeout(returnCurrentPage, 1500); 174 | break; 175 | case 'vote-oppose': 176 | //这里还需要判断不同回答下的赞同和反对 177 | btn[0].classList.remove('pressed'); 178 | btn[1].classList.toggle('pressed'); 179 | setTimeout(returnCurrentPage, 1500); 180 | break; 181 | default: 182 | break; 183 | } 184 | //e.preventDefault(); 185 | e.stopPropagation(); 186 | 187 | }); 188 | 189 | /* ******** pageMask end ********/ 190 | 191 | 192 | collectionsNav.addEventListener('click',function (e) { 193 | var index, 194 | target = e.target, 195 | opt = target.dataset.opt, 196 | children = this.getElementsByTagName('li'), 197 | ctn = document.getElementsByClassName('zh-main-collections')[0]; 198 | for (index = 0; index < children.length; index++) { 199 | children[index].classList.remove('current'); 200 | } 201 | switch (opt){ 202 | case 'follow': 203 | target.classList.add('current'); 204 | ctn.innerHTML = '

  • 关注的话题

    9个答案 • 99个人关注
    • \ 205 |

  • 关注的话题

    9个答案 • 99个人关注
    • '; 206 | break; 207 | case 'creat': 208 | ctn.innerHTML = '

  • 创建的话题

    11个答案 • 111个人关注
    • \ 209 |

  • 关注的话题

    11个答案 • 111个人关注
    • '; 210 | target.classList.add('current'); 211 | break; 212 | default: 213 | break; 214 | } 215 | e.stopPropagation(); 216 | }); -------------------------------------------------------------------------------- /fakeZhihu/login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Fake-Zhihu login 12 | 13 | 14 | 15 | 43 | 44 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /fakeZhihu/topics.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Fake Zhihu 11 | 12 | 13 | 14 | 15 |
    16 | 首页-知乎 17 | 21 | 22 |
    23 | 24 |
    25 | 42 | 49 | 80 |
    81 | 82 |
    83 |
    84 |

    已关注的话题动态

    85 | 共关注10个话题设置 86 |
    87 |
    88 | 互联网 89 | 移动互联网 90 | 网页设计(Web Design) 91 | 用户体验 92 | 前端开发 93 | CSS 94 | HTML5 95 | JavaScript 96 | 程序人生 97 | 移动产品开发 98 | 展开更多... 99 |
    100 | 101 | 102 | 103 |
    104 |
    105 | 来自 用户体验设计 106 | 107 |
    108 |
    109 |

    有哪些好的网站，让人第一眼看了就怦然心动，流连忘返？

    110 |
    111 |
    112 | 康石石 113 | ，艺术留学大拿 114 |
    115 |
    116 | 推荐2个，一个给人耳目一新的网站浏览体验，一个是超级实用的设计灵感来源网站I Remember一个关于回忆的网站（强烈建议，亲身体验）IntroHome page所有的光斑都是用户登录网站留下的回忆，就像浩瀚银河通过鼠标，可以在回忆的银河中穿行滚动鼠标滑轮，可以… 117 | 显示全部 118 |
    119 |
    120 | 869 121 | 关注问题 122 | 9 条评论 123 | • 124 | 禁止转载 125 |
    126 |
    127 |
    128 |
    129 | 130 |
    131 |
    132 | 来自 移动互联网产品 133 | 134 |
    135 |
    136 |

    你的手机上有什么很有意思的 App？

    137 |
    138 |
    139 | 互联网杨达 140 | ，APP，互联网，广告新媒体，个人微信公众号:省略一百字，更多 app 推荐请关注「***」公众号以及官网 141 |
    142 |
    143 | 推荐2个，一个给人耳目一新的网站浏览体验，一个是超级实用的设计灵感来源网站I Remember一个关于回忆的网站（强烈建议，亲身体验）IntroHome page所有的光斑都是用户登录网站留下的回忆，就像浩瀚银河通过鼠标，可以在回忆的银河中穿行滚动鼠标滑轮，可以… 144 | 显示全部 145 |
    146 |
    147 | 869 148 | 关注问题 149 | 9 条评论 150 | • 151 | 禁止转载 152 |
    153 |
    154 |
    155 |
    156 | 157 |
    158 |
    159 | 来自 海贼王 160 | 161 |
    162 |
    163 |

    怎么评价海贼王里的索隆？

    164 |
    165 |
    166 | 许达 167 | ，知道多一些又不会被灭口 168 |
    169 |
    170 | Roronoa Zoro，草帽海贼团剑士，路飞招募的第一个船员，评价Zoro我想从以下几个方面来说。一、实力索隆作为三大主力之一，毫无疑问是草帽海贼团最重要的战斗力之一，三大主力的战斗风格分别是拳头、剑和踢技。理论上，兵刃总比拳脚厉害，所以画起索隆的实力… 171 | 显示全部 172 |
    173 |
    174 | 2040 175 | 关注问题 176 | 172 条评论 177 | • 178 | 作者保留权利 179 |
    180 |
    181 |
    182 |
    183 | 184 |
    185 | 更多 186 |
    187 | 207 |
    208 | 209 |
    210 |

    Created By Qieguo, Under MIT License

    211 |
    212 | 213 |
    214 |
    215 |
    216 | 提问 217 |
    218 |
    219 | 220 |
    221 |
    问题说明(可选)
    222 | 223 |
    224 |
    225 |
    话题分类
    226 |
    227 | 228 | 229 |
    230 |
    231 |
    232 | 233 | 取消 234 | 235 |
    236 |
    237 |
    238 |
    239 | 240 |
    241 | 242 | 243 |
    244 | 赞同 245 | 反对 246 |
    247 |
    248 | 249 | 250 | 251 | 259 | 260 | -------------------------------------------------------------------------------- /fakeZhihu/user.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Fake Zhihu 11 | 12 | 13 | 14 | 15 |
    16 | 首页-知乎 17 | 21 | 22 |
    23 | 24 |
    25 | 42 | 49 | 80 |
    81 | 82 |
    83 |
    84 |

    user

    85 |
    86 | 87 |
      88 |
    • 城市,行业
      • 89 |
    • 毕业学校
      • 90 |
    • 查看详细资料
      • 91 |
    92 |
    93 | 填写个人简介 94 |
    95 | 获得999赞同999感谢 96 |
    97 |
    98 |
      99 |
    • 主页
      • 100 |
    • 提问 9
      • 101 |
    • 回答 99
      • 102 |
    • 文章 999
      • 103 |
    • 收藏 999
      • 104 |
    • 公共编辑 99
      • 105 |
    106 | 107 |
    108 |

    最新动态

    109 | 设置 110 |
    111 | 112 |
    113 |
    114 | 来自 用户体验设计 115 | 116 |
    117 |
    118 |

    有哪些好的网站，让人第一眼看了就怦然心动，流连忘返？

    119 |
    120 |
    121 | 康石石 122 | ，艺术留学大拿 123 |
    124 |
    125 | 推荐2个，一个给人耳目一新的网站浏览体验，一个是超级实用的设计灵感来源网站I Remember一个关于回忆的网站（强烈建议，亲身体验）IntroHome page所有的光斑都是用户登录网站留下的回忆，就像浩瀚银河通过鼠标，可以在回忆的银河中穿行滚动鼠标滑轮，可以… 126 | 显示全部 127 |
    128 |
    129 | 869 130 | 关注问题 131 | 9 条评论 132 | • 133 | 禁止转载 134 |
    135 |
    136 |
    137 |
    138 | 139 |
    140 |
    141 | 来自 移动互联网产品 142 | 143 |
    144 |
    145 |

    你的手机上有什么很有意思的 App？

    146 |
    147 |
    148 | 互联网杨达 149 | ，APP，互联网，广告新媒体，个人微信公众号:省略一百字，更多 app 推荐请关注「***」公众号以及官网 150 |
    151 |
    152 | 推荐2个，一个给人耳目一新的网站浏览体验，一个是超级实用的设计灵感来源网站I Remember一个关于回忆的网站（强烈建议，亲身体验）IntroHome page所有的光斑都是用户登录网站留下的回忆，就像浩瀚银河通过鼠标，可以在回忆的银河中穿行滚动鼠标滑轮，可以… 153 | 显示全部 154 |
    155 |
    156 | 869 157 | 关注问题 158 | 9 条评论 159 | • 160 | 禁止转载 161 |
    162 |
    163 |
    164 |
    165 | 166 |
    167 |
    168 | 来自 海贼王 169 | 170 |
    171 |
    172 |

    怎么评价海贼王里的索隆？

    173 |
    174 |
    175 | 许达 176 | ，知道多一些又不会被灭口 177 |
    178 |
    179 | Roronoa Zoro，草帽海贼团剑士，路飞招募的第一个船员，评价Zoro我想从以下几个方面来说。一、实力索隆作为三大主力之一，毫无疑问是草帽海贼团最重要的战斗力之一，三大主力的战斗风格分别是拳头、剑和踢技。理论上，兵刃总比拳脚厉害，所以画起索隆的实力… 180 | 显示全部 181 |
    182 |
    183 | 2040 184 | 关注问题 185 | 172 条评论 186 | • 187 | 作者保留权利 188 |
    189 |
    190 |
    191 |
    192 | 193 |
    194 | 更多 195 |
    196 | 216 |
    217 | 218 |
    219 |

    Created By Qieguo, Under MIT License

    220 |
    221 | 222 |
    223 |
    224 |
    225 | 提问 226 |
    227 |
    228 | 229 |
    230 |
    问题说明(可选)
    231 | 232 |
    233 |
    234 |
    话题分类
    235 |
    236 | 237 | 238 |
    239 |
    240 |
    241 | 242 | 取消 243 | 244 |
    245 |
    246 |
    247 |
    248 | 249 |
    250 | 251 | 252 |
    253 | 赞同 254 | 反对 255 |
    256 |
    257 | 258 | 259 | 260 | 267 | 268 | -------------------------------------------------------------------------------- /hashtabel/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 利用哈希表来匹配全文关键词 10 | 15 | 16 | 17 | 18 |

    输入文件必须为纯文本文件、UTF-8编码。结果请看console输出。

    19 |
    20 | keyword: 21 |
    22 |
    23 | content: 24 |
    25 |

    测试结果：关键词300个成语，目标文本《搜神记1》，约50万字；总耗时：1.1s。

    26 | 27 | 102 | 103 | 104 | 105 | -------------------------------------------------------------------------------- /hashtabel/keywords.txt: -------------------------------------------------------------------------------- 1 | 行尸走肉、 2 | 金蝉脱壳、 3 | 百里挑一、 4 | 金玉满堂、 5 | 背水一战、 6 | 霸王别姬、 7 | 天上人间、 8 | 不吐不快、 9 | 海阔天空、 10 | 情非得已、 11 | 满腹经纶、 12 | 兵临城下、 13 | 春暖花开、 14 | 插翅难逃、 15 | 黄道吉日、 16 | 天下无双、 17 | 偷天换日、 18 | 两小无猜、 19 | 卧虎藏龙、 20 | 珠光宝气、 21 | 簪缨世族、 22 | 花花公子、 23 | 绘声绘影、 24 | 国色天香、 25 | 相亲相爱、 26 | 八仙过海、 27 | 金玉良缘、 28 | 掌上明珠、 29 | 皆大欢喜、 30 | 逍遥法外、 31 | 生财有道、 32 | 极乐世界、 33 | 情不自禁、 34 | 愚公移山、 35 | 魑魅魍魉、 36 | 龙生九子、 37 | 精卫填海、 38 | 海市蜃楼、 39 | 高山流水、 40 | 卧薪尝胆、 41 | 壮志凌云、 42 | 金枝玉叶、 43 | 四海一家、 44 | 穿针引线、 45 | 无忧无虑、 46 | 无地自容、 47 | 三位一体、 48 | 落叶归根、 49 | 相见恨晚、 50 | 惊天动地、 51 | 滔滔不绝、 52 | 相濡以沫、 53 | 长生不死、 54 | 原来如此、 55 | 女娲补天、 56 | 三皇五帝、 57 | 万箭穿心、 58 | 水木清华、 59 | 窈窕淑女、 60 | 破釜沉舟、 61 | 天涯海角、 62 | 牛郎织女、 63 | 倾国倾城、 64 | 飘飘欲仙、 65 | 福星高照、 66 | 妄自菲薄、 67 | 永无止境、 68 | 学富五车、 69 | 饮食男女、 70 | 英雄豪杰、 71 | 国士无双、 72 | 塞翁失马、 73 | 万家灯火、 74 | 石破天惊、 75 | 精忠报国、 76 | 养生之道、 77 | 覆雨翻云、 78 | 六道轮回、 79 | 鹰击长空、 80 | 日日夜夜、 81 | 厚德载物、 82 | 亡羊补牢、 83 | 万里长城、 84 | 黄金时代、 85 | 出生入死、 86 | 一路顺风、 87 | 随遇而安、 88 | 千军万马、 89 | 郑人买履、 90 | 棋逢对手、 91 | 叶公好龙、 92 | 后会无期、 93 | 守株待兔、 94 | 凤凰于飞、 95 | 一生一世、 96 | 花好月圆、 97 | 世外桃源、 98 | 韬光养晦、 99 | 画蛇添足、 100 | 青梅竹马、 101 | 风花雪月、 102 | 滥竽充数、 103 | 没完没了、 104 | 总而言之、 105 | 欣欣向荣、 106 | 时光荏苒、 107 | 差强人意、 108 | 好好先生、 109 | 无懈可击、 110 | 随波逐流、 111 | 袖手旁观、 112 | 群雄逐鹿、 113 | 血战到底、 114 | 唯我独尊、 115 | 买椟还珠、 116 | 龙马精神、 117 | 一见钟情、 118 | 喜闻乐见、 119 | 负荆请罪、 120 | 三人成虎、 121 | 河东狮吼、 122 | 程门立雪、 123 | 金戈铁马、 124 | 笑逐颜开、 125 | 千钧一发、 126 | 纸上谈兵、 127 | 风和日丽、 128 | 邯郸学步、 129 | 大器晚成、 130 | 庖丁解牛、 131 | 甜言蜜语、 132 | 雷霆万钧、 133 | 浮生若梦、 134 | 大开眼界、 135 | 汗牛充栋、 136 | 百鸟朝凤、 137 | 以德服人、 138 | 白驹过隙、 139 | 难兄难弟、 140 | 鬼哭神嚎、 141 | 声色犬马、 142 | 指鹿为马、 143 | 龙争虎斗、 144 | 雾里看花、 145 | 男大当婚、 146 | 未雨绸缪、 147 | 南辕北辙、 148 | 三从四德、 149 | 一丝不挂、 150 | 高屋建瓴、 151 | 阳春白雪、 152 | 杯弓蛇影、 153 | 闻鸡起舞、 154 | 四面楚歌、 155 | 登堂入室、 156 | 张灯结彩、 157 | 而立之年、 158 | 饮鸩止渴、 159 | 杏雨梨云、 160 | 龙凤呈祥、 161 | 勇往直前、 162 | 左道旁门、 163 | 莫衷一是、 164 | 马踏飞燕、 165 | 掩耳盗铃、 166 | 大江东去、 167 | 凿壁偷光、 168 | 色厉内荏、 169 | 花容月貌、 170 | 越俎代庖、 171 | 鳞次栉比、 172 | 美轮美奂、 173 | 缘木求鱼、 174 | 再接再厉、 175 | 马到成功、 176 | 红颜知己、 177 | 赤子之心、 178 | 迫在眉睫、 179 | 风流韵事、 180 | 相形见绌、 181 | 诸子百家、 182 | 鬼迷心窍、 183 | 星火燎原、 184 | 画地为牢、 185 | 岁寒三友、 186 | 花花世界、 187 | 纸醉金迷、 188 | 狐假虎威、 189 | 纵横捭阖、 190 | 沧海桑田、 191 | 不求甚解、 192 | 暴殄天物、 193 | 吃喝玩乐、 194 | 乐不思蜀、 195 | 身不由己、 196 | 小家碧玉、 197 | 文不加点、 198 | 天马行空、 199 | 人来人往、 200 | 千方百计、 201 | 天高地厚、 202 | 万人空巷、 203 | 争分夺秒、 204 | 如火如荼、 205 | 大智若愚、 206 | 斗转星移、 207 | 七情六欲、 208 | 大禹治水、 209 | 空穴来风、 210 | 孟母三迁、 211 | 绘声绘色、 212 | 九五之尊、 213 | 随心所欲、 214 | 干将莫邪、 215 | 相得益彰、 216 | 借刀杀人、 217 | 浪迹天涯、 218 | 刚愎自用、 219 | 镜花水月、 220 | 黔驴技穷、 221 | 肝胆相照、 222 | 多多益善、 223 | 叱咤风云、 224 | 杞人忧天、 225 | 作茧自缚、 226 | 一飞冲天、 227 | 殊途同归、 228 | 风卷残云、 229 | 因果报应、 230 | 无可厚非、 231 | 赶尽杀绝、 232 | 天长地久、 233 | 飞龙在天、 234 | 桃之夭夭、 235 | 南柯一梦、 236 | 口是心非、 237 | 江山如画、 238 | 风华正茂、 239 | 一帆风顺、 240 | 一叶知秋、 241 | 草船借箭、 242 | 铁石心肠、 243 | 望其项背、 244 | 头晕目眩、 245 | 大浪淘沙、 246 | 纵横天下、 247 | 有问必答、 248 | 无为而治、 249 | 釜底抽薪、 250 | 吹毛求疵、 251 | 好事多磨、 252 | 空谷幽兰、 253 | 悬梁刺股、 254 | 白手起家、 255 | 完璧归赵、 256 | 忍俊不禁、 257 | 沐猴而冠、 258 | 白云苍狗、 259 | 贼眉鼠眼、 260 | 围魏救赵、 261 | 烟雨蒙蒙、 262 | 炙手可热、 263 | 尸位素餐、 264 | 出水芙蓉、 265 | 礼仪之邦、 266 | 一丘之貉、 267 | 鹏程万里、 268 | 叹为观止、 269 | 韦编三绝、 270 | 今生今世、 271 | 草木皆兵、 272 | 宁缺毋滥、 273 | 回光返照、 274 | 露水夫妻、 275 | 讳莫如深、 276 | 贻笑大方、 277 | 紫气东来、 278 | 万马奔腾、 279 | 一诺千金、 280 | 老马识途、 281 | 五花大绑、 282 | 捉襟见肘、 283 | 瓜田李下、 284 | 水漫金山、 285 | 苦心孤诣、 286 | 可见一斑、 287 | 五湖四海、 288 | 虚怀若谷、 289 | 欲擒故纵、 290 | 风声鹤唳、 291 | 毛遂自荐、 292 | 蛛丝马迹、 293 | 中庸之道、 294 | 迷途知返、 295 | 自由自在、 296 | 龙飞凤舞、 297 | 树大根深、 298 | 雨过天晴、 299 | 乘风破浪、 300 | 筚路蓝缕 -------------------------------------------------------------------------------- /hashtabel/search.js: -------------------------------------------------------------------------------- 1 | // tree结构，也是利用哈希表快速查找 2 | function keywordSearch() { 3 | 4 | "use strict"; 5 | var tblRoot; 6 | 7 | function buildTree(keywords) { 8 | var tblCur = {}, 9 | key, 10 | str_key, 11 | Length, 12 | j, 13 | i; 14 | 15 | tblRoot = tblCur; 16 | var couter = new Date(); 17 | 18 | for(j = keywords.length - 1; j >= 0; j -= 1) { 19 | str_key = keywords[j]; 20 | Length = str_key.length; 21 | for(i = 0; i < Length; i += 1) { 22 | key = str_key.charAt(i); 23 | if(tblCur.hasOwnProperty(key)) { //生成子节点 24 | tblCur = tblCur[key]; 25 | } else { 26 | tblCur = tblCur[key] = {}; 27 | } 28 | } 29 | tblCur.end = true; //最后一个关键字没有分割符 30 | tblCur = tblRoot; 31 | } 32 | console.log("Time cost to build tree: " + (new Date() - couter) + "mm"); 33 | } 34 | 35 | function search(content) { 36 | var tblCur, 37 | p_star = 0, 38 | n = content.length, 39 | p_end, 40 | match, //是否找到匹配 41 | match_key, 42 | match_str, 43 | arrMatch = [], //存储结果 44 | arrLength = 0; //arrMatch的长度索引 45 | var couter = new Date(); 46 | 47 | while(p_star < n) { 48 | tblCur = tblRoot; //回溯至根部 49 | p_end = p_star; 50 | match_str = ""; 51 | match = false; 52 | do { 53 | match_key = content.charAt(p_end); 54 | //本次匹配结束 55 | if(!(tblCur = tblCur[match_key])) { 56 | p_star += 1; 57 | break; 58 | } else { 59 | match_str += match_key; 60 | } 61 | p_end += 1; 62 | //是否匹配到尾部 //找到匹配关键字 63 | if(tblCur.end) { 64 | match = true; 65 | } 66 | } while (true); 67 | //最大匹配 68 | if(match) { //增强可读性 69 | arrMatch[arrLength] = { 70 | key: match_str, 71 | begin: p_star - 1, 72 | end: p_end 73 | }; 74 | arrLength += 1; 75 | p_star = p_end; 76 | } 77 | } 78 | console.log("Time cost to search keywords: " + (new Date() - couter) + "mm"); 79 | return arrMatch; 80 | } 81 | 82 | this.init = function(keywords) { 83 | if(Object.prototype.toString.call(keywords) !== '[object Array]') { 84 | console.log(Object.prototype.toString.call(keywords)); 85 | throw new Error('check input!'); 86 | } 87 | buildTree(keywords); 88 | return this; 89 | }; 90 | 91 | this.search = function(content) { 92 | if(typeof(content) !== "string") { 93 | console.log(typeof(content)); 94 | throw new Error('check input!'); 95 | } 96 | return search(content); 97 | }; 98 | 99 | }; -------------------------------------------------------------------------------- /heal/heal.css: -------------------------------------------------------------------------------- 1 | /* common CSS start */ 2 | 3 | html { 4 | -ms-text-size-adjust: 100%; 5 | -webkit-text-size-adjust: 100%; 6 | } 7 | 8 | body { 9 | line-height: 1.6; 10 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 11 | -webkit-font-smoothing: antialiased; 12 | } 13 | 14 | body, 15 | h1, 16 | h2, 17 | h3, 18 | h4, 19 | h5, 20 | h6, 21 | p, 22 | ol, 23 | ul, 24 | li { 25 | margin: 0; 26 | padding: 0; 27 | } 28 | 29 | li { 30 | list-style-type: none; 31 | } 32 | 33 | a img { 34 | border: 0; 35 | } 36 | 37 | a { 38 | text-decoration: none; 39 | } 40 | 41 | 42 | /* common CSS end */ 43 | 44 | .main-ls { 45 | margin: 15px 0; 46 | } 47 | 48 | .wrp { 49 | box-sizing: border-box; 50 | margin: 0 15px; 51 | display: inline-block; 52 | border: 1px solid black; 53 | } 54 | 55 | canvas { 56 | box-sizing: border-box; 57 | border: 1px solid hsl(0, 100%, 50%); 58 | } -------------------------------------------------------------------------------- /heal/heal.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 密集恐惧症患者福音 10 | 11 | 12 | 13 | 14 |
      15 |
    • 16 |
    • 17 |
    • 18 |
    19 | 20 | 21 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /heal/lib/cubes.js: -------------------------------------------------------------------------------- 1 | // fill with cubes 2 | 3 | define(function() { 4 | var module = {}; 5 | var tileSize; 6 | var tiles = []; 7 | var canvas; 8 | var ctx; 9 | var cycler = 0; 10 | var gr = 0.618; // golden ratio 11 | var cnt = null; 12 | 13 | function Cube(sides, x, y, freq, tileSize, ctx) { 14 | this.sides = sides; 15 | this.tileSize = tileSize; 16 | this.ctx = ctx; 17 | this.x = x; 18 | this.y = y; 19 | this.freq = freq; 20 | // calculate the vertices of the polygon 21 | this.vertices = []; 22 | for (var i = 1; i <= this.sides; i += 1) { 23 | x = this.x + this.tileSize * Math.cos(i * 2 * Math.PI / this.sides + Math.PI / 6); 24 | y = this.y + this.tileSize * Math.sin(i * 2 * Math.PI / this.sides + Math.PI / 6); 25 | this.vertices.push([x, y]); 26 | } 27 | } 28 | 29 | Cube.prototype.drawPolygon = function() { 30 | this.ctx.beginPath(); 31 | this.ctx.moveTo(this.x + this.tileSize * Math.cos(0 + Math.PI / 6), this.y + this.tileSize * Math.sin(0 + Math.PI / 6)); 32 | 33 | // draw the polygon 34 | for (var i = 0; i <= this.sides - 1; i += 1) { 35 | this.ctx.lineTo(this.vertices[i][0], this.vertices[i][1]); 36 | } 37 | this.ctx.closePath(); 38 | var freq = this.freq; 39 | var r = Math.round(Math.sin(cycler * freq * gr + 1) * 127) + 128; 40 | var g = Math.round(Math.sin(cycler * freq * gr + 2) * 127) + 128; 41 | var b = Math.round(Math.sin(cycler * freq * gr + 4) * 127) + 128; 42 | 43 | this.ctx.fillStyle = "rgb(" + r + ", " + g + ", " + b + ")"; 44 | this.ctx.strokeStyle = "black"; 45 | this.ctx.lineWidth = 1; 46 | this.ctx.stroke(); 47 | this.ctx.fill(); 48 | 49 | // draw a face of the cube 50 | this.ctx.beginPath(); 51 | this.ctx.moveTo(this.x, this.y); 52 | this.ctx.lineTo(this.vertices[0][0], this.vertices[0][1]); 53 | this.ctx.lineTo(this.vertices[1][0], this.vertices[1][1]); 54 | this.ctx.lineTo(this.vertices[2][0], this.vertices[2][1]); 55 | this.ctx.closePath(); 56 | this.ctx.fillStyle = "rgba(0,0,0,0.1)"; 57 | this.ctx.fill(); 58 | 59 | // draw another face of the cube 60 | this.ctx.beginPath(); 61 | this.ctx.moveTo(this.x, this.y); 62 | this.ctx.lineTo(this.vertices[4][0], this.vertices[4][1]); 63 | this.ctx.lineTo(this.vertices[5][0], this.vertices[5][1]); 64 | this.ctx.lineTo(this.vertices[0][0], this.vertices[0][1]); 65 | this.ctx.closePath(); 66 | this.ctx.fillStyle = "rgba(0,0,0,0.35)"; 67 | this.ctx.fill(); 68 | }; 69 | 70 | module.makePolygonArray = function() { 71 | tiles = []; 72 | var canvasWidth = canvas.width; 73 | var canvasHeight = canvas.height; 74 | var xStep = Math.round(Math.cos(Math.PI / 6) * tileSize * 2); 75 | var yStep = Math.round(Math.cos(Math.PI / 3) * tileSize + tileSize); 76 | var xCoord = -xStep; 77 | var yCoord = 0; 78 | while (yCoord < canvasHeight + yStep) { 79 | if (xCoord > canvasWidth) { 80 | xCoord = (xCoord % xStep === 0) ? xStep / 2 : 0; 81 | yCoord += yStep; 82 | } else { 83 | xCoord += xStep; 84 | } 85 | var freq = Math.random(); 86 | tiles.push(new Cube(6, xCoord, yCoord, freq, tileSize, ctx)); 87 | } 88 | }; 89 | 90 | module.resize = function() { 91 | canvas.width = cnt.clientWidth; 92 | canvas.height = cnt.clientHeight;; 93 | 94 | module.makePolygonArray(); 95 | }; 96 | 97 | module.init = function(option) { 98 | 99 | 100 | var num = option.num || 10, 101 | height, width; 102 | 103 | cnt = option.cnt; 104 | height = cnt.clientHeight; 105 | width = cnt.clientWidth; 106 | 107 | canvas = document.createElement('canvas'); 108 | canvas.width = width; 109 | canvas.height = height; 110 | cnt.appendChild(canvas); 111 | ctx = canvas.getContext("2d"); 112 | tileSize = width / num; 113 | 114 | module.makePolygonArray(); 115 | module.draw(); 116 | }; 117 | 118 | module.draw = function() { 119 | tiles.forEach(function(tile) { 120 | tile.drawPolygon(); 121 | }); 122 | cycler += 0.05; 123 | requestAnimationFrame(module.draw); 124 | }; 125 | 126 | return module; 127 | 128 | }); 129 | -------------------------------------------------------------------------------- /heal/lib/hexagons.js: -------------------------------------------------------------------------------- 1 | // fill with hexagons 2 | 3 | define(function() {　　　 4 | var module = {}; 5 | var tileSize; 6 | var tiles = []; 7 | var canvas; 8 | var ctx; 9 | var cycler = 0; 10 | var gr = 0.618; // golden ratio 11 | var cnt = null; 12 | 13 | function Polygon(sides, x, y, freq, tileSize, ctx) { 14 | this.sides = sides; 15 | this.tileSize = tileSize; 16 | this.ctx = ctx; 17 | this.x = x; 18 | this.y = y; 19 | this.freq = freq; 20 | } 21 | 22 | Polygon.prototype.drawPolygon = function() { 23 | this.ctx.beginPath(); 24 | this.ctx.moveTo(this.x + this.tileSize * Math.cos(0 + Math.PI / 6), this.y + this.tileSize * Math.sin(0 + Math.PI / 6)); 25 | 26 | for (var i = 1; i <= this.sides; i += 1) { 27 | var x = this.x + this.tileSize * Math.cos(i * 2 * Math.PI / this.sides + Math.PI / 6); 28 | var y = this.y + this.tileSize * Math.sin(i * 2 * Math.PI / this.sides + Math.PI / 6); 29 | this.ctx.lineTo(x, y); 30 | //console.log("x: " + x + ", y: " + y); 31 | } 32 | var freq = this.freq; 33 | var r = Math.round(Math.sin(cycler * freq * gr + 1) * 127) + 128; 34 | var g = Math.round(Math.sin(cycler * freq * gr + 2) * 127) + 128; 35 | var b = Math.round(Math.sin(cycler * freq * gr + 4) * 127) + 128; 36 | 37 | this.ctx.fillStyle = "rgb(" + r + ", " + g + ", " + b + ")"; 38 | this.ctx.strokeStyle = "black"; 39 | this.ctx.lineWidth = 1; 40 | this.ctx.fill(); 41 | this.ctx.stroke(); 42 | }; 43 | 44 | module.makePolygonArray = function() { 45 | tiles = []; 46 | var canvasWidth = canvas.width; 47 | var canvasHeight = canvas.height; 48 | var xStep = Math.round(Math.cos(Math.PI / 6) * tileSize * 2); 49 | var yStep = Math.round(Math.cos(Math.PI / 3) * tileSize + tileSize); 50 | var xCoord = -xStep; 51 | var yCoord = 0; 52 | while (yCoord < canvasHeight + yStep) { 53 | if (xCoord > canvasWidth) { 54 | xCoord = (xCoord % xStep === 0) ? xStep / 2 : 0; 55 | yCoord += yStep; 56 | } else { 57 | xCoord += xStep; 58 | } 59 | var freq = Math.random(); 60 | tiles.push(new Polygon(6, xCoord, yCoord, freq, tileSize, ctx)); 61 | } 62 | }; 63 | 64 | module.resize = function() { 65 | canvas.width = cnt.clientWidth; 66 | canvas.height = cnt.clientHeight; 67 | 68 | module.makePolygonArray(); 69 | }; 70 | 71 | module.init = function(option) { 72 | 73 | var num = option.num || 10, 74 | height, width; 75 | 76 | cnt = option.cnt; 77 | height = cnt.clientHeight; 78 | width = cnt.clientWidth; 79 | 80 | canvas = document.createElement('canvas'); 81 | canvas.width = width; 82 | canvas.height = height; 83 | cnt.appendChild(canvas); 84 | ctx = canvas.getContext("2d"); 85 | tileSize = width / num; 86 | 87 | this.makePolygonArray(); 88 | this.draw(); 89 | }; 90 | 91 | module.draw = function() { 92 | tiles.forEach(function(tile) { 93 | tile.drawPolygon(); 94 | }); 95 | cycler += 0.05; 96 | requestAnimationFrame(module.draw); 97 | }; 98 | 99 | return module; 100 | }); 101 | -------------------------------------------------------------------------------- /heal/lib/rectangle.js: -------------------------------------------------------------------------------- 1 | // fill with rectangles 2 | 　　 3 | define(function() {　　　　 4 | 5 | var module = {}; 6 | var tileSize; 7 | var numBlocks; 8 | var tiles = []; 9 | var canvas; 10 | var ctx; 11 | var cycler = 0; 12 | var gr = 0.618; // golden ratio 13 | var cnt = null; 14 | 15 | function Tile(x, y, freq, tileSize, ctx) { 16 | this.tileSize = tileSize; 17 | this.ctx = ctx; 18 | this.x = x; 19 | this.y = y; 20 | this.freq = freq; 21 | } 22 | Tile.prototype.drawTile = function() { 23 | var freq = this.freq; 24 | var r = Math.round(Math.sin(cycler * freq * gr) * 127) + 128; 25 | var g = Math.round(Math.sin(cycler * freq * gr + 2) * 127) + 128; 26 | var b = Math.round(Math.sin(cycler * freq * gr + 4) * 127) + 128; 27 | this.ctx.fillStyle = "rgb(" + r + ", " + g + ", " + b + ")"; 28 | 29 | // var h = Math.round(cycler * freq * gr * 127), 30 | // s = '100%', 31 | // l = '50%'; 32 | //this.ctx.fillStyle = "hsla(" + h + ", " + s + ", " + l + ", 1)"; 33 | 34 | this.ctx.fillRect(this.x, this.y, this.tileSize, this.tileSize); 35 | }; 36 | 37 | module.init = function(option) { 38 | 39 | var num = option.num || 10, 40 | height, width; 41 | 42 | cnt = option.cnt; 43 | height = cnt.clientHeight; 44 | width = cnt.clientWidth; 45 | 46 | canvas = document.createElement('canvas'); 47 | canvas.width = width; 48 | canvas.height = height; 49 | cnt.appendChild(canvas); 50 | ctx = canvas.getContext("2d"); 51 | 52 | tileSize = width / num; 53 | 54 | numBlocks = (width * height) / (tileSize * tileSize); 55 | for (var x = 0; x < numBlocks; x += 1) { 56 | var xCoord = (x * tileSize) % width; 57 | var yCoord = Math.floor(x / (width / tileSize)) * tileSize; 58 | var freq = Math.random(); 59 | tiles.push(new Tile(xCoord, yCoord, freq, tileSize, ctx)); 60 | } 61 | }; 62 | 63 | module.draw = function() { 64 | tiles.forEach(function(tile) { 65 | tile.drawTile(); 66 | }); 67 | cycler += 0.05; 68 | requestAnimationFrame(module.draw); 69 | }; 70 | 71 | return module; 72 | 73 | }); -------------------------------------------------------------------------------- /index.css: -------------------------------------------------------------------------------- 1 | ul { 2 | border-bottom: 1px solid #ccc; 3 | padding-bottom: 10px; 4 | } 5 | 6 | li { 7 | display: inline-block; 8 | width: 100px; 9 | vertical-align: middle; 10 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |
      12 |
    • 2016-01-01
      • 13 |
    • ￥160
      • 14 |
    • 路旗舰店陕西南路旗舰店
      • 15 |
    • 夏款牛仔裤男
      • 16 |
    17 |
      18 |
    • 2016-01-01
      • 19 |
    • ￥160
      • 20 |
    • 陕西南路旗舰店
      • 21 |
    • 夏款牛仔裤男
      • 22 |
    23 |
      24 |
    • 2016-01-01
      • 25 |
    • ￥160
      • 26 |
    • 陕西南路旗舰店
      • 27 |
    • 夏款牛仔裤男
      • 28 |
    29 |
      30 |
    • 2016-01-01
      • 31 |
    • ￥160
      • 32 |
    • 上海市XXXX路XX大道XXXX广场店
      • 33 |
    • 夏款牛仔裤男
      • 34 |
    35 | 36 | 37 | -------------------------------------------------------------------------------- /license: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 qieguo 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /lottery/img/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qieguo2016/demos/751c60679c80fb3aad3ed191398d8b91c9f2cadb/lottery/img/1.png -------------------------------------------------------------------------------- /lottery/img/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qieguo2016/demos/751c60679c80fb3aad3ed191398d8b91c9f2cadb/lottery/img/2.png -------------------------------------------------------------------------------- /lottery/img/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qieguo2016/demos/751c60679c80fb3aad3ed191398d8b91c9f2cadb/lottery/img/3.png -------------------------------------------------------------------------------- /lottery/img/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qieguo2016/demos/751c60679c80fb3aad3ed191398d8b91c9f2cadb/lottery/img/4.png -------------------------------------------------------------------------------- /lottery/img/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qieguo2016/demos/751c60679c80fb3aad3ed191398d8b91c9f2cadb/lottery/img/5.png -------------------------------------------------------------------------------- /lottery/img/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qieguo2016/demos/751c60679c80fb3aad3ed191398d8b91c9f2cadb/lottery/img/6.png -------------------------------------------------------------------------------- /lottery/img/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qieguo2016/demos/751c60679c80fb3aad3ed191398d8b91c9f2cadb/lottery/img/7.png -------------------------------------------------------------------------------- /lottery/img/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qieguo2016/demos/751c60679c80fb3aad3ed191398d8b91c9f2cadb/lottery/img/8.png -------------------------------------------------------------------------------- /lottery/img/arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qieguo2016/demos/751c60679c80fb3aad3ed191398d8b91c9f2cadb/lottery/img/arrow.png -------------------------------------------------------------------------------- /lottery/img/bg-dither-boom.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qieguo2016/demos/751c60679c80fb3aad3ed191398d8b91c9f2cadb/lottery/img/bg-dither-boom.gif -------------------------------------------------------------------------------- /lottery/img/bg-dither.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qieguo2016/demos/751c60679c80fb3aad3ed191398d8b91c9f2cadb/lottery/img/bg-dither.gif -------------------------------------------------------------------------------- /lottery/img/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qieguo2016/demos/751c60679c80fb3aad3ed191398d8b91c9f2cadb/lottery/img/bg.jpg -------------------------------------------------------------------------------- /lottery/img/buttons_01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qieguo2016/demos/751c60679c80fb3aad3ed191398d8b91c9f2cadb/lottery/img/buttons_01.png -------------------------------------------------------------------------------- /lottery/img/disc-bg.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qieguo2016/demos/751c60679c80fb3aad3ed191398d8b91c9f2cadb/lottery/img/disc-bg.gif -------------------------------------------------------------------------------- /lottery/img/disc-rotate.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qieguo2016/demos/751c60679c80fb3aad3ed191398d8b91c9f2cadb/lottery/img/disc-rotate.gif -------------------------------------------------------------------------------- /lottery/lottery_01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 转盘抽奖——触屏滑动 6 | 7 | 64 | 65 | 66 |
    67 | 68 |
    69 |
    70 |
    71 | 跑马灯抽奖 72 | 73 | 92 | 93 | 193 | 194 | 195 | -------------------------------------------------------------------------------- /lottery/lottery_02.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 跑马灯抽奖 6 | 7 | 50 | 51 | 52 |
    53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 |
    76 |
    77 | 转盘抽奖 78 | 79 | 98 | 99 | 184 | 185 | 186 | -------------------------------------------------------------------------------- /particlesLoader/js/loader.js: -------------------------------------------------------------------------------- 1 | "use strict" 2 | 3 | var lightLoader = function(c, cw, ch){ 4 | 5 | var that = this; 6 | this.c = c; 7 | this.ctx = c.getContext('2d'); 8 | this.cw = cw; 9 | this.ch = ch; 10 | this.raf = null; 11 | 12 | this.loaded = 0; 13 | this.loaderSpeed = .6; 14 | this.loaderWidth = this.cw * 0.9; 15 | this.loaderHeight = this.ch * 0.1; 16 | this.loader = { 17 | x: (this.cw/2) - (this.loaderWidth/2), 18 | y: (this.ch/2) - (this.loaderHeight/2) 19 | }; 20 | this.particles = []; 21 | this.particleLift = 220; 22 | this.hueStart = 0 23 | this.hueEnd = 120; 24 | this.hue = 0; 25 | this.gravity = .15; 26 | this.particleRate = 4; 27 | 28 | /*========================================================*/ 29 | /* Initialize 30 | /*========================================================*/ 31 | this.init = function(){ 32 | this.loaded = 0; 33 | this.particles = []; 34 | this.loop(); 35 | }; 36 | 37 | /*========================================================*/ 38 | /* Utility Functions 39 | /*========================================================*/ 40 | this.rand = function(rMi, rMa){return ~~((Math.random()*(rMa-rMi+1))+rMi);}; 41 | this.hitTest = function(x1, y1, w1, h1, x2, y2, w2, h2){return !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 < y1);}; 42 | 43 | /*========================================================*/ 44 | /* Update Loader 45 | /*========================================================*/ 46 | this.updateLoader = function(){ 47 | if(this.loaded < 100){ 48 | this.loaded += this.loaderSpeed; 49 | } else { 50 | this.loaded = 0; 51 | } 52 | }; 53 | 54 | /*========================================================*/ 55 | /* Render Loader 56 | /*========================================================*/ 57 | this.renderLoader = function(){ 58 | this.ctx.fillStyle = '#000'; 59 | this.ctx.fillRect(this.loader.x, this.loader.y, this.loaderWidth, this.loaderHeight); 60 | 61 | this.hue = this.hueStart + (this.loaded/100)*(this.hueEnd - this.hueStart); 62 | 63 | var newWidth = (this.loaded/100)*this.loaderWidth; 64 | this.ctx.fillStyle = 'hsla('+this.hue+', 100%, 40%, 1)'; 65 | this.ctx.fillRect(this.loader.x, this.loader.y, newWidth, this.loaderHeight); 66 | 67 | this.ctx.fillStyle = '#222'; 68 | this.ctx.fillRect(this.loader.x, this.loader.y, newWidth, this.loaderHeight/2); 69 | }; 70 | 71 | /*========================================================*/ 72 | /* Particles 73 | /*========================================================*/ 74 | this.Particle = function(){ 75 | this.x = that.loader.x + ((that.loaded/100)*that.loaderWidth) - that.rand(0, 1); 76 | this.y = that.ch/2 + that.rand(0,that.loaderHeight)-that.loaderHeight/2; 77 | this.vx = (that.rand(0,4)-2)/100; 78 | this.vy = (that.rand(0,that.particleLift)-that.particleLift*2)/100; 79 | this.width = that.rand(2,6)/2; 80 | this.height = that.rand(2,6)/2; 81 | this.hue = that.hue; 82 | }; 83 | 84 | this.Particle.prototype.update = function(i){ 85 | this.vx += (that.rand(0,6)-3)/100; 86 | this.vy += that.gravity; 87 | this.x += this.vx; 88 | this.y += this.vy; 89 | 90 | if(this.y > that.ch){ 91 | that.particles.splice(i, 1); 92 | } 93 | }; 94 | 95 | this.Particle.prototype.render = function(){ 96 | that.ctx.fillStyle = 'hsla('+this.hue+', 100%, '+that.rand(50,70)+'%, '+that.rand(20,100)/100+')'; 97 | that.ctx.fillRect(this.x, this.y, this.width, this.height); 98 | }; 99 | 100 | this.createParticles = function(){ 101 | var i = this.particleRate; 102 | while(i--){ 103 | this.particles.push(new this.Particle()); 104 | }; 105 | }; 106 | 107 | this.updateParticles = function(){ 108 | var i = this.particles.length; 109 | while(i--){ 110 | var p = this.particles[i]; 111 | p.update(i); 112 | }; 113 | }; 114 | 115 | this.renderParticles = function(){ 116 | var i = this.particles.length; 117 | while(i--){ 118 | var p = this.particles[i]; 119 | p.render(); 120 | }; 121 | }; 122 | 123 | 124 | /*========================================================*/ 125 | /* Clear Canvas 126 | /*========================================================*/ 127 | this.clearCanvas = function(){ 128 | this.ctx.globalCompositeOperation = 'source-over'; 129 | this.ctx.clearRect(0,0,this.cw,this.ch); 130 | this.ctx.globalCompositeOperation = 'lighter'; 131 | }; 132 | 133 | /*========================================================*/ 134 | /* Animation Loop 135 | /*========================================================*/ 136 | this.loop = function(){ 137 | var loopIt = function(){ 138 | that.raf = requestAnimationFrame(loopIt); 139 | that.clearCanvas(); 140 | 141 | that.createParticles(); 142 | 143 | that.updateLoader(); 144 | that.updateParticles(); 145 | 146 | that.renderLoader(); 147 | that.renderParticles(); 148 | 149 | }; 150 | loopIt(); 151 | }; 152 | 153 | 154 | this.stop = function(){ 155 | window.cancelAnimationFrame(this.raf); 156 | this.clearCanvas(); 157 | } 158 | 159 | }; 160 | 161 | 162 | /*========================================================*/ 163 | /* Setup requestAnimationFrame when it is unavailable. 164 | /*========================================================*/ 165 | var setupRAF = function(){ 166 | var lastTime = 0; 167 | var vendors = ['ms', 'moz', 'webkit', 'o']; 168 | for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x){ 169 | window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; 170 | window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame']; 171 | }; 172 | 173 | if(!window.requestAnimationFrame){ 174 | window.requestAnimationFrame = function(callback, element){ 175 | var currTime = new Date().getTime(); 176 | var timeToCall = Math.max(0, 16 - (currTime - lastTime)); 177 | var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); 178 | lastTime = currTime + timeToCall; 179 | return id; 180 | }; 181 | }; 182 | 183 | if (!window.cancelAnimationFrame){ 184 | window.cancelAnimationFrame = function(id){ 185 | clearTimeout(id); 186 | }; 187 | }; 188 | }; -------------------------------------------------------------------------------- /particlesLoader/particlesLoader.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 超炫的粒子效果进度条 6 | 14 | 15 | 16 | 17 | 18 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /rippleEffect/ripple.css: -------------------------------------------------------------------------------- 1 | .wrp { 2 | width: 180px; 3 | margin: 70px 10px 30px 30px; 4 | position: relative; 5 | overflow: hidden; 6 | } 7 | 8 | .bgc { 9 | position: absolute; 10 | /* left: 50%; */ 11 | transform: translate(-50%, -50%); 12 | /* top: 50%; */ 13 | background-color: rgba(97, 97, 97, 0.5); 14 | border-radius: 50%; 15 | transition: all 3s; 16 | /* width: 360px; */ 17 | /* height: 360px; */ 18 | } 19 | 20 | .ripple { 21 | width: 180px; 22 | height: 120px; 23 | background-color: rgba(255, 255, 255, 1); 24 | outline: none; 25 | border: 1px solid #333; 26 | } -------------------------------------------------------------------------------- /rippleEffect/ripple.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Ripple Effect of Google Material Design 7 | 8 | 9 | 10 | 11 |
    12 |
    13 | 14 |
    15 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /somecode.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 杂七杂八的东西 7 | 8 | 9 | 10 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /svg/svg.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /template/index.css: -------------------------------------------------------------------------------- 1 | .cmts { 2 | list-style-position: inside; 3 | padding: 0; 4 | } 5 | 6 | .cmt_li { 7 | border-bottom: 1px solid #ccc; 8 | padding: 5px 0 5px 5px; 9 | list-style-type: circle; 10 | } 11 | 12 | .cmt_author { 13 | display: inline-block; 14 | width: 150px; 15 | vertical-align: middle; 16 | } 17 | 18 | .cmt_id { 19 | display: inline-block; 20 | width: 100px; 21 | vertical-align: middle; 22 | } 23 | 24 | .cmt_text { 25 | display: inline-block; 26 | width: calc(100% - 150px - 100px - 30px); 27 | vertical-align: middle; 28 | -------------------------------------------------------------------------------- /template/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 模板技术原型 10 | 11 | 12 | 13 | 14 | 15 | 22 | 23 |
    24 | 25 |
    26 | 27 | 60 | 61 | 62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /template/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * method 1 写死的字符替换，复用性为0 3 | */ 4 | var dataset = [{ 5 | author: "Pete Hunt", 6 | id: 10000, 7 | text: "This is one comment" 8 | }, { 9 | author: "张三", 10 | id: 10001, 11 | text: "我就静静看着，不说话" 12 | }, { 13 | author: "Jordan Walke", 14 | id: 10002, 15 | text: "This is another comment" 16 | }]; 17 | 18 | var template = '
    • '; 19 | 20 | function addItem(cnt, dataset) { 21 | // cnt，data的预处理，此处省略 22 | var temp = ''; 23 | dataset.forEach(function(data) { 24 | temp += '
  • ' + data.author + '' + data.id + '' + data.text + '
    • ' 25 | }) 26 | cnt.innerHTML = temp; 27 | } 28 | 29 | addItem(document.querySelector('.cmts'), dataset); 30 | 31 | /** 32 | * method 2 正则匹配，可内嵌js代码 33 | * 原理： 34 | * 1、收集字符串中的js代码（<%、%>之间的代码），将js代码放入字符串中，通过new function('arg', 'function body')创建函数。 35 | * 2、不是js的代码当做字符串按照当前位置嵌入到js代码中，生成的js代码操作这些字符串拼接成最终的输出。 36 | * 缺点：js与html代码互相嵌套，逻辑混乱容易出错。如果js不操作html代码可能会好一点。 37 | */ 38 | var TemplateEngine = function(html, options) { 39 | var re = /<%([^%>]+)?%>/g, 40 | reExp = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g, 41 | code = 'var r=[];\n', 42 | cursor = 0; 43 | var add = function(line, js) { 44 | js ? (code += line.match(reExp) ? line + '\n' : 'r.push(' + line + ');\n') : 45 | (code += line != '' ? 'r.push("' + line.replace(/"/g, '\\"') + '");\n' : ''); 46 | return add; 47 | } 48 | while(match = re.exec(html)) { 49 | add(html.slice(cursor, match.index))(match[1], true); 50 | cursor = match.index + match[0].length; 51 | } 52 | add(html.substr(cursor, html.length - cursor)); 53 | code += 'return r.join("");'; 54 | return new Function(code.replace(/[\r\t\n]/g, '')).apply(options); 55 | } 56 | var template = 57 | 'My skills:' + 58 | '<%for(var index in this.skills) {%>' + 59 | '<%this.skills[index]%>' + 60 | '<%}%>'; 61 | 62 | /*** 63 | * 上述例子后面生成的函数为： 64 | * return 65 | * 'My skills:' + 66 | * for(var index in this.skills){ 67 | * this.skills[index] 68 | * } 69 | */ 70 | 71 | console.log(TemplateEngine(template, { 72 | skills: ["js", "html", "css"] 73 | })); -------------------------------------------------------------------------------- /template/widget/list.html: -------------------------------------------------------------------------------- 1 |
  • 2 | {cmt_author} 3 | {cmt_id} 4 | {cmt_id} 5 |
    • -------------------------------------------------------------------------------- /wxShake/css/index.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | width: 100%; 4 | height: 100%; 5 | margin: 0; 6 | } 7 | 8 | .bodymask { 9 | position: fixed; 10 | z-index: 999; 11 | width: 100%; 12 | height: 100%; 13 | text-align: center; 14 | background: transparent; 15 | color: hsl(120, 100%, 65%); 16 | } 17 | 18 | .shake-box { 19 | width : 100%; 20 | height : 100%; 21 | 22 | display: -webkit-box; 23 | -webkit-box-orient: vertical; 24 | -webkit-box-pack: center; 25 | -webkit-box-align: center; 26 | 27 | display: -webkit-flex; 28 | display: flex; 29 | flex-direction: column; 30 | -webkit-justify-content: center; 31 | justify-content: center; 32 | -webkit-align-items: center; 33 | align-items: center; 34 | 35 | background: url(../source/shakBox.png) no-repeat #292C2D center center; 36 | background-size: 225px 254px; 37 | } 38 | 39 | .shake-backimage { 40 | box-sizing: border-box; 41 | width: 100%; 42 | height: 0; 43 | 44 | -webkit-box-flex: 0; 45 | flex: 0 0 auto; 46 | text-align: center; 47 | background-color: #282E2C; 48 | border: none; 49 | border-color: #474A50; 50 | border-style: solid; 51 | border-width: 0; 52 | /*-webkit-transition: all 0.5s; 53 | transition: all 0.5s; effect of transision is not good */ 54 | } 55 | 56 | .shake-backimage img { 57 | width: auto; 58 | height: 100%; 59 | } 60 | 61 | .shake-upside { 62 | height: 100px; 63 | width: 100%; 64 | flex: 1 1 auto; 65 | 66 | -webkit-box-flex: 1.0; 67 | display: -webkit-box; 68 | -webkit-box-orient: vertical; 69 | -webkit-box-pack: end; 70 | -webkit-box-align: stretch; 71 | 72 | display: -webkit-flex; 73 | display: flex; 74 | flex-flow: column nowrap; 75 | -webkit-justify-content: flex-end; 76 | justify-content: flex-end; 77 | -webkit-align-items: stretch; 78 | align-items: stretch; 79 | 80 | background-color: #292C2D; 81 | } 82 | .shake-upside-inner { 83 | box-sizing: border-box; 84 | height: 111px; 85 | -webkit-box-flex: 0; 86 | flex: 0 0 111px; 87 | 88 | background: url(../source/shakBox.png) no-repeat #292C2D; 89 | background-size: 225px 254px; 90 | background-position: center -20px; 91 | background-origin: content-box; 92 | } 93 | 94 | .shake-downside { 95 | box-sizing: border-box; 96 | width: 100%; 97 | height: 100px; 98 | -webkit-box-flex: 1; 99 | flex: 1 1 auto; 100 | 101 | background: url(../source/shakBox.png) no-repeat #292C2D; 102 | background-position: center -130px; 103 | background-size: 225px 254px; 104 | } 105 | 106 | .shaking .shake-backimage { 107 | -webkit-animation: onshaking 2s ease 2 alternate; /* Safari Chrome and X5 */ 108 | animation: onshaking 2000ms cubic-bezier(0.57, 0.02, 0.12, 0.95) 2 alternate; 109 | } 110 | 111 | 112 | @-webkit-keyframes onshaking { /* Safari Chrome and X5 */ 113 | 0% {height: 0; border-width: 0;} 114 | 5% {height: 0; border-width: 5px 0; } 115 | 50% {height: 200px; border-width: 5px 0;} 116 | 100% {height: 200px; border-width: 5px 0;} 117 | } 118 | 119 | @keyframes onshaking { 120 | 0% {height: 0; border-width: 0;} 121 | 5% {height: 0; border-width: 5px 0; } 122 | 50% {height: 200px; border-width: 5px 0;} 123 | 100% {height: 200px; border-width: 5px 0;} 124 | } -------------------------------------------------------------------------------- /wxShake/js/shaked.js: -------------------------------------------------------------------------------- 1 | /*-----------------------------【程序说明】----------------------------- 2 | * 程序说明： HTML5实现“摇一摇”功能 3 | * 程序描述： 1）移动端音频需要用户指定播放或者加载，否则不能播放。 4 | * 2）微信和QQ浏览器对flex弹性布局的支持还局限在旧版本。 5 | * 浏览器支持：主流浏览器，IE除外（若有问题，请更新浏览器到最新版） 6 | * 2016年04月 Created by @Qieguo 7 | * 更多信息请关注我的博客：http://www.cnblogs.com/qieguo/ 8 | * 9 | * Reference: 1) https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation 10 | * 2) https://developer.mozilla.org/en-US/docs/Web/API/Vibration_API 11 | * Licensed under the MIT，转载使用请注明出处！ http://www.cnblogs.com/qieguo/ 12 | *-------------------------------------------------------------------- 13 | */ 14 | 15 | 16 | var Shake = function (threshold) { 17 | var that = this; 18 | this.SHAKE_THRESHOLD = threshold ? threshold : 2000; //定义阈值 19 | this.last_update = 0; 20 | this.x = this.y = this.z = this.last_x = this.last_y = this.last_z = 0; 21 | 22 | this.shakeAudio = new Audio(); //摇一摇声音 23 | this.shakeAudio.src = 'source/shake_sound.mp3'; 24 | this.audioLoaded = false; //音频加载标志 25 | 26 | this.shakeEffect = document.getElementsByClassName('shake-box')[0]; //摇一摇图片分裂效果 27 | this.img = document.getElementById('id-shake-image'); //摇一摇后显示图片 28 | var images = ['source/000.jpg', 'source/001.jpg', 'source/002.jpg'], 29 | imgSource = new Image(); 30 | for (var _index = 0; _index < images.length; _index++) { 31 | imgSource.src = images[_index]; 32 | } 33 | 34 | 35 | this.init = function() { 36 | if (window.DeviceMotionEvent) { 37 | window.addEventListener('devicemotion', this.deviceMotionHandler, false); 38 | } else { 39 | alert('您的浏览器不支持重力传感器'); 40 | } 41 | }; 42 | 43 | this.deviceMotionHandler = function(eventData) { 44 | var acceleration = eventData.acceleration; 45 | var curTime = new Date().getTime(); 46 | 47 | //检测频率：每100ms一次 48 | if ((curTime - that.last_update) > 100) { 49 | var diffTime = curTime - that.last_update; 50 | that.last_update = curTime; 51 | 52 | that.x = acceleration.x; 53 | that.y = acceleration.y; 54 | that.z = acceleration.z; 55 | var speed = Math.abs(that.x + that.y + that.z - that.last_x - that.last_y - that.last_z) / diffTime * 10000; 56 | if (speed > that.SHAKE_THRESHOLD) { 57 | 58 | //do something 59 | that.shakeAudio.play(); //摇一摇音效 60 | window.navigator.vibrate(200); //振动效果 61 | that.shakeEffect.className = 'shake-box shaking'; //摇一摇图片动态 62 | clearTimeout(shakeTimeout); 63 | clearTimeout(changeImage); 64 | 65 | var shakeTimeout = setTimeout(function() { 66 | that.shakeEffect.className = 'shake-box'; 67 | },4000); 68 | 69 | //更改显示的图片 70 | var changeImage = setTimeout(function () { 71 | that.img.src = images[ Math.floor( Math.random() * 3)]; 72 | },4200); 73 | } 74 | 75 | that.last_x = that.x; 76 | that.last_y = that.y; 77 | that.last_z = that.z; 78 | } 79 | }; 80 | }; 81 | 82 | window.onload = function(){ 83 | var shake1 = new Shake(2000); //创建shake对象 84 | shake1.init(); //初始化，绑定devicemotion事件 85 | 86 | window.addEventListener('touchstart',function () { 87 | if ( !shake1.audioLoaded ) { 88 | shake1.shakeAudio.load(); //load事件必须由用户触发 89 | shake1.audioLoaded = true; 90 | document.getElementsByClassName('bodymask')[0].style.display = 'none'; 91 | } 92 | }, false); 93 | }; -------------------------------------------------------------------------------- /wxShake/source/000.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qieguo2016/demos/751c60679c80fb3aad3ed191398d8b91c9f2cadb/wxShake/source/000.jpg -------------------------------------------------------------------------------- /wxShake/source/001.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qieguo2016/demos/751c60679c80fb3aad3ed191398d8b91c9f2cadb/wxShake/source/001.jpg -------------------------------------------------------------------------------- /wxShake/source/002.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qieguo2016/demos/751c60679c80fb3aad3ed191398d8b91c9f2cadb/wxShake/source/002.jpg -------------------------------------------------------------------------------- /wxShake/source/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qieguo2016/demos/751c60679c80fb3aad3ed191398d8b91c9f2cadb/wxShake/source/favicon.ico -------------------------------------------------------------------------------- /wxShake/source/shakBox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qieguo2016/demos/751c60679c80fb3aad3ed191398d8b91c9f2cadb/wxShake/source/shakBox.png -------------------------------------------------------------------------------- /wxShake/source/shake_sound.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qieguo2016/demos/751c60679c80fb3aad3ed191398d8b91c9f2cadb/wxShake/source/shake_sound.mp3 -------------------------------------------------------------------------------- /wxShake/wxShake.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 摇一摇 12 | 13 | 14 | 15 | 16 |

    准备好了吗？
    点击屏幕开始"摇"!

    17 |
    18 |
    19 |
    20 |
    21 |
    22 | 23 |
    24 |
    25 |
    26 | 27 | 28 | 29 | 30 | --------------------------------------------------------------------------------