├── _config.yml ├── 1-1.png ├── dayou.html ├── 2.touchEnd ├── index.html ├── css │ └── main.css └── js │ └── main.js ├── 1.pages ├── index.html ├── css │ └── main.css └── js │ └── main.js ├── 0.touchStart ├── index.html ├── css │ └── main.css └── js │ └── main.js └── index.md /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-merlot -------------------------------------------------------------------------------- /1-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/overmind1980/draw/master/1-1.png -------------------------------------------------------------------------------- /dayou.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 打油 6 | 7 | 8 | 9 |

打油诗

10 |

我是一个漫画家

11 |

每天都要画画花

12 |

花虽好看不好画

13 |

大家看啦哈哈哈

14 |

15 | 16 | 17 | -------------------------------------------------------------------------------- /2.touchEnd/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 春夏秋冬 6 | 7 | 8 | 9 | 10 |

11 |

春天来了

12 |

夏天来了

13 |

秋秋秋天。。。

14 |

冬天很冷

15 |

16 | 17 | -------------------------------------------------------------------------------- /1.pages/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 春夏秋冬 6 | 7 | 8 | 9 | 10 |

11 | 12 | 13 | 14 | 15 |

16 | 17 | -------------------------------------------------------------------------------- /0.touchStart/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 春夏秋冬 6 | 7 | 8 | 9 | 10 |

11 | 12 | 13 | 14 | 15 |

16 | 17 | -------------------------------------------------------------------------------- /0.touchStart/css/main.css: -------------------------------------------------------------------------------- 1 | #container,html,body{ 2 | width:100%; 3 | height:100%; 4 | background-color: grey; 5 | margin:0; 6 | text-align: center; 7 | } 8 | .season{ 9 | width:80%; 10 | height:10%; 11 | margin:20px auto; 12 | } 13 | #chun{ 14 | background-color:green; 15 | } 16 | #xia{ 17 | background-color: red; 18 | } 19 | #qiu{ 20 | background-color: white; 21 | } 22 | #dong{ 23 | background-color: black; 24 | color:white; 25 | } 26 | .hidden{ 27 | opacity:0; 28 | } 29 | .show{ 30 | animation: showIt 2s; 31 | } 32 | 33 | @keyframes showIt { 34 | from{opacity:0;} 35 | to{opacity:100;} 36 | } -------------------------------------------------------------------------------- /1.pages/css/main.css: -------------------------------------------------------------------------------- 1 | #container,html,body{ 2 | width:100%; 3 | height:100%; 4 | background-color: grey; 5 | margin:0; 6 | text-align: center; 7 | } 8 | .season{ 9 | position:absolute; 10 | width:100%; 11 | height:100%; 12 | } 13 | #chun{ 14 | background-color:green; 15 | } 16 | #xia{ 17 | background-color: red; 18 | } 19 | #qiu{ 20 | background-color: white; 21 | } 22 | #dong{ 23 | background-color: black; 24 | color:white; 25 | } 26 | .hidden{ 27 | animation:hideIt 2s; 28 | opacity:0; 29 | } 30 | .show{ 31 | animation: showIt 2s; 32 | opacity:100; 33 | } 34 | 35 | @keyframes showIt { 36 | from{opacity:0;} 37 | to{opacity:100;} 38 | } 39 | 40 | @keyframes hideIt { 41 | from{opacity:100;} 42 | to{opacity: 0;} 43 | } -------------------------------------------------------------------------------- /2.touchEnd/css/main.css: -------------------------------------------------------------------------------- 1 | #container,html,body{ 2 | width:100%; 3 | height:100%; 4 | background-color: grey; 5 | margin:0; 6 | text-align: center; 7 | } 8 | .season{ 9 | position:absolute; 10 | width:100%; 11 | height:100%; 12 | } 13 | #chun{ 14 | background-color:green; 15 | } 16 | #xia{ 17 | background-color: red; 18 | } 19 | #qiu{ 20 | background-color: white; 21 | } 22 | #dong{ 23 | background-color: black; 24 | color:white; 25 | } 26 | .hidden{ 27 | animation:hideIt 2s; 28 | opacity:0; 29 | } 30 | .show{ 31 | animation: showIt 2s; 32 | opacity:100; 33 | } 34 | 35 | @keyframes showIt { 36 | from{opacity:0;} 37 | to{opacity:100;} 38 | } 39 | 40 | @keyframes hideIt { 41 | from{opacity:100;} 42 | to{opacity: 0;} 43 | } 44 | .none{ 45 | opacity:0; 46 | } -------------------------------------------------------------------------------- /0.touchStart/js/main.js: -------------------------------------------------------------------------------- 1 | var count = 0; 2 | function init(){ 3 | console.log(456); 4 | var body = document.getElementsByTagName("body")[0]; 5 | body.addEventListener("touchstart",touchHandler); 6 | } 7 | function touchHandler(e){ 8 | console.log(e.touches[0]); 9 | count=count+1; 10 | if(count==1){ 11 | var chun = document.getElementById("chun"); 12 | chun.classList.remove("hidden"); 13 | chun.classList.add("show"); 14 | } 15 | if(count==2){ 16 | var xia = document.getElementById("xia"); 17 | xia.classList.remove("hidden"); 18 | xia.classList.add("show"); 19 | } 20 | if(count==3){ 21 | var qiu = document.getElementById("qiu"); 22 | qiu.classList.remove("hidden"); 23 | qiu.classList.add("show"); 24 | } 25 | if(count==4){ 26 | var dong = document.getElementById("dong"); 27 | dong.classList.remove("hidden"); 28 | dong.classList.add("show"); 29 | } 30 | 31 | } -------------------------------------------------------------------------------- /1.pages/js/main.js: -------------------------------------------------------------------------------- 1 | var count = 0; 2 | function init(){ 3 | console.log(456); 4 | var body = document.getElementsByTagName("body")[0]; 5 | body.addEventListener("touchstart",touchHandler); 6 | } 7 | function touchHandler(e){ 8 | console.log(e.touches[0]); 9 | count=count+1; 10 | 11 | var chun = document.getElementById("chun"); 12 | var xia = document.getElementById("xia"); 13 | var qiu = document.getElementById("qiu"); 14 | var dong = document.getElementById("dong"); 15 | 16 | if(count==1){ 17 | chun.classList.remove("hidden"); 18 | chun.classList.add("show"); 19 | } 20 | else if(count==2){ 21 | chun.classList.remove("show"); 22 | chun.classList.add("hidden"); 23 | xia.classList.remove("hidden"); 24 | xia.classList.add("show"); 25 | } 26 | else if(count==3){ 27 | 28 | xia.classList.remove("show"); 29 | xia.classList.add("hidden"); 30 | qiu.classList.remove("hidden"); 31 | qiu.classList.add("show"); 32 | } 33 | else if(count==4){ 34 | qiu.classList.remove("show"); 35 | qiu.classList.add("hidden"); 36 | dong.classList.remove("hidden"); 37 | dong.classList.add("show"); 38 | } 39 | 40 | } -------------------------------------------------------------------------------- /index.md: -------------------------------------------------------------------------------- 1 | ## Welcome to GitHub Pages 2 | 3 | You can use the [editor on GitHub](https://github.com/overmind1980/draw/edit/master/index.md) to maintain and preview the content for your website in Markdown files. 4 | 5 | Whenever you commit to this repository, GitHub Pages will run [Jekyll](https://jekyllrb.com/) to rebuild the pages in your site, from the content in your Markdown files. 6 | 7 | ### Markdown 8 | 9 | Markdown is a lightweight and easy-to-use syntax for styling your writing. It includes conventions for 10 | 11 | ```markdown 12 | Syntax highlighted code block 13 | 14 | # Header 1 15 | ## Header 2 16 | ### Header 3 17 | 18 | - Bulleted 19 | - List 20 | 21 | 1. Numbered 22 | 2. List 23 | 24 | **Bold** and _Italic_ and `Code` text 25 | 26 | [Link](url) and ![Image](src) 27 | ``` 28 | 29 | For more details see [GitHub Flavored Markdown](https://guides.github.com/features/mastering-markdown/). 30 | 31 | ### Jekyll Themes 32 | 33 | Your Pages site will use the layout and styles from the Jekyll theme you have selected in your [repository settings](https://github.com/overmind1980/draw/settings). The name of this theme is saved in the Jekyll `_config.yml` configuration file. 34 | 35 | ### Support or Contact 36 | 37 | Having trouble with Pages? Check out our [documentation](https://help.github.com/categories/github-pages-basics/) or [contact support](https://github.com/contact) and we’ll help you sort it out. 38 | -------------------------------------------------------------------------------- /2.touchEnd/js/main.js: -------------------------------------------------------------------------------- 1 | var count = 0; 2 | var currentPage = 0; 3 | var touStartY = -100; 4 | function init(){ 5 | console.log(456); 6 | var body = document.getElementsByTagName("body")[0]; 7 | body.addEventListener("touchstart",touchStartHandler); 8 | body.addEventListener("touchend",touchEndHandler); 9 | } 10 | function touchStartHandler(e){ 11 | console.log(e.touches[0]); 12 | touStartY = e.touches[0].pageY; 13 | } 14 | 15 | function touchEndHandler(e){ 16 | var touEndY = e.changedTouches[0].pageY; 17 | if(touStartY - touEndY>200){ 18 | count=count+1; 19 | 20 | var chun = document.getElementById("chun"); 21 | var xia = document.getElementById("xia"); 22 | var qiu = document.getElementById("qiu"); 23 | var dong = document.getElementById("dong"); 24 | 25 | if(count==1){ 26 | chun.classList.remove("none"); 27 | chun.classList.add("show"); 28 | } 29 | else if(count==2){ 30 | chun.classList.remove("show"); 31 | chun.classList.add("hidden"); 32 | xia.classList.remove("none"); 33 | xia.classList.add("show"); 34 | } 35 | else if(count==3){ 36 | 37 | xia.classList.remove("show"); 38 | xia.classList.add("hidden"); 39 | qiu.classList.remove("none"); 40 | qiu.classList.add("show"); 41 | } 42 | else if(count==4){ 43 | qiu.classList.remove("show"); 44 | qiu.classList.add("hidden"); 45 | dong.classList.remove("none"); 46 | dong.classList.add("show"); 47 | } 48 | } 49 | } --------------------------------------------------------------------------------