├── .gitignore ├── 2014total ├── coffee │ └── index.coffee ├── css │ ├── index.css │ └── jquery.fullPage.css ├── imgs │ ├── bg.png │ ├── bg1.png │ ├── bg2.png │ ├── bg3.png │ ├── guide.png │ └── me.png ├── index.html ├── js │ ├── index.js │ ├── jquery-1.9.1.min.js │ ├── jquery-ui.min.js │ └── jquery.fullPage.min.js └── less │ ├── index.less │ ├── mixins.less │ └── variables.less ├── README.md ├── book.html ├── calendar ├── calendar.js ├── index.html ├── jquery-1.9.0.js ├── leaker.js ├── yz.png └── yzCalendar.css ├── contact.html ├── css ├── common.css ├── common.less ├── contact.css ├── contact.less ├── global.css ├── global.less ├── guide.css ├── guide.less ├── index.css ├── index.less ├── mixins.less ├── normalize.css └── variables.less ├── drag.html ├── example.html ├── guide.html ├── images ├── 1.jpg ├── 4.png ├── 5.jpg ├── blank.png ├── loading.gif ├── me.jpg ├── pisScrollIcons.gif └── snail.png ├── index.html ├── jqm.html ├── js └── jquery-1.7.2.min.js ├── newPlayer ├── .editorconfig ├── .eslintignore ├── .eslintrc ├── README.md ├── app │ ├── article │ │ └── 2015sumary.md │ ├── bulid │ │ ├── app.js │ │ └── app.js.map │ ├── fonts │ │ ├── icomoon.eot │ │ ├── icomoon.svg │ │ ├── icomoon.ttf │ │ └── icomoon.woff │ ├── sass │ │ ├── app.scss │ │ ├── calendar.css │ │ └── markdown.css │ └── scripts │ │ ├── app.jsx │ │ ├── calendar.jsx │ │ ├── data.jsx │ │ ├── index.jsx │ │ ├── music.jsx │ │ └── summary.jsx ├── gulpfile.js ├── index.html ├── music02.png └── package.json ├── player ├── index.html ├── static │ ├── css │ │ ├── index.css │ │ └── normalize.css │ ├── fonts │ │ ├── icomoon.eot │ │ ├── icomoon.svg │ │ ├── icomoon.ttf │ │ └── icomoon.woff │ ├── img │ │ ├── da.jpg │ │ ├── jem.jpg │ │ ├── jew.jpg │ │ ├── la.jpg │ │ ├── lenka.jpg │ │ ├── ljr.jpg │ │ ├── lm.jpg │ │ └── tw.jpg │ ├── js │ │ ├── angular-route.min.js │ │ ├── angular.min.js │ │ ├── app.js │ │ ├── controller.js │ │ ├── directive.js │ │ ├── index.cat.js │ │ ├── index.min.js │ │ ├── router.js │ │ └── service.js │ ├── less │ │ ├── index.less │ │ ├── mixins.less │ │ └── variables.less │ └── music │ │ ├── A Place Nearby.mp3 │ │ ├── Crush.mp3 │ │ ├── I Still Believe In Love.mp3 │ │ ├── It'S Amazing.mp3 │ │ ├── Stay Here Forever.mp3 │ │ ├── The Show.mp3 │ │ └── Valder Fields.mp3 └── tpls │ ├── mode.html │ └── progress.html ├── qqcss3.html ├── react-player ├── app │ ├── Router.js │ ├── css │ │ ├── index.css │ │ └── normalize.css │ ├── data.js │ ├── fonts │ │ ├── icomoon.eot │ │ ├── icomoon.svg │ │ ├── icomoon.ttf │ │ └── icomoon.woff │ ├── images │ │ ├── 1.jpeg │ │ ├── bg.jpg │ │ └── music.png │ ├── less │ │ └── index.less │ ├── main.js │ ├── music.js │ └── records │ │ ├── Heaven Please.mp3 │ │ ├── Mockingbird.mp3 │ │ └── Read All About It, Pt. III.mp3 ├── build │ └── bundle.js ├── index.html ├── package.json └── webpack.config.js ├── snail.html └── useYouziCarousel ├── build └── bundle.js ├── images ├── 1.png ├── 2.png ├── 3.png ├── 4.png ├── 5.png ├── 6.png ├── 7.png └── 8.png ├── index.html ├── index.js ├── package.json └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | newPlayer/node_modules/babel-core/node_modules/babel-code-frame/node_modules/chalk/node_modules/has-ansi/node_modules 2 | newPlayer/node_modules/babel-core/node_modules 3 | newPlayer/node_modules/babel-loader/node_modules/loader-utils/node_modules 4 | newPlayer/node_modules 5 | react-player/node_modules 6 | useYouziCarousel/node_modules 7 | -------------------------------------------------------------------------------- /2014total/coffee/index.coffee: -------------------------------------------------------------------------------- 1 | $ -> 2 | $('#J-instro').fullpage 3 | sectionsColor: ['#44c1f1', '#99bc2c', '#f4a60e', '#ff4c8e'] 4 | anchors: ['page0', 'page1', 'page2', 'page3'] 5 | css3: true 6 | menu: '#menu' 7 | scrollingSpeed: 1000 -------------------------------------------------------------------------------- /2014total/css/index.css: -------------------------------------------------------------------------------- 1 | h1{font-size:4rem;font-family:arial,helvetica;color:#fff;margin:0;padding:0}.section{text-align:center}.section0,.section1,.section2,.section3{background-size:cover;overflow:hidden}.instro-bg{width:100%;padding:10px 0;background:rgba(0,0,0,.5)}.ball-cover{position:absolute;top:50%;left:50%;margin-left:-109px;margin-top:-362px}.ball{min-width:283px;min-height:316px}.guide{position:absolute;left:50%;bottom:20px;width:105px;height:100px;margin-left:-70px;background-image:url(../imgs/guide.png);background-repeat:no-repeat;background-position:0 0;background-size:100%;-webkit-transform:rotate(221deg);overflow:hidden}.guide a{display:block;width:105px;height:100px;overflow:hidden}.me{width:200px;height:200px;border:2px solid #fff;border-radius:50%;background-image:url(../imgs/me.png);background-repeat:no-repeat;background-position:0 -13px;background-size:100%}.teach{font-size:2.5em;color:#fff}.super-women{font-size:1.5em;color:#fff}.guide-one{position:absolute;left:50%;bottom:0;width:105px;height:100px;margin-left:-55px}.guide-one a{position:absolute;left:50%;bottom:20px;display:block;width:105px;height:100px;margin-left:-55px;background-image:url(../imgs/guide.png);background-repeat:no-repeat;background-position:0 0;background-size:100%;-webkit-transform:rotate(221deg);overflow:hidden}.total{margin:0 20px;padding-right:10px;padding-bottom:10px;text-align:left;border-radius:10px;background:rgba(0,0,0,.5);-webkit-transform:skew(0deg)}.total li{padding:10px 0 10px 20px;line-height:1.3;font-size:2.5em;color:#fff;opacity:1}.total li:nth-child(1){list-style:none;text-align:center}.guide-two{position:absolute;left:50%;bottom:0;width:105px;height:100px;margin-left:-55px}.guide-two a{position:absolute;left:50%;bottom:20px;display:block;width:105px;height:100px;margin-left:-55px;background-image:url(../imgs/guide.png);background-repeat:no-repeat;background-position:0 0;background-size:100%;overflow:hidden}.active{overflow:hidden}.active .ball-cover{-webkit-animation:ball-act 3s linear 1 alternate}.active .ball{-webkit-animation:ball 1s linear infinite alternate}.active .guide{-webkit-animation:guide 1s linear infinite alternate}.active .delay1{-webkit-animation-name:showFont;-webkit-animation-duration:1s;-webkit-animation-fill-mode:both;-webkit-animation-delay:4s}.active .delay2{-webkit-animation-name:showFont;-webkit-animation-duration:1s;-webkit-animation-fill-mode:both;-webkit-animation-delay:4.5s}.active .super-women{-webkit-animation-name:showFont;-webkit-animation-duration:1s;-webkit-animation-fill-mode:both;-webkit-animation-delay:5s}.active .guide-one{-webkit-animation:guideOne 3s ease-in 1 alternate}.active .guide-one a{-webkit-animation:guide 1s linear infinite alternate}.active .total{-webkit-animation-name:background;-webkit-animation-duration:1s;-webkit-animation-fill-mode:both;-webkit-animation-delay:4s}.active .total li:nth-child(1){-webkit-animation-name:scaleFont;-webkit-animation-duration:1s;-webkit-animation-fill-mode:both;-webkit-animation-delay:4.5s}.active .total li:nth-child(2){-webkit-animation-name:showFont;-webkit-animation-duration:1s;-webkit-animation-fill-mode:both;-webkit-animation-delay:5.5s}.active .total li:nth-child(3){-webkit-animation-name:showFont;-webkit-animation-duration:1s;-webkit-animation-fill-mode:both;-webkit-animation-delay:6s}.active .total li:nth-child(4){-webkit-animation-name:showFont;-webkit-animation-duration:1s;-webkit-animation-fill-mode:both;-webkit-animation-delay:6.5s}.active .total li:nth-child(5){-webkit-animation-name:showFont;-webkit-animation-duration:1s;-webkit-animation-fill-mode:both;-webkit-animation-delay:7s}.active .total li:nth-child(6){-webkit-animation-name:showFont;-webkit-animation-duration:1s;-webkit-animation-fill-mode:both;-webkit-animation-delay:7.5s}.active .total li:nth-child(7){-webkit-animation-name:showFont;-webkit-animation-duration:1s;-webkit-animation-fill-mode:both;-webkit-animation-delay:8s}.active .total li:nth-child(8){-webkit-animation-name:showFont;-webkit-animation-duration:1s;-webkit-animation-fill-mode:both;-webkit-animation-delay:8.5s}.active .guide-two{-webkit-animation:guideOne 4s ease-in 1 alternate}.active .guide-two a{-webkit-animation:last-guide 4s linear 1}@-webkit-keyframes guide{from{bottom:100px}to{bottom:20px}}@-webkit-keyframes last-guide{from{-webkit-transform:rotate(221deg)}to{-webkit-transform:rotate(0deg)}}@-webkit-keyframes ball-act{0%{margin-top:-500px;left:0}48.5%{margin-top:-400px;left:40%}51.5%{margin-top:-400px;left:40%}100%{margin-top:-362px;left:50%}}@-webkit-keyframes ball{0%{-webkit-transform:rotate(-7deg)}100%{-webkit-transform:rotate(5deg)}}@-webkit-keyframes guideOne{from{bottom:100%}to{bottom:0}}@-webkit-keyframes scaleFont{from{opacity:0;-webkit-transform:scale(0.5)}to{opacity:1;-webkit-transform:scale(1)}}@-webkit-keyframes background{from{-webkit-transform:skew(20deg);background:rgba(0,0,0,0)}to{-webkit-transform:skew(0deg);background:rgba(0,0,0,.5)}}@-webkit-keyframes showFont{from{opacity:0}to{opacity:1}} -------------------------------------------------------------------------------- /2014total/css/jquery.fullPage.css: -------------------------------------------------------------------------------- 1 | /** 2 | * fullPage 2.4.6 3 | * https://github.com/alvarotrigo/fullPage.js 4 | * MIT licensed 5 | * 6 | * Copyright (C) 2013 alvarotrigo.com - A project by Alvaro Trigo 7 | */ 8 | html, body { 9 | margin: 0; 10 | padding: 0; 11 | overflow:hidden; 12 | 13 | /*Avoid flicker on slides transitions for mobile phones #336 */ 14 | -webkit-tap-highlight-color: rgba(0,0,0,0); 15 | } 16 | #superContainer { 17 | height: 100%; 18 | position: relative; 19 | 20 | /* Touch detection for Windows 8 */ 21 | -ms-touch-action: none; 22 | 23 | /* IE 11 on Windows Phone 8.1*/ 24 | touch-action: none; 25 | } 26 | .fp-section { 27 | position: relative; 28 | -webkit-box-sizing: border-box; /* Safari<=5 Android<=3 */ 29 | -moz-box-sizing: border-box; /* <=28 */ 30 | box-sizing: border-box; 31 | } 32 | .fp-slide { 33 | float: left; 34 | } 35 | .fp-slide, .fp-slidesContainer { 36 | height: 100%; 37 | display: block; 38 | } 39 | .fp-slides { 40 | z-index:1; 41 | height: 100%; 42 | overflow: hidden; 43 | position: relative; 44 | -webkit-transition: all 0.3s ease-out; /* Safari<=6 Android<=4.3 */ 45 | transition: all 0.3s ease-out; 46 | } 47 | .fp-section.fp-table, .fp-slide.fp-table { 48 | display: table; 49 | table-layout:fixed; 50 | width: 100%; 51 | } 52 | .fp-tableCell { 53 | display: table-cell; 54 | vertical-align: middle; 55 | width: 100%; 56 | height: 100%; 57 | } 58 | .fp-slidesContainer { 59 | float: left; 60 | position: relative; 61 | } 62 | .fp-controlArrow { 63 | position: absolute; 64 | z-index: 4; 65 | top: 50%; 66 | cursor: pointer; 67 | width: 0; 68 | height: 0; 69 | border-style: solid; 70 | margin-top: -38px; 71 | } 72 | .fp-controlArrow.fp-prev { 73 | left: 15px; 74 | width: 0; 75 | border-width: 38.5px 34px 38.5px 0; 76 | border-color: transparent #fff transparent transparent; 77 | } 78 | .fp-controlArrow.fp-next { 79 | right: 15px; 80 | border-width: 38.5px 0 38.5px 34px; 81 | border-color: transparent transparent transparent #fff; 82 | } 83 | .fp-scrollable { 84 | overflow: scroll; 85 | 86 | } 87 | .fp-notransition { 88 | -webkit-transition: none !important; 89 | transition: none !important; 90 | } 91 | #fp-nav { 92 | position: fixed; 93 | z-index: 100; 94 | margin-top: -32px; 95 | top: 50%; 96 | opacity: 1; 97 | } 98 | #fp-nav.right { 99 | right: 17px; 100 | } 101 | #fp-nav.left { 102 | left: 17px; 103 | } 104 | .fp-slidesNav{ 105 | position: absolute; 106 | z-index: 4; 107 | left: 50%; 108 | opacity: 1; 109 | } 110 | .fp-slidesNav.bottom { 111 | bottom: 17px; 112 | } 113 | .fp-slidesNav.top { 114 | top: 17px; 115 | } 116 | #fp-nav ul, 117 | .fp-slidesNav ul { 118 | margin: 0; 119 | padding: 0; 120 | } 121 | #fp-nav ul li, 122 | .fp-slidesNav ul li { 123 | display: block; 124 | width: 14px; 125 | height: 13px; 126 | margin: 7px; 127 | position:relative; 128 | } 129 | .fp-slidesNav ul li { 130 | display: inline-block; 131 | } 132 | #fp-nav ul li a, 133 | .fp-slidesNav ul li a { 134 | display: block; 135 | position: relative; 136 | z-index: 1; 137 | width: 100%; 138 | height: 100%; 139 | cursor: pointer; 140 | text-decoration: none; 141 | } 142 | #fp-nav ul li a.active span, 143 | .fp-slidesNav ul li a.active span { 144 | background: #333; 145 | } 146 | #fp-nav ul li a span, 147 | .fp-slidesNav ul li a span { 148 | top: 2px; 149 | left: 2px; 150 | width: 8px; 151 | height: 8px; 152 | border: 1px solid #000; 153 | background: rgba(0, 0, 0, 0); 154 | border-radius: 50%; 155 | position: absolute; 156 | z-index: 1; 157 | } 158 | #fp-nav ul li .fp-tooltip { 159 | position: absolute; 160 | top: -2px; 161 | color: #fff; 162 | font-size: 14px; 163 | font-family: arial, helvetica, sans-serif; 164 | white-space: nowrap; 165 | max-width: 220px; 166 | overflow: hidden; 167 | display: block; 168 | opacity: 0; 169 | width: 0; 170 | } 171 | #fp-nav ul li:hover .fp-tooltip { 172 | -webkit-transition: opacity 0.2s ease-in; 173 | transition: opacity 0.2s ease-in; 174 | width: auto; 175 | opacity: 1; 176 | } 177 | #fp-nav ul li .fp-tooltip.right { 178 | right: 20px; 179 | } 180 | #fp-nav ul li .fp-tooltip.left { 181 | left: 20px; 182 | } 183 | -------------------------------------------------------------------------------- /2014total/imgs/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ellyliang/JQM-me/894f19ff1e59dd23da1e4883c84f34670d452515/2014total/imgs/bg.png -------------------------------------------------------------------------------- /2014total/imgs/bg1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ellyliang/JQM-me/894f19ff1e59dd23da1e4883c84f34670d452515/2014total/imgs/bg1.png -------------------------------------------------------------------------------- /2014total/imgs/bg2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ellyliang/JQM-me/894f19ff1e59dd23da1e4883c84f34670d452515/2014total/imgs/bg2.png -------------------------------------------------------------------------------- /2014total/imgs/bg3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ellyliang/JQM-me/894f19ff1e59dd23da1e4883c84f34670d452515/2014total/imgs/bg3.png -------------------------------------------------------------------------------- /2014total/imgs/guide.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ellyliang/JQM-me/894f19ff1e59dd23da1e4883c84f34670d452515/2014total/imgs/guide.png -------------------------------------------------------------------------------- /2014total/imgs/me.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ellyliang/JQM-me/894f19ff1e59dd23da1e4883c84f34670d452515/2014total/imgs/me.png -------------------------------------------------------------------------------- /2014total/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ellyLiang 2014 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |

2014年技术总结...@ellyLiang

15 |

2015年计划...@柚子－use..

\ 16 |

点击superWomen或向上滑动可以往下看～

17 |
18 | 19 |
20 |
21 |

22 |
23 |
24 |
25 |
26 | 27 |
28 | 38 | 39 |
40 |
41 | 42 |
43 | 51 | 52 |
53 |
54 | 55 |
56 | 63 | 64 |
65 |
66 |
67 | 68 | 69 | 70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /2014total/js/index.js: -------------------------------------------------------------------------------- 1 | (function(){$(function(){return $("#J-instro").fullpage({sectionsColor:["#44c1f1","#99bc2c","#f4a60e","#ff4c8e"],anchors:["page0","page1","page2","page3"],css3:!0,menu:"#menu",scrollingSpeed:1e3})})}).call(this); -------------------------------------------------------------------------------- /2014total/less/index.less: -------------------------------------------------------------------------------- 1 | .bg(@img, @repeat:no-repeat, @left:0, @top:0) { 2 | background-image: url("../imgs/@{img}"); 3 | background-repeat: @repeat; 4 | background-position: @left @top; 5 | } 6 | 7 | .size(@width, @height) { 8 | width: @width; 9 | height: @height; 10 | } 11 | 12 | .animation (@name, @delay) { 13 | -webkit-animation-name: @name; 14 | -webkit-animation-duration: 1s; 15 | -webkit-animation-fill-mode: both; 16 | -webkit-animation-delay: @delay; 17 | } 18 | 19 | h1{ 20 | font-size: 4rem; 21 | font-family: arial,helvetica; 22 | color: #fff; 23 | margin:0; 24 | padding:0; 25 | } 26 | 27 | .section{ 28 | text-align:center; 29 | } 30 | 31 | .section0, 32 | .section1, 33 | .section2, 34 | .section3{ 35 | background-size: cover; 36 | overflow: hidden; 37 | } 38 | 39 | //section0 40 | .instro-bg { 41 | width: 100%; 42 | padding: 10px 0; 43 | background: rgba(0, 0, 0, 0.5); 44 | } 45 | 46 | .ball-cover { 47 | position: absolute; 48 | top: 50%; 49 | left: 50%; 50 | margin-left: -109px; 51 | margin-top: -362px; 52 | } 53 | 54 | .ball { 55 | min-width: 283px; 56 | min-height: 316px; 57 | } 58 | 59 | .guide { 60 | position: absolute; 61 | left: 50%; 62 | bottom: 20px; 63 | .size(105px, 100px); 64 | margin-left: -70px; 65 | .bg("guide.png"); 66 | background-size: 100%; 67 | -webkit-transform: rotate(221deg); 68 | overflow: hidden; 69 | 70 | a { 71 | display: block; 72 | .size(105px, 100px); 73 | overflow: hidden; 74 | } 75 | } 76 | 77 | .me { 78 | .size(200px, 200px); 79 | border: 2px solid #fff; 80 | border-radius: 50%; 81 | .bg("me.png", no-repeat, 0, -13px); 82 | background-size: 100%; 83 | } 84 | 85 | .teach { 86 | font-size: 2.5em; 87 | color: #fff; 88 | } 89 | 90 | .super-women { 91 | font-size: 1.5em; 92 | color: #fff; 93 | } 94 | 95 | //section1 96 | .guide-one { 97 | position: absolute; 98 | left: 50%; 99 | bottom: 0; 100 | .size(105px, 100px); 101 | margin-left: -55px; 102 | 103 | a { 104 | position: absolute; 105 | left: 50%; 106 | bottom: 20px; 107 | display: block; 108 | .size(105px, 100px); 109 | margin-left: -55px; 110 | .bg("guide.png"); 111 | background-size: 100%; 112 | -webkit-transform: rotate(221deg); 113 | overflow: hidden; 114 | } 115 | } 116 | 117 | .total { 118 | margin: 0 20px; 119 | padding-right: 10px; 120 | padding-bottom: 10px; 121 | text-align: left; 122 | border-radius: 10px; 123 | background: rgba(0, 0, 0, 0.5); 124 | -webkit-transform: skew(0deg); 125 | 126 | li { 127 | padding: 10px 0 10px 20px; 128 | line-height: 1.3; 129 | font-size: 2.5em; 130 | color: #fff; 131 | opacity: 1; 132 | } 133 | 134 | li:nth-child(1) { 135 | list-style: none; 136 | text-align: center; 137 | } 138 | } 139 | 140 | //section3 141 | .guide-two { 142 | position: absolute; 143 | left: 50%; 144 | bottom: 0; 145 | .size(105px, 100px); 146 | margin-left: -55px; 147 | 148 | a { 149 | position: absolute; 150 | left: 50%; 151 | bottom: 20px; 152 | display: block; 153 | .size(105px, 100px); 154 | margin-left: -55px; 155 | .bg("guide.png"); 156 | background-size: 100%; 157 | overflow: hidden; 158 | } 159 | } 160 | 161 | 162 | .active { 163 | overflow: hidden; 164 | 165 | .ball-cover { 166 | -webkit-animation: ball-act 3s linear 1 alternate; 167 | } 168 | 169 | .ball { 170 | -webkit-animation: ball 1s linear infinite alternate; 171 | } 172 | 173 | .guide { 174 | -webkit-animation: guide 1s linear infinite alternate; 175 | } 176 | 177 | .delay1 { 178 | .animation(showFont, 4s); 179 | } 180 | 181 | .delay2 { 182 | .animation(showFont, 4.5s); 183 | } 184 | 185 | .super-women { 186 | .animation(showFont, 5s); 187 | } 188 | 189 | .guide-one { 190 | -webkit-animation: guideOne 3s ease-in 1 alternate; 191 | 192 | a { 193 | -webkit-animation: guide 1s linear infinite alternate; 194 | } 195 | } 196 | 197 | .total { 198 | .animation(background, 4s); 199 | 200 | li:nth-child(1) { 201 | .animation(scaleFont, 4.5s); 202 | } 203 | 204 | li:nth-child(2) { 205 | .animation(showFont, 5.5s); 206 | } 207 | 208 | li:nth-child(3) { 209 | .animation(showFont, 6s); 210 | } 211 | 212 | li:nth-child(4) { 213 | .animation(showFont, 6.5s); 214 | } 215 | 216 | li:nth-child(5) { 217 | .animation(showFont, 7s); 218 | } 219 | 220 | li:nth-child(6) { 221 | .animation(showFont, 7.5s); 222 | } 223 | 224 | li:nth-child(7) { 225 | .animation(showFont, 8s); 226 | } 227 | 228 | li:nth-child(8) { 229 | .animation(showFont, 8.5s); 230 | } 231 | 232 | } 233 | 234 | .guide-two { 235 | -webkit-animation: guideOne 4s ease-in 1 alternate; 236 | 237 | a { 238 | -webkit-animation: last-guide 4s linear 1; 239 | } 240 | } 241 | 242 | } 243 | 244 | //animation 245 | @-webkit-keyframes guide { 246 | from { 247 | bottom: 100px; 248 | } 249 | to { 250 | bottom: 20px; 251 | } 252 | } 253 | 254 | @-webkit-keyframes last-guide { 255 | from { 256 | -webkit-transform: rotate(221deg); 257 | } 258 | to { 259 | -webkit-transform: rotate(0deg); 260 | } 261 | } 262 | 263 | //气球 264 | @-webkit-keyframes ball-act { 265 | 0%{ 266 | margin-top: -500px; 267 | left: 0; 268 | } 269 | 48.5%{ 270 | margin-top: -400px; 271 | left: 40%; 272 | } 273 | 51.5%{ 274 | margin-top: -400px; 275 | left: 40%; 276 | } 277 | 100%{ 278 | margin-top: -362px; 279 | left: 50%; 280 | } 281 | } 282 | 283 | @-webkit-keyframes ball{ 284 | 0%{ 285 | -webkit-transform: rotate(-7deg); 286 | } 287 | 100%{ 288 | -webkit-transform: rotate(5deg); 289 | } 290 | } 291 | 292 | @-webkit-keyframes guideOne { 293 | from { 294 | bottom: 100%; 295 | } 296 | to { 297 | bottom: 0%; 298 | } 299 | } 300 | 301 | @-webkit-keyframes scaleFont { 302 | from { 303 | opacity: 0; 304 | -webkit-transform: scale(.5); 305 | } 306 | to { 307 | opacity: 1; 308 | -webkit-transform: scale(1); 309 | } 310 | } 311 | 312 | @-webkit-keyframes background { 313 | from { 314 | -webkit-transform: skew(20deg); 315 | background: rgba(0, 0, 0, 0); 316 | } 317 | to { 318 | -webkit-transform: skew(0deg); 319 | background: rgba(0, 0, 0, 0.5); 320 | } 321 | } 322 | 323 | @-webkit-keyframes showFont { 324 | from { 325 | opacity: 0; 326 | } 327 | to { 328 | opacity: 1; 329 | } 330 | } -------------------------------------------------------------------------------- /2014total/less/variables.less: -------------------------------------------------------------------------------- 1 | /* 2 | *@名称: variables 3 | *@功能: 全局变量 4 | */ 5 | 6 | /* 浅色 */ 7 | @black: #000; 8 | @grayDarker: #222; 9 | @grayDark: #333; 10 | @gray: #555; 11 | @grayLight: #999; 12 | @grayLighter: #eee; 13 | @white: #fff; 14 | 15 | /* 深色 */ 16 | @blue: #049cdb; 17 | @blueDark: #0064cd; 18 | @green: #46a546; 19 | @red: #9d261d; 20 | @yellow: #ffc40d; 21 | @orange: #f89406; 22 | @pink: #c3325f; 23 | @purple: #7a43b6; 24 | 25 | /* 背景和文字颜色 */ 26 | @bodyBackground: @white; 27 | @textColor: @grayDark; 28 | 29 | /* 链接 */ 30 | @linkColor: #08c; 31 | @linkColorHover: darken(@linkColor, 15%); 32 | 33 | /* 排版 */ 34 | @sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif; 35 | @serifFontFamily: Georgia, "Times New Roman", Times, serif; 36 | @monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace; 37 | 38 | @baseFontSize: 14px; 39 | @baseFontFamily: @sansFontFamily; 40 | @baseLineHeight: 20px; 41 | @altFontFamily: @serifFontFamily; 42 | 43 | @headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily 44 | @headingsFontWeight: bold; // instead of browser default, bold 45 | @headingsColor: inherit; // empty to use BS default, @textColor 46 | 47 | /* 48 | *字体大小 49 | *@Based on 14px font-size and 20px line-height 50 | */ 51 | @fontSizeLarge: @baseFontSize * 1.25; // ~18px 52 | @fontSizeMedium: @baseFontSize * 0.90; // ~13px 53 | @fontSizeSmall: @baseFontSize * 0.85; // ~12px 54 | @fontSizeMini: @baseFontSize * 0.75; // ~11px 55 | 56 | @paddingLarge: 11px 19px; // 44px 57 | @paddingSmall: 2px 10px; // 26px 58 | @paddingMini: 0 6px; // 22px 59 | 60 | @baseBorderRadius: 4px; 61 | @borderRadiusLarge: 6px; 62 | @borderRadiusSmall: 3px; 63 | 64 | /* 表格 */ 65 | @tableBackground: transparent; // overall background-color 66 | @tableBackgroundAccent: #f9f9f9; // for striping 67 | @tableBackgroundHover: #f5f5f5; // for hover 68 | @tableBorder: #ddd; // table and cell border 69 | 70 | /* 按钮 */ 71 | @btnBackground: @white; 72 | @btnBackgroundHighlight: darken(@white, 10%); 73 | @btnBorder: #ccc; 74 | 75 | @btnPrimaryBackground: @linkColor; 76 | @btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%); 77 | 78 | @btnNormalBackground: #F0EFEB; 79 | @btnNormalBackgroundHighlight: #FAF9F5; 80 | 81 | @btnInfoBackground: #5bc0de; 82 | @btnInfoBackgroundHighlight: #2f96b4; 83 | 84 | @btnSuccessBackground: #62c462; 85 | @btnSuccessBackgroundHighlight: #51a351; 86 | 87 | @btnWarningBackground: lighten(@orange, 15%); 88 | @btnWarningBackgroundHighlight: @orange; 89 | 90 | @btnDangerBackground: #ee5f5b; 91 | @btnDangerBackgroundHighlight: #bd362f; 92 | 93 | @btnInverseBackground: #444; 94 | @btnInverseBackgroundHighlight: @grayDarker; 95 | 96 | /* 表单 */ 97 | @inputBackground: @white; 98 | @inputBorder: #ccc; 99 | @inputBorderRadius: @baseBorderRadius; 100 | @inputDisabledBackground: @grayLighter; 101 | @formActionsBackground: #f5f5f5; 102 | @inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border 103 | 104 | /* 下拉菜单 */ 105 | @dropdownBackground: @white; 106 | @dropdownBorder: rgba(0,0,0,.2); 107 | @dropdownDividerTop: #e5e5e5; 108 | @dropdownDividerBottom: @white; 109 | 110 | @dropdownLinkColor: @grayDark; 111 | @dropdownLinkColorHover: @white; 112 | @dropdownLinkColorActive: @white; 113 | 114 | @dropdownLinkBackgroundActive: @linkColor; 115 | @dropdownLinkBackgroundHover: @dropdownLinkBackgroundActive; 116 | 117 | /* 层级 */ 118 | @zindexDropdown: 1000; 119 | @zindexPopover: 1010; 120 | @zindexTooltip: 1030; 121 | @zindexFixedNavbar: 1030; 122 | @zindexModalBackdrop: 1040; 123 | @zindexModal: 1050; 124 | 125 | /* Sprite图标路径 */ 126 | @iconSpritePath: "../img/glyphicons-halflings.png"; 127 | @iconWhiteSpritePath: "../img/glyphicons-halflings-white.png"; 128 | 129 | /* 导航栏 */ 130 | @navbarCollapseWidth: 979px; 131 | @navbarCollapseDesktopWidth: @navbarCollapseWidth + 1; 132 | 133 | @navbarHeight: 40px; 134 | @navbarBackgroundHighlight: #ffffff; 135 | @navbarBackground: darken(@navbarBackgroundHighlight, 5%); 136 | @navbarBorder: darken(@navbarBackground, 12%); 137 | 138 | @navbarText: #777; 139 | @navbarLinkColor: #777; 140 | @navbarLinkColorHover: @grayDark; 141 | @navbarLinkColorActive: @gray; 142 | @navbarLinkBackgroundHover: transparent; 143 | @navbarLinkBackgroundActive: darken(@navbarBackground, 5%); 144 | 145 | @navbarBrandColor: @navbarLinkColor; 146 | 147 | /* 分页 */ 148 | @paginationBackground: #fff; 149 | @paginationBorder: #ddd; 150 | @paginationActiveBackground: #f5f5f5; 151 | 152 | /* 表单状态和提示 */ 153 | @warningText: #c09853; 154 | @warningBackground: #fcf8e3; 155 | @warningBorder: darken(spin(@warningBackground, -10), 3%); 156 | 157 | @errorText: #b94a48; 158 | @errorBackground: #f2dede; 159 | @errorBorder: darken(spin(@errorBackground, -10), 3%); 160 | 161 | @successText: #468847; 162 | @successBackground: #dff0d8; 163 | @successBorder: darken(spin(@successBackground, -10), 5%); 164 | 165 | @infoText: #3a87ad; 166 | @infoBackground: #d9edf7; 167 | @infoBorder: darken(spin(@infoBackground, -10), 7%); 168 | 169 | /* Tooltips and popovers */ 170 | @tooltipColor: #fff; 171 | @tooltipBackground: #000; 172 | @tooltipArrowWidth: 5px; 173 | @tooltipArrowColor: @tooltipBackground; 174 | 175 | @popoverBackground: #fff; 176 | @popoverArrowWidth: 10px; 177 | @popoverArrowColor: #fff; 178 | @popoverTitleBackground: darken(@popoverBackground, 3%); 179 | 180 | // Special enhancement for popovers 181 | @popoverArrowOuterWidth: @popoverArrowWidth + 1; 182 | @popoverArrowOuterColor: rgba(0,0,0,.25); 183 | 184 | /* 栅格 */ 185 | // 默认940px 186 | @gridColumns: 12; 187 | @gridColumnWidth: 60px; 188 | @gridGutterWidth: 20px; 189 | @gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); 190 | 191 | // 1200px 192 | @gridColumnWidth1200: 70px; 193 | @gridGutterWidth1200: 30px; 194 | @gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1)); 195 | 196 | // 768px-979px 197 | @gridColumnWidth768: 42px; 198 | @gridGutterWidth768: 20px; 199 | @gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1)); 200 | 201 | // 流体栅格 202 | @fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth); 203 | @fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth); 204 | 205 | // 1200px 206 | @fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200); 207 | @fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200); 208 | 209 | // 768px-979px 210 | @fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768); 211 | @fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | JQM-me 2 | ====== 3 | 4 | - 博客中文章页面 5 | - [博客请进入](http://www.uselessblog.cn/) 6 | - [柚子播放器源码（react）](https://github.com/ellyliang/JQM-me/tree/gh-pages/newPlayer) 7 | - [柚子播放器源码（Angular）](https://coding.net/u/useLess/p/Angularjs-Player/git) 8 | 9 | 10 | 注：播放器虽然用react，NG，但其实里边代码写的挺烂的。设计版权属于柚子哈！ 11 | 12 | 哈哈哈哈哈.....坚持！加油！ 13 | -------------------------------------------------------------------------------- /book.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 83 | 84 | 85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 | 94 | -------------------------------------------------------------------------------- /calendar/calendar.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author: 柚子 3 | * @date: 2016-04-09 4 | * @description: 纯属练习写日历组件 5 | */ 6 | 7 | var YzCalendar = function(options) { 8 | if(!options) options = {}; 9 | return function(options) { 10 | var self = this, 11 | today = new Date(), 12 | currentYear = today.getFullYear(), 13 | currentMonth = today.getMonth(), 14 | currentDate = today.getDate(); 15 | 16 | this.dom = options.dom; // 控制的节点 17 | this.inputDom = options.inputDom; // 展示时间的节点 18 | 19 | // 是否为闰年 20 | var _isLeapYear = function(year) { 21 | return (year % 4 == 0 && year % 100 !== 0) || (year % 400 === 0); 22 | }; 23 | 24 | // 根据年月计算天 25 | var _months = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; 26 | var _calculateDays = function(year, month) { 27 | var days = _months[month]; 28 | if(month === 1 && _isLeapYear(year)) { // 2月比较特殊，非闰年28天，闰年29天 29 | days = 29; 30 | } 31 | 32 | return days; 33 | }; 34 | 35 | // 某年某月的第一天是星期几 36 | var _getFirstDays = function(year, month) { 37 | var dt = new Date(year, month, 1), 38 | weekend = dt.getDay(); 39 | 40 | return weekend; 41 | }; 42 | 43 | // 格式化日期 44 | this.format = function(day) { 45 | var date = '', 46 | formatMonth = ''; 47 | if(currentMonth < 10) { 48 | formatMonth = '0' + currentMonth; 49 | } 50 | date = currentYear + '年' + (+formatMonth+1) + '月' + day + '日'; 51 | 52 | return date; 53 | }; 54 | 55 | // 渲染 56 | this.render = function(year, month, day) { 57 | var dayLi = '', 58 | monthFirsDays = _getFirstDays(year, month); 59 | for(var m=0, mLen=monthFirsDays; m'; 64 | } 65 | 66 | self.dom.find('.yz-days').html(dayLi); 67 | self.dom.find('.yz-days li:eq('+ (day-1+monthFirsDays) +')').addClass('current'); 68 | self.dom.find('.yz-months').html(month+1); 69 | self.dom.find('.yz-years').html(year); 70 | }; 71 | 72 | // 默认 73 | this.init = (function() { 74 | self.render(currentYear, currentMonth, currentDate); 75 | self.inputDom.val(self.format(currentDate)); 76 | })(); 77 | 78 | // 上一年跟下一年处理 79 | var clickTriangle = function() { 80 | if(currentMonth < 0) { 81 | currentYear --; 82 | currentMonth = 11; 83 | } 84 | if(currentMonth > 11) { 85 | currentYear ++; 86 | currentMonth = 0; 87 | } 88 | 89 | self.render(currentYear, currentMonth, currentDate); 90 | self.inputDom.val(self.format(currentDate)); 91 | }; 92 | 93 | // 事件 94 | this.events = (function() { 95 | // 上一年 96 | $('.triangle-left').click(function() { 97 | currentMonth --; 98 | clickTriangle(); 99 | }); 100 | // 下一年 101 | $('.triangle-right').click(function() { 102 | currentMonth ++; 103 | clickTriangle(); 104 | }); 105 | // 选择DAY 106 | $('.yz-days').on('click', 'li', function() { 107 | var day = $(this).html(); 108 | if(day === '') return; 109 | $(this).addClass('current').siblings().removeClass('current'); 110 | self.inputDom.val(self.format(day)); 111 | }); 112 | })(); 113 | } 114 | }; 115 | var yzcalendar = new YzCalendar; 116 | 117 | $(function() { 118 | yzcalendar({ 119 | dom : $('#jYzCalendar'), 120 | inputDom : $('#jYzInput') 121 | }); 122 | }); -------------------------------------------------------------------------------- /calendar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 柚子日历 7 | 8 | 9 | 10 |
11 |
12 |

13 | 14 | 2016 15 | 年 16 | 4 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 |

    闲的慌，搞了个React版本 >>

    44 | 45 |
    46 | powered by youzi. 47 |
    48 |
    49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /calendar/yz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ellyliang/JQM-me/894f19ff1e59dd23da1e4883c84f34670d452515/calendar/yz.png -------------------------------------------------------------------------------- /calendar/yzCalendar.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system-font, "Helvetica Neue", Helvetica, STHeiTi, sans-serif; 5 | } 6 | body, 7 | html { 8 | height: 100%; 9 | background-color: #F9D7EA; 10 | } 11 | .clearfix:after { 12 | content: " "; /* Older browser do not support empty content */ 13 | visibility: hidden; 14 | display: block; 15 | height: 0; 16 | clear: both; 17 | } 18 | .calendar { 19 | width: 100%; 20 | height: 100%; 21 | } 22 | .calendar .yz-days { 23 | margin-left: 2%; 24 | } 25 | .calendar li { 26 | width: 14%; 27 | list-style: none; 28 | display: inline-block; 29 | color: #E01F90; 30 | } 31 | .calendar .calendar-header { 32 | height: 50px; 33 | line-height: 50px; 34 | border-bottom: 3px solid #E01F90; 35 | text-align: center; 36 | position: relative; 37 | } 38 | .calendar .calendar-header .icon-yz { 39 | display: inline-block; 40 | width: 62px; 41 | height: 53px; 42 | background: url(yz.png) 0 0 no-repeat; 43 | background-size: 100%; 44 | vertical-align: middle; 45 | } 46 | .calendar .triangle-left { 47 | position: absolute; 48 | width: 0; 49 | height: 0; 50 | top: 16px; 51 | left: 16px; 52 | border-top: 10px solid transparent; 53 | border-right: 20px solid #E01F90; 54 | border-bottom: 10px solid transparent; 55 | cursor: pointer; 56 | } 57 | .calendar .triangle-right { 58 | position: absolute; 59 | width: 0; 60 | height: 0; 61 | top: 16px; 62 | right: 16px; 63 | border-top: 10px solid transparent; 64 | border-left: 20px solid #E01F90; 65 | border-bottom: 10px solid transparent; 66 | cursor: pointer; 67 | } 68 | .calendar .calendar-day li { 69 | height: 45px; 70 | line-height: 45px; 71 | border-radius: 5px; 72 | text-align: center; 73 | vertical-align: bottom; 74 | color: #94898F; 75 | } 76 | .calendar .calendar-day li:hover { 77 | // background-color: #F9F7F7; 78 | cursor: pointer; 79 | } 80 | .calendar .weekday { 81 | padding: 10px 0; 82 | } 83 | .calendar .weekday li { 84 | height: 19px; 85 | text-align: center; 86 | margin-left: -4px; 87 | } 88 | .calendar .calendarInput { 89 | padding: 20px 10px; 90 | margin-top: 20px; 91 | border-top: 3px solid #E01F90; 92 | } 93 | .calendar .calendarInput input { 94 | box-sizing: border-box; 95 | width: 100%; 96 | height: 40px; 97 | padding: 5px; 98 | text-align: center; 99 | border-radius: 5px; 100 | border: 1px solid #94898F; 101 | } 102 | .calendar .calendar-day li.current { 103 | background-color: #fff; 104 | color: #E01F90; 105 | font-weight: bold; 106 | } 107 | .calendar .calendarJQ { 108 | text-align: center; 109 | } 110 | .calendar .calendarJQ a { 111 | text-decoration: none; 112 | font-size: 14px; 113 | font-weight: bold; 114 | color: #E01F90; 115 | } 116 | .footer { 117 | position: absolute; 118 | bottom: 0; 119 | width: 100%; 120 | padding: 10px 0; 121 | color: #94898F; 122 | text-align: center; 123 | } -------------------------------------------------------------------------------- /contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | useLess 5 | 6 | 7 | 8 | 9 | 10 |
    11 | 14 |
    15 |
    16 |

    Works

    17 | 24 | 25 |

    Motto

    26 |

    没有做不到的事，只有迈不出的坎！

    27 | 28 |

    Blog&Github

    29 | 33 | 34 |

    Contact

    35 | 40 |
    41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /css/common.css: -------------------------------------------------------------------------------- 1 | .clearfix{*zoom:1}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0}.clearfix:after{clear:both}.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.input-block-level{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body,p,input,h1,h2,h3,h4,h5,h6,ul,li,dl,dt,dd,form{margin:0;padding:0;list-style:none;vertical-align:middle;font-weight:normal}img{border:0;margin:0;padding:0}body{color:#000;-webkit-user-select:none;-webkit-text-size-adjust:none;font-family:"微软雅黑",helvetica,arial;font-size:1.2em;text-align:left}header,section,footer{display:block;margin:0;padding:0}body{background:#f4f4f4}a{color:#f39;text-decoration:none}a:hover{color:#fff} -------------------------------------------------------------------------------- /css/common.less: -------------------------------------------------------------------------------- 1 | @import "global.less"; 2 | 3 | //reset 4 | body, p, input, h1, h2, h3, h4, h5, h6, ul, li, dl, dt, dd, form { 5 | margin: 0; 6 | padding: 0; 7 | list-style: none; 8 | vertical-align: middle; 9 | font-weight:normal; 10 | } 11 | img { 12 | border:0; 13 | margin: 0; 14 | padding: 0; 15 | } 16 | body { 17 | color: #000; 18 | -webkit-user-select: none; 19 | -webkit-text-size-adjust: none; 20 | font-family: "微软雅黑",helvetica,arial; 21 | font-size: 1.2em; 22 | text-align:left; 23 | } 24 | header, section, footer { 25 | display: block; 26 | margin: 0; 27 | padding: 0 28 | } 29 | 30 | body{ 31 | background:#f4f4f4; 32 | } 33 | a { 34 | color: @pink; 35 | text-decoration: none; 36 | &:hover { 37 | color: @white; 38 | } 39 | } -------------------------------------------------------------------------------- /css/contact.css: -------------------------------------------------------------------------------- 1 | .clearfix{*zoom:1}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0}.clearfix:after{clear:both}.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.input-block-level{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body,p,input,h1,h2,h3,h4,h5,h6,ul,li,dl,dt,dd,form{margin:0;padding:0;list-style:none;vertical-align:middle;font-weight:normal}img{border:0;margin:0;padding:0}body{color:#000;-webkit-user-select:none;-webkit-text-size-adjust:none;font-family:"微软雅黑",helvetica,arial;font-size:1.2em;text-align:left}header,section,footer{display:block;margin:0;padding:0}body{background:#f4f4f4}a{color:#f39;text-decoration:none}a:hover{color:#fff}body,html{background:#333}.nav{padding-top:.5em}.nav a{padding-left:.5em}.content{margin:10px 10px 90px}.content .title{padding-left:5px;color:#fff;font-size:.9em;border-left:4px solid #f39}.content ul{padding:10px 0 20px 5px}.content li{padding-top:.2em;color:#fff;font-size:.8em}.content i{display:inline-block;width:20px;height:20px;text-align:center;vertical-align:top}.content a{display:inline-block;width:90%;color:#fff}.content a:hover{color:#f39}.content .motto{color:#fff;font-size:.8em;padding:1em .5em 1.5em} -------------------------------------------------------------------------------- /css/contact.less: -------------------------------------------------------------------------------- 1 | @import "global.less"; 2 | @import "common.less"; 3 | 4 | body, html { 5 | background: #333; 6 | } 7 | .nav { 8 | padding-top: .5em; 9 | a { 10 | padding-left: .5em; 11 | } 12 | } 13 | .content { 14 | margin: 10px 10px 90px; 15 | .title { 16 | padding-left: 5px; 17 | color: @white; 18 | font-size: .9em; 19 | border-left: 4px solid @pink; 20 | } 21 | ul { 22 | padding: 10px 0 20px 5px; 23 | } 24 | li { 25 | padding-top: .2em; 26 | color: @white; 27 | font-size: .8em; 28 | } 29 | i { 30 | display: inline-block; 31 | .size(20px, 20px); 32 | text-align: center; 33 | vertical-align: top; 34 | } 35 | a { 36 | display: inline-block; 37 | width: 90%; 38 | color: @white; 39 | &:hover { 40 | color: @pink; 41 | } 42 | } 43 | .motto { 44 | color: @white; 45 | font-size: .8em; 46 | padding: 1em .5em 1.5em; 47 | } 48 | 49 | } -------------------------------------------------------------------------------- /css/global.css: -------------------------------------------------------------------------------- 1 | .clearfix{*zoom:1}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0}.clearfix:after{clear:both}.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.input-block-level{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} -------------------------------------------------------------------------------- /css/global.less: -------------------------------------------------------------------------------- 1 | @import "mixins.less"; 2 | @import "variables.less"; 3 | 4 | //Color 5 | @pink: #FF3399; -------------------------------------------------------------------------------- /css/guide.css: -------------------------------------------------------------------------------- 1 | .clearfix{*zoom:1}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0}.clearfix:after{clear:both}.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.input-block-level{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body,p,input,h1,h2,h3,h4,h5,h6,ul,li,dl,dt,dd,form{margin:0;padding:0;list-style:none;vertical-align:middle;font-weight:normal}img{border:0;margin:0;padding:0}body{color:#000;-webkit-user-select:none;-webkit-text-size-adjust:none;font-family:"微软雅黑",helvetica,arial;font-size:1.2em;text-align:left}header,section,footer{display:block;margin:0;padding:0}body{background:#f4f4f4}a{color:#f39;text-decoration:none}a:hover{color:#fff}body,html{background-color:#ff338b;background-image:-moz-linear-gradient(top, #f39, #f37);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#f39), to(#f37));background-image:-webkit-linear-gradient(top, #f39, #f37);background-image:-o-linear-gradient(top, #f39, #f37);background-image:linear-gradient(to bottom, #f39, #f37);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff3399', endColorstr='#ffff3377', GradientType=0)}.instroduce{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%, -50%);text-align:center}.instroduce img{display:block;max-width:150px;max-height:150px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;-webkit-box-shadow:0 0 17px #333;-moz-box-shadow:0 0 17px #333;box-shadow:0 0 17px #333}.instroduce .author-link{display:block;color:#333}.instroduce .author-link p{text-shadow:2px 1px 2px #333;padding-top:.5em;font-size:1.5em} -------------------------------------------------------------------------------- /css/guide.less: -------------------------------------------------------------------------------- 1 | @import "global.less"; 2 | @import "common.less"; 3 | 4 | body, html { 5 | #gradient .vertical(#f39, #f37); 6 | } 7 | .instroduce { 8 | position: absolute; 9 | left: 50%; 10 | top: 50%; 11 | -webkit-transform: translate(-50%, -50%); 12 | text-align: center; 13 | 14 | img { 15 | display: block; 16 | max-width: 150px; 17 | max-height: 150px; 18 | .border-radius(50%); 19 | .box-shadow(0 0 17px #333); 20 | } 21 | 22 | .author-link { 23 | display: block; 24 | color: #333; 25 | p { 26 | text-shadow: 2px 1px 2px #333; 27 | padding-top: .5em; 28 | font-size: 1.5em; 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /css/index.css: -------------------------------------------------------------------------------- 1 | .clearfix{*zoom:1}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0}.clearfix:after{clear:both}.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.input-block-level{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body,p,input,h1,h2,h3,h4,h5,h6,ul,li,dl,dt,dd,form{margin:0;padding:0;list-style:none;vertical-align:middle;font-weight:normal}img{border:0;margin:0;padding:0}body{color:#000;-webkit-user-select:none;-webkit-text-size-adjust:none;font-family:"微软雅黑",helvetica,arial;font-size:1.2em;text-align:left}header,section,footer{display:block;margin:0;padding:0}body{background:#f4f4f4}a{color:#f39;text-decoration:none}a:hover{color:#fff}.header{height:200px;background:#333}.nav{padding-top:.5em}.nav a{padding-left:.5em}.logo{width:100px;margin:0 auto;margin-top:1em;text-align:center}.logo img{width:100px;height:100px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;-webkit-box-shadow:0 0 15px #fff;-moz-box-shadow:0 0 15px #fff;box-shadow:0 0 15px #fff}.logo p{padding-top:.2em;color:#f39}.content{position:relative;padding-bottom:30px;background:#f39}.content .title{position:absolute;top:-30px;width:50px;height:50px;color:#fff;text-align:center;line-height:50px;font-size:22px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;background:#333}.content .tech-title{position:absolute;bottom:-25px;left:0;width:50px;height:50px;color:#fff;text-align:center;line-height:50px;font-size:22px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;background:#f39}.instro{padding:1.5em 0 0 .5em}.instro p{font-size:.9em;color:#fff}hr{position:relative;border:1px solid #66cd99;margin:.5em}hr:before{position:absolute;top:-1px;left:-1px;content:'';width:100px;border:1px solid #fe9b00}.tech{padding:0 .5em;color:#fff;font-size:.8em}.tech li{padding-top:.2em}.tech i{display:inline-block;width:20px;height:20px;text-align:center;vertical-align:top}.tech span{display:inline-block;width:90%}.picScroll{margin:30px auto 0;text-align:center}.picScroll .bd ul{width:100%;float:left;padding-top:10px}.picScroll .bd li{width:33%;float:left;font-size:14px;text-align:center}.picScroll .bd li a{-webkit-tap-highlight-color:rgba(0,0,0,0)}.picScroll .bd li img{width:90px;height:142px;background:url(../images/loading.gif) #fff center center no-repeat}.picScroll .hd{height:40px;padding:0 10px;margin-top:.5em;line-height:40px;border-top:2px solid #f39;border-bottom:2px solid #f39;background:#f6f6f6;overflow:hidden;text-align:left}.picScroll .hd ul{float:right;padding-top:16px}.picScroll .hd li{float:left;width:8px;height:8px;margin:0 5px;background:#d0d0d0;overflow:hidden;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px}.picScroll .hd .on{background:#f39}.picScroll .prev,.picScroll .next{display:block;float:right;width:18px;height:18px;margin:11px 5px 0 5px;background:url(../images/pisScrollIcons.gif) -6px -7px no-repeat;overflow:hidden}.picScroll .next{background-position:-34px -7px}.picScroll .prevStop{background-position:-6px -40px}.picScroll .nextStop{background-position:-34px -40px} -------------------------------------------------------------------------------- /css/index.less: -------------------------------------------------------------------------------- 1 | @import "global.less"; 2 | @import "common.less"; 3 | 4 | .header { 5 | height: 200px; 6 | background: #333; 7 | } 8 | .nav { 9 | padding-top: .5em; 10 | a { 11 | padding-left: .5em; 12 | } 13 | } 14 | .logo { 15 | width: 100px; 16 | margin: 0 auto; 17 | margin-top: 1em; 18 | text-align: center; 19 | img { 20 | .size(100px, 100px); 21 | .border-radius(50%); 22 | .box-shadow(0 0 15px #fff); 23 | } 24 | 25 | p { 26 | padding-top: .2em; 27 | color: @pink; 28 | } 29 | } 30 | .content { 31 | position: relative; 32 | padding-bottom: 30px; 33 | background: @pink; 34 | .title { 35 | position: absolute; 36 | top: -30px; 37 | .size(50px, 50px); 38 | color: @white; 39 | text-align: center; 40 | line-height: 50px; 41 | font-size: @baseFontSize + 8; 42 | .border-radius(50%); 43 | background: #333; 44 | } 45 | .tech-title { 46 | position: absolute; 47 | bottom: -25px; 48 | left: 0; 49 | .size(50px, 50px); 50 | color: @white; 51 | text-align: center; 52 | line-height: 50px; 53 | font-size: @baseFontSize + 8; 54 | .border-radius(50%); 55 | background: @pink; 56 | } 57 | } 58 | .instro { 59 | padding: 1.5em 0 0 .5em; 60 | p { 61 | font-size: .9em; 62 | color: @white; 63 | } 64 | } 65 | hr { 66 | position: relative; 67 | border: 1px solid #66cd99; 68 | margin: .5em; 69 | 70 | &:before { 71 | position: absolute; 72 | top: -1px; 73 | left: -1px; 74 | content: ''; 75 | width: 100px; 76 | border: 1px solid #fe9b00; 77 | } 78 | } 79 | .tech { 80 | padding: 0 .5em; 81 | color: @white; 82 | font-size: .8em; 83 | li { 84 | padding-top: .2em; 85 | } 86 | i { 87 | display: inline-block; 88 | .size(20px, 20px); 89 | text-align: center; 90 | vertical-align: top; 91 | } 92 | span { 93 | display: inline-block; 94 | width: 90%; 95 | } 96 | } 97 | 98 | .picScroll{ 99 | margin:30px auto 0; 100 | text-align:center; 101 | } 102 | .picScroll .bd ul{ 103 | width:100%; 104 | float:left; 105 | padding-top:10px; 106 | } 107 | .picScroll .bd li{ 108 | width:33%; 109 | float:left; 110 | font-size:14px; 111 | text-align:center; 112 | } 113 | .picScroll .bd li a{ 114 | -webkit-tap-highlight-color:rgba(0, 0, 0, 0); 115 | /* 取消链接高亮 */; 116 | } 117 | .picScroll .bd li img{ 118 | width:90px; 119 | height:142px; 120 | background:url(../images/loading.gif) #fff center center no-repeat; 121 | } 122 | 123 | //slide 124 | .picScroll .hd{ 125 | height: 40px; 126 | padding: 0 10px; 127 | margin-top: .5em; 128 | line-height: 40px; 129 | border-top: 2px solid @pink; 130 | border-bottom: 2px solid @pink; 131 | background: #f6f6f6; 132 | overflow: hidden; 133 | text-align: left; 134 | } 135 | .picScroll .hd ul{ 136 | float: right; 137 | padding-top: 16px; 138 | } 139 | .picScroll .hd li{ 140 | float: left; 141 | width: 8px; 142 | height: 8px; 143 | margin: 0 5px; 144 | background: #D0D0D0; 145 | overflow: hidden; 146 | -webkit-border-radius: 8px; 147 | -moz-border-radius: 8px; 148 | border-radius: 8px; 149 | } 150 | .picScroll .hd .on{ 151 | background: @pink; 152 | } 153 | .picScroll .prev,.picScroll .next{ 154 | display: block; 155 | float: right; 156 | width: 18px; 157 | height: 18px; 158 | margin: 11px 5px 0 5px; 159 | background: url(../images/pisScrollIcons.gif) -6px -7px no-repeat; 160 | overflow: hidden; 161 | } 162 | .picScroll .next{ 163 | background-position: -34px -7px; 164 | } 165 | .picScroll .prevStop{ 166 | background-position: -6px -40px; 167 | } 168 | .picScroll .nextStop{ 169 | background-position: -34px -40px; 170 | } -------------------------------------------------------------------------------- /css/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.1 | MIT License | git.io/normalize */ 2 | 3 | /** 4 | * 1. Set default font family to sans-serif. 5 | * 2. Prevent iOS text size adjust after orientation change, without disabling 6 | * user zoom. 7 | */ 8 | 9 | html { 10 | font-family: sans-serif; /* 1 */ 11 | -ms-text-size-adjust: 100%; /* 2 */ 12 | -webkit-text-size-adjust: 100%; /* 2 */ 13 | } 14 | 15 | /** 16 | * Remove default margin. 17 | */ 18 | 19 | body { 20 | margin: 0; 21 | } 22 | 23 | /* HTML5 display definitions 24 | ========================================================================== */ 25 | 26 | /** 27 | * Correct `block` display not defined for any HTML5 element in IE 8/9. 28 | * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. 29 | * Correct `block` display not defined for `main` in IE 11. 30 | */ 31 | 32 | article, 33 | aside, 34 | details, 35 | figcaption, 36 | figure, 37 | footer, 38 | header, 39 | hgroup, 40 | main, 41 | nav, 42 | section, 43 | summary { 44 | display: block; 45 | } 46 | 47 | /** 48 | * 1. Correct `inline-block` display not defined in IE 8/9. 49 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 50 | */ 51 | 52 | audio, 53 | canvas, 54 | progress, 55 | video { 56 | display: inline-block; /* 1 */ 57 | vertical-align: baseline; /* 2 */ 58 | } 59 | 60 | /** 61 | * Prevent modern browsers from displaying `audio` without controls. 62 | * Remove excess height in iOS 5 devices. 63 | */ 64 | 65 | audio:not([controls]) { 66 | display: none; 67 | height: 0; 68 | } 69 | 70 | /** 71 | * Address `[hidden]` styling not present in IE 8/9/10. 72 | * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. 73 | */ 74 | 75 | [hidden], 76 | template { 77 | display: none; 78 | } 79 | 80 | /* Links 81 | ========================================================================== */ 82 | 83 | /** 84 | * Remove the gray background color from active links in IE 10. 85 | */ 86 | 87 | a { 88 | background: transparent; 89 | } 90 | 91 | /** 92 | * Improve readability when focused and also mouse hovered in all browsers. 93 | */ 94 | 95 | a:active, 96 | a:hover { 97 | outline: 0; 98 | } 99 | 100 | /* Text-level semantics 101 | ========================================================================== */ 102 | 103 | /** 104 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome. 105 | */ 106 | 107 | abbr[title] { 108 | border-bottom: 1px dotted; 109 | } 110 | 111 | /** 112 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 113 | */ 114 | 115 | b, 116 | strong { 117 | font-weight: bold; 118 | } 119 | 120 | /** 121 | * Address styling not present in Safari and Chrome. 122 | */ 123 | 124 | dfn { 125 | font-style: italic; 126 | } 127 | 128 | /** 129 | * Address variable `h1` font-size and margin within `section` and `article` 130 | * contexts in Firefox 4+, Safari, and Chrome. 131 | */ 132 | 133 | h1 { 134 | font-size: 2em; 135 | margin: 0.67em 0; 136 | } 137 | 138 | /** 139 | * Address styling not present in IE 8/9. 140 | */ 141 | 142 | mark { 143 | background: #ff0; 144 | color: #000; 145 | } 146 | 147 | /** 148 | * Address inconsistent and variable font size in all browsers. 149 | */ 150 | 151 | small { 152 | font-size: 80%; 153 | } 154 | 155 | /** 156 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 157 | */ 158 | 159 | sub, 160 | sup { 161 | font-size: 75%; 162 | line-height: 0; 163 | position: relative; 164 | vertical-align: baseline; 165 | } 166 | 167 | sup { 168 | top: -0.5em; 169 | } 170 | 171 | sub { 172 | bottom: -0.25em; 173 | } 174 | 175 | /* Embedded content 176 | ========================================================================== */ 177 | 178 | /** 179 | * Remove border when inside `a` element in IE 8/9/10. 180 | */ 181 | 182 | img { 183 | border: 0; 184 | } 185 | 186 | /** 187 | * Correct overflow not hidden in IE 9/10/11. 188 | */ 189 | 190 | svg:not(:root) { 191 | overflow: hidden; 192 | } 193 | 194 | /* Grouping content 195 | ========================================================================== */ 196 | 197 | /** 198 | * Address margin not present in IE 8/9 and Safari. 199 | */ 200 | 201 | figure { 202 | margin: 1em 40px; 203 | } 204 | 205 | /** 206 | * Address differences between Firefox and other browsers. 207 | */ 208 | 209 | hr { 210 | -moz-box-sizing: content-box; 211 | box-sizing: content-box; 212 | height: 0; 213 | } 214 | 215 | /** 216 | * Contain overflow in all browsers. 217 | */ 218 | 219 | pre { 220 | overflow: auto; 221 | } 222 | 223 | /** 224 | * Address odd `em`-unit font size rendering in all browsers. 225 | */ 226 | 227 | code, 228 | kbd, 229 | pre, 230 | samp { 231 | font-family: monospace, monospace; 232 | font-size: 1em; 233 | } 234 | 235 | /* Forms 236 | ========================================================================== */ 237 | 238 | /** 239 | * Known limitation: by default, Chrome and Safari on OS X allow very limited 240 | * styling of `select`, unless a `border` property is set. 241 | */ 242 | 243 | /** 244 | * 1. Correct color not being inherited. 245 | * Known issue: affects color of disabled elements. 246 | * 2. Correct font properties not being inherited. 247 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 248 | */ 249 | 250 | button, 251 | input, 252 | optgroup, 253 | select, 254 | textarea { 255 | color: inherit; /* 1 */ 256 | font: inherit; /* 2 */ 257 | margin: 0; /* 3 */ 258 | } 259 | 260 | /** 261 | * Address `overflow` set to `hidden` in IE 8/9/10/11. 262 | */ 263 | 264 | button { 265 | overflow: visible; 266 | } 267 | 268 | /** 269 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 270 | * All other form control elements do not inherit `text-transform` values. 271 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 272 | * Correct `select` style inheritance in Firefox. 273 | */ 274 | 275 | button, 276 | select { 277 | text-transform: none; 278 | } 279 | 280 | /** 281 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 282 | * and `video` controls. 283 | * 2. Correct inability to style clickable `input` types in iOS. 284 | * 3. Improve usability and consistency of cursor style between image-type 285 | * `input` and others. 286 | */ 287 | 288 | button, 289 | html input[type="button"], /* 1 */ 290 | input[type="reset"], 291 | input[type="submit"] { 292 | -webkit-appearance: button; /* 2 */ 293 | cursor: pointer; /* 3 */ 294 | } 295 | 296 | /** 297 | * Re-set default cursor for disabled elements. 298 | */ 299 | 300 | button[disabled], 301 | html input[disabled] { 302 | cursor: default; 303 | } 304 | 305 | /** 306 | * Remove inner padding and border in Firefox 4+. 307 | */ 308 | 309 | button::-moz-focus-inner, 310 | input::-moz-focus-inner { 311 | border: 0; 312 | padding: 0; 313 | } 314 | 315 | /** 316 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 317 | * the UA stylesheet. 318 | */ 319 | 320 | input { 321 | line-height: normal; 322 | } 323 | 324 | /** 325 | * It's recommended that you don't attempt to style these elements. 326 | * Firefox's implementation doesn't respect box-sizing, padding, or width. 327 | * 328 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 329 | * 2. Remove excess padding in IE 8/9/10. 330 | */ 331 | 332 | input[type="checkbox"], 333 | input[type="radio"] { 334 | box-sizing: border-box; /* 1 */ 335 | padding: 0; /* 2 */ 336 | } 337 | 338 | /** 339 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain 340 | * `font-size` values of the `input`, it causes the cursor style of the 341 | * decrement button to change from `default` to `text`. 342 | */ 343 | 344 | input[type="number"]::-webkit-inner-spin-button, 345 | input[type="number"]::-webkit-outer-spin-button { 346 | height: auto; 347 | } 348 | 349 | /** 350 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome. 351 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome 352 | * (include `-moz` to future-proof). 353 | */ 354 | 355 | input[type="search"] { 356 | -webkit-appearance: textfield; /* 1 */ 357 | -moz-box-sizing: content-box; 358 | -webkit-box-sizing: content-box; /* 2 */ 359 | box-sizing: content-box; 360 | } 361 | 362 | /** 363 | * Remove inner padding and search cancel button in Safari and Chrome on OS X. 364 | * Safari (but not Chrome) clips the cancel button when the search input has 365 | * padding (and `textfield` appearance). 366 | */ 367 | 368 | input[type="search"]::-webkit-search-cancel-button, 369 | input[type="search"]::-webkit-search-decoration { 370 | -webkit-appearance: none; 371 | } 372 | 373 | /** 374 | * Define consistent border, margin, and padding. 375 | */ 376 | 377 | fieldset { 378 | border: 1px solid #c0c0c0; 379 | margin: 0 2px; 380 | padding: 0.35em 0.625em 0.75em; 381 | } 382 | 383 | /** 384 | * 1. Correct `color` not being inherited in IE 8/9/10/11. 385 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 386 | */ 387 | 388 | legend { 389 | border: 0; /* 1 */ 390 | padding: 0; /* 2 */ 391 | } 392 | 393 | /** 394 | * Remove default vertical scrollbar in IE 8/9/10/11. 395 | */ 396 | 397 | textarea { 398 | overflow: auto; 399 | } 400 | 401 | /** 402 | * Don't inherit the `font-weight` (applied by a rule above). 403 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 404 | */ 405 | 406 | optgroup { 407 | font-weight: bold; 408 | } 409 | 410 | /* Tables 411 | ========================================================================== */ 412 | 413 | /** 414 | * Remove most spacing between table cells. 415 | */ 416 | 417 | table { 418 | border-collapse: collapse; 419 | border-spacing: 0; 420 | } 421 | 422 | td, 423 | th { 424 | padding: 0; 425 | } 426 | -------------------------------------------------------------------------------- /drag.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | drag 6 | 7 | 8 | 9 | 27 | 28 | 29 |
    30 | 31 | 79 | 80 | -------------------------------------------------------------------------------- /example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | css3-smile 6 | 70 | 71 | 72 |
    73 | 74 | 75 | 76 |

    Yeah~We must smile to life!

    77 |
    78 | 79 | -------------------------------------------------------------------------------- /guide.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | useLess 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
    13 | 16 | 20 |
    21 |
    22 |

    介

    23 |
    24 |

    Hi~我叫梁成妹，英文名Ellyliang

    25 |

    目前您是否在为公司物色人才而头疼呢？

    26 |

    哈，别沮丧，我是您的最佳人选！

    27 |
    28 |
    29 |
    30 |

    朋

    31 |
      32 |
    • 1.熟悉html, css(less), Javascript(Jquery)
      • 33 |
    • 2.熟悉html5, css3
      • 34 |
    • 3.有响应式项目经验，ps：bootstrap做监控系统
      • 35 |
    • 4.注重模块化开发。ps:之前使用的是淘宝的 seajs + arale + alice 开发项目,模 块化开发,能提高团队开发效率;
      • 36 |
    • 5.自己额外了解的技术有: grunt , jquery mobile , handlebarjs, toosolo等;
      • 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 | 74 | 75 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ellyliang/JQM-me/894f19ff1e59dd23da1e4883c84f34670d452515/images/1.jpg -------------------------------------------------------------------------------- /images/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ellyliang/JQM-me/894f19ff1e59dd23da1e4883c84f34670d452515/images/4.png -------------------------------------------------------------------------------- /images/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ellyliang/JQM-me/894f19ff1e59dd23da1e4883c84f34670d452515/images/5.jpg -------------------------------------------------------------------------------- /images/blank.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ellyliang/JQM-me/894f19ff1e59dd23da1e4883c84f34670d452515/images/blank.png -------------------------------------------------------------------------------- /images/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ellyliang/JQM-me/894f19ff1e59dd23da1e4883c84f34670d452515/images/loading.gif -------------------------------------------------------------------------------- /images/me.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ellyliang/JQM-me/894f19ff1e59dd23da1e4883c84f34670d452515/images/me.jpg -------------------------------------------------------------------------------- /images/pisScrollIcons.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ellyliang/JQM-me/894f19ff1e59dd23da1e4883c84f34670d452515/images/pisScrollIcons.gif -------------------------------------------------------------------------------- /images/snail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ellyliang/JQM-me/894f19ff1e59dd23da1e4883c84f34670d452515/images/snail.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | useLess 5 | 6 | 7 | 8 | 9 | 10 |
      11 | 12 | 13 |

      useLess

      14 |       15 |
      16 | 17 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /jqm.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Jquery Mobile 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
      14 |
      15 |

      useLess

      16 |
      17 | 22 |
      23 |
      24 | 25 |
      26 |

      欢迎来到useLess的计划目录！

      27 | 28 |
      29 |

      点击有惊喜！！！

      30 |

      哈哈，惊喜就是没有惊喜！！！

      31 |
      32 |
      33 | 34 |
      35 |
      36 | 新浪 37 | QQ 38 | github 39 |
      40 |
      41 |
      42 | 43 |
      44 |
      45 |

      useLess

      46 |
      47 | 48 |
      49 | 50 |
      51 | 52 |
      53 |

      版权归useLess所有！

      54 |
      55 |
      56 | 57 | 58 |
      59 |
      60 |

      useLess

      61 |
      62 | 67 |
      68 |
      69 | 70 |
      71 |
      72 |
      73 | 74 | 75 |
      76 |
      77 | 78 | 79 |
      80 |
      81 |
      82 | 83 |
      84 |
      85 | 新浪 86 | QQ 87 | github 88 |
      89 |
      90 |
      91 | 92 | 93 |
      94 |
      95 |

      useLess

      96 |
      97 | 102 |
      103 |
      104 | 105 |
      106 | 112 |
      113 | 114 |
      115 |
      116 | 新浪 117 | QQ 118 | github 119 |
      120 |
      121 |
      122 | 123 | -------------------------------------------------------------------------------- /newPlayer/.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | end_of_line = lf 7 | indent_size = 2 8 | indent_style = space 9 | insert_final_newline = true 10 | max_line_length = 80 11 | trim_trailing_whitespace = true 12 | 13 | [*.md] 14 | max_line_length = 0 15 | trim_trailing_whitespace = false 16 | 17 | [COMMIT_EDITMSG] 18 | max_line_length = 0 -------------------------------------------------------------------------------- /newPlayer/.eslintignore: -------------------------------------------------------------------------------- 1 | # We can probably lint these later but not important at this point 2 | src/shared/vendor 3 | # But not in docs/_js/examples/* 4 | docs/_js/*.js 5 | docs/js/ 6 | docs/_site/ 7 | # gems 8 | docs/vendor/bundle/ 9 | # This should be more like examples/**/thirdparty/** but 10 | # we should fix https://github.com/facebook/esprima/pull/85 first 11 | examples/ 12 | # Ignore built files. 13 | build/ 14 | scripts/bench/bench-*.js 15 | vendor/* 16 | -------------------------------------------------------------------------------- /newPlayer/.eslintrc: -------------------------------------------------------------------------------- 1 | --- 2 | parser: babel-eslint 3 | 4 | extends: 5 | - ./node_modules/fbjs-scripts/eslint/.eslintrc 6 | 7 | plugins: 8 | - react 9 | - react-internal 10 | 11 | # We're stricter than the default config, mostly. We'll override a few rules and 12 | # then enable some React specific ones. 13 | rules: 14 | accessor-pairs: 0 15 | brace-style: [2, 1tbs] 16 | comma-dangle: [2, always-multiline] 17 | consistent-return: 2 18 | dot-location: [2, property] 19 | dot-notation: 2 20 | eol-last: 2 21 | eqeqeq: [2, allow-null] 22 | indent: [2, 2, {SwitchCase: 1}] 23 | jsx-quotes: [2, prefer-double] 24 | no-bitwise: 0 25 | no-dupe-class-members: 2 26 | no-multi-spaces: 2 27 | no-restricted-syntax: [2, WithStatement] 28 | no-shadow: 2 29 | no-unused-expressions: 2 30 | no-unused-vars: [2, {args: none}] 31 | quotes: [2, single, avoid-escape] 32 | space-after-keywords: 2 33 | space-before-blocks: 2 34 | # TODO: enable this rule after https://github.com/eslint/eslint/pull/3768 lands 35 | space-before-keywords: 0 36 | strict: [2, global] 37 | 38 | # JSX 39 | # Our transforms set this automatically 40 | react/display-name: 0 41 | react/jsx-boolean-value: [2, always] 42 | react/jsx-no-undef: 2 43 | # We don't care to do this 44 | react/jsx-sort-prop-types: 0 45 | react/jsx-sort-props: 0 46 | react/jsx-uses-react: 2 47 | react/jsx-uses-vars: 2 48 | # It's easier to test some things this way 49 | react/no-did-mount-set-state: 0 50 | react/no-did-update-set-state: 0 51 | # We define multiple components in test files 52 | react/no-multi-comp: 0 53 | react/no-unknown-property: 2 54 | # This isn't useful in our test code 55 | react/prop-types: 0 56 | react/react-in-jsx-scope: 2 57 | react/self-closing-comp: 2 58 | # We don't care to do this 59 | react/sort-comp: 0 60 | react/wrap-multilines: [2, {declaration: false, assignment: false}] 61 | 62 | # CUSTOM RULES 63 | # the second argument of warning/invariant should be a literal string 64 | react-internal/warning-and-invariant-args: 2 65 | -------------------------------------------------------------------------------- /newPlayer/README.md: -------------------------------------------------------------------------------- 1 | ### 柚子音乐播放器 2 | 3 | #### 扫二维码体验下吧： 4 | 5 | ![music02.png](music02.png) 6 | 7 | #### 文件目录结构 8 | 9 | ```js 10 | . 11 | ├── README.md 12 | ├── app 13 | │   ├── article 14 | │   │   └── 2015sumary.md 15 | │   ├── bulid 16 | │   │   ├── app.js 17 | │   │   └── app.js.map 18 | │   ├── fonts 19 | │   │   ├── icomoon.eot 20 | │   │   ├── icomoon.svg 21 | │   │   ├── icomoon.ttf 22 | │   │   └── icomoon.woff 23 | │   ├── images 24 | │   │   ├── 1.jpeg 25 | │   │   ├── bg.png 26 | │   │   ├── guide.png 27 | │   │   └── music.png 28 | │   ├── sass 29 | │   │   ├── app.scss 30 | │   │   └── markdown.css 31 | │   └── scripts 32 | │   ├── app.jsx 33 | │   ├── data.jsx 34 | │   ├── index.jsx 35 | │   ├── music.jsx 36 | │   └── summary.jsx 37 | ├── gulpfile.js 38 | ├── index.html 39 | ├── music02.png 40 | └── package.json 41 | ``` 42 | 43 | #### 如何跑起来 44 | 45 | 1、在/newPlayer目录下执行： 46 | 47 | ```js 48 | npm install 49 | ``` 50 | 51 | 52 | 这里需说明下，我没有在webpack+gulp配server，我用的是[http-server](https://github.com/indexzero/http-server) 53 | 54 | 安装完http server后，在终端中指定到/newPlayer目录下，执行http-server就可以运行起柚子播放器了。 55 | 56 | 欢迎大家给我提ISSUE，指出代码的不是，或是有待优化的地方 57 | 58 | 对了，index.html的script中路径需改下，不然可能会报app.js 404 59 | -------------------------------------------------------------------------------- /newPlayer/app/article/2015sumary.md: -------------------------------------------------------------------------------- 1 | ### 2016年练习 2 | [react版日历](http://www.uselessblog.cn/JQM-me/newPlayer/#/Calendar) 3 | 4 | ### 2015年柚子总结 5 | 时间过得很快，2015年就这么过去了，从大学陪伴我到现在的《康熙来了》停播了。所以说，人年龄到了，总要跟某些回忆道别。又到总结的时候了，我的总结不 6 | 多，细节也不多说，下边是我简单的概括性总结。 7 | 8 | ```js 9 | var youzi = { 10 | 'qq': '1795515073' 11 | }; 12 | ``` 13 | 14 | #### 技术总结 15 | * 接了个私单，印象深刻，加班完，回去跟合作伙伴加班到凌晨3点都有； 16 | * 做移动端项目比较多； 17 | * 简单用react做了个音乐播放器； 18 | * 还接触了一些感兴趣的东西，但是没坚持下来，隔着了，后续如果自己想坚持再捡起来吧； 19 | * 写博客少了，写JS多了，写CSS少了； 20 | * 参加了三场技术分享会 杭州D2 深JS webrebuild(分享会总结就不写了)； 21 | 22 | #### 生活总结 23 | * 离开了待了快5年的广州，到了人生地不熟的深圳，离朋友越远了，导致时不时奔波广州； 24 | * 换了部新手机； 25 | * 爬了深圳最高的山； 26 | * 买了尤克里里，学了单音的生日歌和单音的小星星； 27 | * 去了趟杭州，坐了飞机，终于走出了离广西更远的省； 28 | 29 | #### 2016年计划 30 | 哈哈哈哈，这个就不说了，我已经写在了我的本子里。2016年总结公布。 31 | 2016年的目标是，把护照办下来，能去趟台湾! 32 | 33 | #### 总的而言 34 | 2015年尝试了很多第一次东西。第一次去杭州，第一次坐飞机，第一次参加技术分享会，第一次玩尤克里里，第一次做了自己不敢做的事情。呃，写不下去了....第一次就这样吧。 35 | 36 | 总的来说，2015年技术过的还挺平淡的，玩技术的兴趣慢慢的变少了。然后每次都说抓基础，但是每次都没坚持下来，后续还是会继续补下基础，自己能坚持下来的话，看下源码。恩，总结就到这里吧，码代码去了。 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /newPlayer/app/fonts/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ellyliang/JQM-me/894f19ff1e59dd23da1e4883c84f34670d452515/newPlayer/app/fonts/icomoon.eot -------------------------------------------------------------------------------- /newPlayer/app/fonts/icomoon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /newPlayer/app/fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ellyliang/JQM-me/894f19ff1e59dd23da1e4883c84f34670d452515/newPlayer/app/fonts/icomoon.ttf -------------------------------------------------------------------------------- /newPlayer/app/fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ellyliang/JQM-me/894f19ff1e59dd23da1e4883c84f34670d452515/newPlayer/app/fonts/icomoon.woff -------------------------------------------------------------------------------- /newPlayer/app/sass/app.scss: -------------------------------------------------------------------------------- 1 | $primaryColor : #333; 2 | $whiteColor : #fff; 3 | $grayColor : #423834; 4 | $grayBlue : #094294; 5 | 6 | @mixin size($width, $height) { 7 | width : $width; 8 | height : $height; 9 | } 10 | 11 | @mixin bg($img, $left, $top, $size) { 12 | background-image: url($img); 13 | background-repeat: no-repeat; 14 | background-position: $left $top; 15 | background-size: $size; 16 | } 17 | 18 | @font-face { 19 | font-family: "icomoon"; 20 | src:url("../fonts/icomoon.eot?-32qlpk"); 21 | src:url("../fonts/icomoon.eot?#iefix-32qlpk") format("embedded-opentype"), 22 | url("../fonts/icomoon.woff?-32qlpk") format("woff"), 23 | url("../fonts/icomoon.ttf?-32qlpk") format("truetype"), 24 | url("../fonts/icomoon.svg?-32qlpk#icomoon") format("svg"); 25 | font-weight: normal; 26 | font-style: normal; 27 | } 28 | 29 | [class^="icon-"], [class*=" icon-"] { 30 | font-family: 'icomoon'; 31 | speak: none; 32 | font-style: normal; 33 | font-weight: normal; 34 | font-variant: normal; 35 | text-transform: none; 36 | line-height: 1; 37 | 38 | /* Better Font Rendering =========== */ 39 | -webkit-font-smoothing: antialiased; 40 | -moz-osx-font-smoothing: grayscale; 41 | } 42 | 43 | .icon-music:before { 44 | content: "\e600"; 45 | } 46 | .icon-play:before { 47 | content: "\e601"; 48 | } 49 | .icon-backward:before { 50 | content: "\e603"; 51 | } 52 | .icon-forward:before { 53 | content: "\e604"; 54 | } 55 | .icon-volume-medium:before { 56 | content: "\e605"; 57 | } 58 | .icon-volume-mute:before { 59 | content: "\e606"; 60 | } 61 | .icon-loop:before { 62 | content: "\e607"; 63 | } 64 | .icon-loop2:before { 65 | content: "\e608"; 66 | } 67 | .icon-shuffle:before { 68 | content: "\e609"; 69 | } 70 | .icon-vynil:before { 71 | content: "\e60a"; 72 | } 73 | 74 | * { 75 | margin: 0; 76 | padding: 0; 77 | } 78 | 79 | html { 80 | height: 100%; 81 | } 82 | 83 | body { 84 | height: 100%; 85 | color : $primaryColor; 86 | font-family: 'Microsoft Yahei','Helvetica Neue',sans-serif,SimHei; 87 | overflow-x: hidden; 88 | background-color: #F5F5F5; 89 | -webkit-tap-highlight-color: rgba(255, 0, 0, 0); /*解决背景闪的bug*/ 90 | } 91 | 92 | //index 93 | .indexBg { 94 | position: absolute; 95 | top: 0; 96 | left: 0; 97 | @include size(100%, 100%); 98 | text-align: center; 99 | z-index: 99; 100 | 101 | .indexMe { 102 | margin: 30% auto 0; 103 | padding: 10px 0; 104 | 105 | img { 106 | display: block; 107 | width: 100px; 108 | margin: 0 auto; 109 | border-radius: 50%; 110 | border: 2px solid #fff; 111 | } 112 | 113 | .indexName { 114 | display: block; 115 | margin-top: 10px; 116 | } 117 | } 118 | 119 | p { 120 | font-size: 18px; 121 | color: #fff; 122 | } 123 | 124 | .indexBtn { 125 | position: absolute; 126 | //bottom: 0; 127 | width: 100%; 128 | margin-bottom: 0; 129 | background: rgba(0, 0, 0, 0.3); 130 | 131 | i { 132 | margin-right: 10px; 133 | vertical-align: middle; 134 | } 135 | 136 | a { 137 | display: inline-block; 138 | padding: 15px 0; 139 | text-decoration: none; 140 | color: #fff; 141 | vertical-align: middle; 142 | } 143 | } 144 | } 145 | 146 | // animation 147 | .plane { 148 | position: absolute; 149 | bottom: 0; 150 | right: 0; 151 | width: 100px; 152 | height: 100px; 153 | } 154 | 155 | //背景模糊效果 156 | .dim { 157 | display: block; 158 | position: absolute; 159 | top: 0; 160 | left: 0; 161 | @include size(100%, 100%); 162 | //-webkit-filter: blur(2px); 163 | //filter: blur(2px); 164 | z-index: 9; 165 | overflow: hidden; 166 | } 167 | 168 | .footer { 169 | width: 100%; 170 | position: absolute; 171 | bottom: 10px; 172 | text-align: center; 173 | color: $whiteColor; 174 | } 175 | 176 | .music { 177 | position: absolute; 178 | top: 0; 179 | @include size(100%, 100%); 180 | background-color: $grayColor; 181 | overflow: hidden; 182 | 183 | .linkToDetail { 184 | position: absolute; 185 | right: 0; 186 | top: 0; 187 | @include size(193px, 58px); 188 | 189 | span { 190 | display: inline-block; 191 | font-size: 14px; 192 | color: $whiteColor; 193 | line-height: 58px; 194 | } 195 | } 196 | 197 | .detailPeople { 198 | display: inline-block; 199 | float: right; 200 | width: 79px; 201 | height: 58px; 202 | color: #fff!important; 203 | //margin-right: -52px; 204 | @include bg("http://7xkinp.com1.z0.glb.clouddn.com/guide.png", right, top, 52px); 205 | } 206 | } 207 | 208 | .musicContent { 209 | margin-top: 12%; 210 | overflow: hidden; 211 | 212 | .musicHeader { 213 | margin: 10px 10px 0 10px; 214 | padding: 10px 0; 215 | text-align: center; 216 | overflow: hidden; 217 | } 218 | 219 | .musicList { 220 | @include size(233px, 200px); 221 | margin: -38px auto 0px; 222 | text-align: center; 223 | padding-top: 40px; 224 | background: gradient(linear, 0 0, 0 100%, from(#f2a489), to(#f68379)); 225 | background: -webkit-gradient(linear, 0 0, 0 100%, from(#f2a489), to(#f68379)); 226 | border-radius: 50%; 227 | border: 5px solid rgba(0, 0, 0, .9); 228 | 229 | p { 230 | padding-top: 20px; 231 | } 232 | } 233 | 234 | .iconMusic { 235 | display: inline-block; 236 | @include size(60px, 60px); 237 | margin: 4%; 238 | line-height: 60px; 239 | font-size: 31px; 240 | text-align: center; 241 | border: 5px solid rgba(0, 0, 0, .9); 242 | border-radius: 50%; 243 | background: gradient(linear, 0 0, 0 100%, from(#f2a489), to(#f68379)); 244 | background: -webkit-gradient(linear, 0 0, 0 100%, from(#f2a489), to(#f68379)); 245 | } 246 | 247 | .icon-pause { 248 | @include size(70px, 70px); 249 | @include bg("http://7xkinp.com1.z0.glb.clouddn.com/music.png", 0, 0, 100%); 250 | } 251 | 252 | .rotate { 253 | -webkit-animation: spin 8s infinite linear; 254 | } 255 | } 256 | .guidePerson { 257 | -webkit-animation: move 3s cubic-bezier(0.46, 0.03, 0.52, 0.96) 1 alternate; 258 | } 259 | 260 | 261 | .summaryContent { 262 | padding: 0 10px 0 10px; 263 | font-size: 14px; 264 | color: #333; 265 | } 266 | 267 | @-webkit-keyframes move { 268 | 0% { 269 | margin-right: -52px; 270 | } 271 | 100% { 272 | margin-right: 0; 273 | } 274 | } 275 | @-webkit-keyframes spin { 276 | 0% { -webkit-transform: rotate(0deg); } 277 | 100% { -webkit-transform: rotate(360deg); } 278 | } 279 | @-o-keyframes spin { 280 | 0% { -o-transform: rotate(0deg); } 281 | 100% { -o-transform: rotate(360deg); } 282 | } 283 | @-ms-keyframes spin { 284 | 0% { -ms-transform: rotate(0deg); } 285 | 100% { -ms-transform: rotate(360deg); } 286 | } 287 | @keyframes spin { 288 | 0% { transform: rotate(0deg); } 289 | 100% { transform: rotate(360deg); } 290 | } 291 | 292 | // cat 293 | .cat { 294 | width: 400px; 295 | height: 400px; 296 | background-color: #99cccc; 297 | .catHeader { 298 | width: 100px; 299 | height: 100px; 300 | border: 2px solid #c4ad7d; 301 | border-radius: 50%; 302 | background-color: $whiteColor; 303 | } 304 | } 305 | -------------------------------------------------------------------------------- /newPlayer/app/sass/calendar.css: -------------------------------------------------------------------------------- 1 | .calendar { 2 | position: absolute; 3 | top: 0; 4 | width: 100%; 5 | height: 100%; 6 | background-color: #F9D7EA; 7 | } 8 | .calendar .yz-days { 9 | margin-left: 2%; 10 | } 11 | .calendar li { 12 | width: 14%; 13 | list-style: none; 14 | display: inline-block; 15 | color: #E01F90; 16 | } 17 | .calendar .calendar-header { 18 | height: 50px; 19 | line-height: 50px; 20 | border-bottom: 3px solid #E01F90; 21 | text-align: center; 22 | position: relative; 23 | } 24 | .calendar .calendar-header .icon-yz { 25 | display: inline-block; 26 | width: 62px; 27 | height: 53px; 28 | background: url(http://7xkinp.com1.z0.glb.clouddn.com/yz.png) 0 0 no-repeat; 29 | background-size: 100%; 30 | vertical-align: middle; 31 | } 32 | .calendar .triangle-left { 33 | position: absolute; 34 | width: 0; 35 | height: 0; 36 | top: 16px; 37 | left: 16px; 38 | border-top: 10px solid transparent; 39 | border-right: 20px solid #E01F90; 40 | border-bottom: 10px solid transparent; 41 | cursor: pointer; 42 | } 43 | .calendar .triangle-right { 44 | position: absolute; 45 | width: 0; 46 | height: 0; 47 | top: 16px; 48 | right: 16px; 49 | border-top: 10px solid transparent; 50 | border-left: 20px solid #E01F90; 51 | border-bottom: 10px solid transparent; 52 | cursor: pointer; 53 | } 54 | .calendar .calendar-day li { 55 | height: 45px; 56 | line-height: 45px; 57 | border-radius: 5px; 58 | text-align: center; 59 | vertical-align: bottom; 60 | color: #94898F; 61 | } 62 | .calendar .calendar-day li:hover { 63 | cursor: pointer; 64 | } 65 | .calendar .weekday { 66 | padding: 10px 0; 67 | } 68 | .calendar .weekday li { 69 | height: 19px; 70 | text-align: center; 71 | } 72 | .calendar .calendarInput { 73 | padding: 20px 10px; 74 | margin-top: 20px; 75 | border-top: 3px solid #E01F90; 76 | } 77 | .calendar .calendarInput input { 78 | box-sizing: border-box; 79 | width: 100%; 80 | height: 40px; 81 | padding: 5px; 82 | text-align: center; 83 | border-radius: 5px; 84 | border: 1px solid #94898F; 85 | } 86 | .calendar .calendar-day li.current { 87 | background-color: #fff; 88 | color: #E01F90; 89 | font-weight: bold; 90 | } 91 | .calendar .calendarJQ { 92 | text-align: center; 93 | } 94 | .calendar .calendarJQ a { 95 | text-decoration: none; 96 | font-size: 14px; 97 | font-weight: bold; 98 | color: #E01F90; 99 | } 100 | -------------------------------------------------------------------------------- /newPlayer/app/scripts/app.jsx: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import React from 'react'; 4 | import {render} from 'react-dom'; 5 | import {Router, Route, Link} from 'react-router'; 6 | 7 | require('!style!css!sass!../sass/app.scss'); 8 | 9 | import Index from './index.jsx'; 10 | import Music from './music.jsx'; 11 | import Summary from './summary.jsx'; 12 | import Calendar from './calendar.jsx'; 13 | 14 | render(( 15 | 16 | 17 | 18 | 19 | 20 | 21 | ), document.querySelector('#index')); 22 | -------------------------------------------------------------------------------- /newPlayer/app/scripts/calendar.jsx: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import React from 'react'; 4 | import {Router, Route, Link} from 'react-router'; 5 | require('!style!css!sass!../sass/calendar.css'); 6 | 7 | class Calendar extends React.Component { 8 | constructor(props) { 9 | super(props); 10 | this.state = { 11 | months: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31], 12 | year: new Date().getFullYear(), 13 | month: new Date().getMonth(), 14 | date: new Date().getDate() 15 | }; 16 | this.clickTriangleLeft = this.clickTriangleLeft.bind(this); 17 | this.clickTriangleRight = this.clickTriangleRight.bind(this); 18 | } 19 | 20 | isLeapYear(year) { 21 | return (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0); 22 | } 23 | 24 | calculateDays(year, month) { 25 | let days = this.state.months[month]; 26 | if(month === 1 && this.isLeapYear(year)) { // 2月比较特殊，非闰年28天，闰年29天 27 | days = 29; 28 | } 29 | 30 | return days; 31 | } 32 | 33 | getFirstDays(year, month) { 34 | let dt = new Date(year, month, 1), 35 | weekend = dt.getDay(); 36 | 37 | return weekend; 38 | } 39 | 40 | clickTriangleLeft() { 41 | this.setState({ 42 | 'month': this.state.month-1, 43 | 'date': new Date().getDate() 44 | }, () => { 45 | if(this.state.month < 0) { 46 | this.setState({ 47 | 'year': this.state.year-1, 48 | 'month': 11 49 | }); 50 | } 51 | }); 52 | } 53 | 54 | clickTriangleRight() { 55 | this.setState({ 56 | 'month': this.state.month+1, 57 | 'date': new Date().getDate() 58 | }, () => { 59 | if(this.state.month > 11) { 60 | this.setState({ 61 | 'year': this.state.year+1, 62 | 'month': 0 63 | }); 64 | } 65 | }); 66 | } 67 | 68 | selectDays(day) { 69 | return() => { 70 | this.setState({'date': day}); 71 | }; 72 | } 73 | 74 | render() { 75 | let [dayArr, startDayArr, dayLiNode, startDayLiNode, calendarFirstDays, liStyle, date, formatDate] = [[], [], '', '', this.state.date, '', '', '']; 76 | 77 | date = (this.state.month < 9) ? ('0'+(this.state.month+1)) : (this.state.month+1); 78 | formatDate = this.state.year + '年' + date + '月' + this.state.date + '日'; 79 | 80 | for(var i=0, len=this.calculateDays(this.state.year, this.state.month); i { 88 | return
    • ; 89 | }); 90 | dayLiNode = dayArr.map((day, index) => { 91 | liStyle = (calendarFirstDays === day) ? 'current' : ''; 92 | return
    • {day}
      • ; 93 | }); 94 | 95 | return ( 96 |
      97 |
      98 |

      99 | 100 | {this.state.year} 101 | 年 102 | {this.state.month+1} 103 | 月 104 |

      105 |

      106 |

      107 |
      108 | 109 |
      110 |
      111 |
        112 |
      • 日
        • 113 |
      • 一
        • 114 |
      • 二
        • 115 |
      • 三
        • 116 |
      • 四
        • 117 |
      • 五
        • 118 |
      • 六
        • 119 |
      120 |
      121 |
      122 |
        123 | {startDayLiNode} 124 | {dayLiNode} 125 |
      126 |
      127 |
      128 | 129 |
      130 | 131 |
      132 | 133 |

      闲的慌，搞了个JQuery版本 >>

      134 | 135 |
      136 |
      powered by youzi.
      137 |
      138 |
      139 | ); 140 | } 141 | } 142 | 143 | export default Calendar; 144 | -------------------------------------------------------------------------------- /newPlayer/app/scripts/data.jsx: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const List = [ 4 | { 5 | 'id': 0, 6 | 'song' : 'Everything in the World', 7 | 'album' : '《Everything in the World》', 8 | 'url' : 'http://7xkinp.com1.z0.glb.clouddn.com/%E6%9B%B2%E5%A9%89%E5%A9%B7%20-%20Everything%20In%20The%20World.mp3' 9 | }, 10 | { 11 | 'id': 2, 12 | 'song' : 'Mockingbird', 13 | 'album' : '《Mockingbird Ep》', 14 | 'url' : 'http://7xkinp.com1.z0.glb.clouddn.com/Mockingbird.mp3' 15 | }, 16 | { 17 | 'id': 1, 18 | 'song' : 'Read All About It', 19 | 'album' : '《Our Version of Events (Special Edition)》', 20 | 'url' : 'http://7xkinp.com1.z0.glb.clouddn.com/Read%20All%20About%20It,%20Pt.%20III.mp3' 21 | }, 22 | { 23 | 'id': 3, 24 | 'song' : '心愿烟火', 25 | 'album' : '[跨年歌曲]', 26 | 'url' : 'http://7xkinp.com1.z0.glb.clouddn.com/%E5%BF%83%E6%84%BF%E7%83%9F%E7%81%AB-%E8%B7%A8%E5%B9%B4%E6%AD%8C%E6%9B%B2.mp3' 27 | } 28 | ]; 29 | 30 | export default List; 31 | -------------------------------------------------------------------------------- /newPlayer/app/scripts/index.jsx: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import React from 'react'; 4 | import {Router, Route, Link} from 'react-router'; 5 | 6 | class Index extends React.Component { 7 | render() { 8 | return ( 9 |
      10 | 11 |
      12 |

      13 | 个人头像 14 | 2015柚子总结 15 |

      16 |

      17 | 18 | Just relax ~Click Me!! 19 |

      20 | 21 |
      powered by youzi.
      22 |
      23 |
      24 | ) 25 | } 26 | } 27 | 28 | export default Index 29 | -------------------------------------------------------------------------------- /newPlayer/app/scripts/music.jsx: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import React from 'react'; 4 | import {Router, Route, Link} from 'react-router'; 5 | import List from './data.jsx'; 6 | 7 | class MusicButton extends React.Component { 8 | 9 | constructor(props) { 10 | super(props); 11 | 12 | this.state = { 13 | song : List[0].url, 14 | isPlaying: 1, 15 | songIndex: 0, 16 | time: '0:00', 17 | isTimeupdate: 1 18 | }; 19 | } 20 | 21 | _Play(audio) { 22 | this.setState({'isPlaying': 0}, () => { 23 | audio.play(); 24 | }); 25 | } 26 | _Pause(audio) { 27 | audio.pause(); 28 | this.setState({'isPlaying': 1}); 29 | } 30 | 31 | _Prev(songLen, cb) { // 这里的回调是因为setState是异步的 32 | this.setState({'songIndex': ++this.state.songIndex}, cb); 33 | if(this.state.songIndex > songLen) { 34 | this.setState({'songIndex': 0}, cb); 35 | } 36 | } 37 | 38 | _Next(songLen, cb) { 39 | this.setState({'songIndex': --this.state.songIndex}, cb); 40 | if(this.state.songIndex < 0) { 41 | this.setState({'songIndex': songLen}, cb); 42 | } 43 | } 44 | 45 | _currSong(index) { 46 | this.setState({'song': List[index].url}); 47 | } 48 | 49 | _endedPlay(songLen, cb) { 50 | if(+this.state.songIndex === songLen) { 51 | this.setState({'songIndex': 0}, cb); 52 | } else { 53 | this.setState({'songIndex': ++this.state.songIndex}, cb); 54 | } 55 | } 56 | 57 | onPlayBtn() { 58 | let audioNode = this.refs.audio; 59 | if(this.state.isPlaying) { 60 | this._Play(audioNode); 61 | } else { 62 | this._Pause(audioNode); 63 | } 64 | } 65 | 66 | onNextBtn() { 67 | let [audioNode, songLen] = [this.refs.audio, List.length-1]; 68 | this._Next(songLen, () => { 69 | this._currSong(this.state.songIndex); 70 | this._Play(audioNode); 71 | }); 72 | } 73 | 74 | onPrevBtn() { 75 | let [audioNode, songLen] = [this.refs.audio, List.length-1]; 76 | this._Prev(songLen, () => { 77 | this._currSong(this.state.songIndex); 78 | this._Play(audioNode); 79 | }); 80 | } 81 | // 记住你所有的component的手动绑定的事件都在要willUnmout干掉(谢谢百灵鸟^_^) 82 | componentDidMount(prevProps, prevState, prevContext) { 83 | let [audioNode, songLen] = [this.refs.audio, List.length-1]; 84 | 85 | audioNode.addEventListener('ended', () => { 86 | this._endedPlay(songLen, () => { 87 | this._currSong(this.state.songIndex); 88 | this._Play(audioNode); 89 | }); 90 | }, false); 91 | 92 | let onTimeupdate = () => { 93 | let [remainTime, remainTimeMin, remainTimeSec, remainTimeInfo] = []; 94 | 95 | if(!isNaN(audioNode.duration)) { 96 | remainTime = audioNode.duration - audioNode.currentTime; 97 | remainTimeMin = parseInt(remainTime/60); 98 | remainTimeSec = parseInt(remainTime%60); 99 | 100 | if(remainTimeSec < 10) { 101 | remainTimeSec = '0'+remainTimeSec; 102 | } 103 | remainTimeInfo = remainTimeMin + ':' + remainTimeSec; 104 | this.setState({'time': remainTimeInfo}); 105 | } 106 | }; 107 | 108 | audioNode.addEventListener('timeupdate', onTimeupdate, false); 109 | 110 | this.cleanup = () => { 111 | audioNode.removeEventListener('timeupdate', onTimeupdate, false); 112 | }; 113 | } 114 | 115 | componentWillUnmount () { 116 | this.cleanup(); 117 | } 118 | 119 | render() { 120 | let [classString, defaultClass, playClass] = ['', 'iconMusic icon-pause', ' rotate']; 121 | if(!this.state.isPlaying) { 122 | classString = defaultClass + playClass; 123 | } else { 124 | classString = defaultClass; 125 | } 126 | 127 | return ( 128 |
      129 |
      138 | ) 139 | } 140 | } 141 | 142 | class MusicContent extends React.Component { 143 | render() { 144 | let [musicCurr, musicListInfo] = [this.props.musicIndex, this.props.musicInfo]; 145 | 146 | return ( 147 |
      148 |

      -{this.props.timeInfo}

      149 |

      {musicListInfo[musicCurr].song}

      150 |

      {musicListInfo[musicCurr].album}

      151 |
      152 | ); 153 | } 154 | } 155 | 156 | class Music extends React.Component { 157 | render() { 158 | return ( 159 |
      160 | 165 | 166 | 167 | 168 |
      169 |
      powered by youzi.
      170 |
      171 |
      172 | ) 173 | } 174 | } 175 | 176 | export default Music 177 | -------------------------------------------------------------------------------- /newPlayer/app/scripts/summary.jsx: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import React from 'react'; 4 | import Markdown2HTML from 'react-markdown-to-html'; 5 | require('!style!css!sass!../sass/markdown.css'); 6 | 7 | class Summary extends React.Component { 8 | render() { 9 | return ( 10 |
      11 | 12 |
      13 | ); 14 | } 15 | } 16 | 17 | export default Summary; 18 | -------------------------------------------------------------------------------- /newPlayer/gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var webpack = require('webpack'); 3 | var gulpWebpack = require('webpack-stream'); 4 | var named = require('vinyl-named'); 5 | 6 | // 记得要配版本号 7 | 8 | gulp.task('dev', function() { 9 | return gulp.src('app/scripts/app.jsx') 10 | .pipe(named()) 11 | .pipe(gulpWebpack({ 12 | watch : true, 13 | module: { 14 | loaders: [ 15 | { 16 | test: /\.j(s|sx)$/, 17 | exclude: /node_modules/, 18 | loader: 'babel', 19 | query: { 20 | presets: ['es2015', 'react'] 21 | }, 22 | }, 23 | { 24 | test: /\.scss$/, 25 | exclude: /node_modules/, 26 | loaders: ['style', 'css', 'sass'] 27 | }, 28 | { 29 | test : /\.woff|\.woff2|\.svg|.eot|\.ttf|\.png/, 30 | loader : 'url?prefix=font/&limit=10000' 31 | } 32 | ], 33 | noParse: /commonmark\.js$/ 34 | }, 35 | output : { 36 | filename : '[name].js', 37 | } 38 | })) 39 | .pipe(gulp.dest('app/bulid/')); 40 | }); 41 | 42 | gulp.task('package', function() { 43 | return gulp.src('app/scripts/app.jsx') 44 | .pipe(named()) 45 | .pipe(gulpWebpack({ 46 | module: { 47 | loaders: [ 48 | { 49 | test: /\.jsx?$/, 50 | exclude: /node_modules/, 51 | loader: 'babel', 52 | query: { 53 | presets: ['es2015', 'react'] 54 | } 55 | }, 56 | { 57 | test: /\.scss$/, 58 | exclude: /node_modules/, 59 | loaders: ['style', 'css', 'sass'] 60 | }, 61 | { 62 | test : /\.woff|\.woff2|\.svg|.eot|\.ttf|\.png/, 63 | loader : 'url?prefix=font/&limit=10000' 64 | } 65 | ] 66 | }, 67 | output : { 68 | filename : '[name].js', 69 | }, 70 | devtool : '#source-map', 71 | plugins:[new webpack.optimize.UglifyJsPlugin('*.js')] // 本地开发时，可以暂不开启 72 | })) 73 | .pipe(gulp.dest('app/bulid/')); 74 | }); 75 | 76 | gulp.task('default', ['dev']); 77 | -------------------------------------------------------------------------------- /newPlayer/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 柚子的练习~ 6 | 7 | 8 | 9 |
      10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /newPlayer/music02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ellyliang/JQM-me/894f19ff1e59dd23da1e4883c84f34670d452515/newPlayer/music02.png -------------------------------------------------------------------------------- /newPlayer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "newplayer", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "elly", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "babel-core": "^6.3.17", 13 | "babel-loader": "^6.2.0", 14 | "babel-preset-es2015": "^6.3.13", 15 | "babel-preset-react": "^6.3.13", 16 | "css-loader": "^0.23.0", 17 | "file-loader": "^0.8.5", 18 | "gulp": "^3.9.0", 19 | "history": "^1.13.1", 20 | "json-loader": "^0.5.4", 21 | "node-sass": "^3.4.2", 22 | "react": "^0.14.3", 23 | "react-dom": "^0.14.3", 24 | "react-markdown-to-html": "^1.0.11", 25 | "react-router": "^1.0.3", 26 | "react-tools": "^0.13.3", 27 | "sass-loader": "^3.1.2", 28 | "style-loader": "^0.13.0", 29 | "url-loader": "^0.5.7", 30 | "vinyl-named": "^1.1.0", 31 | "webpack": "^1.12.9", 32 | "webpack-stream": "^3.1.0" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /player/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 柚子播放器～哈哈哈哈 6 | 7 | 8 | 9 | 10 | 11 |
      12 |
      13 |
      14 | 18 | 19 |
      20 |

      {{song}}

      21 |

      {{album}}

      22 |
      23 | 24 |
      25 | 26 | 27 | 28 | 29 |
      30 |
      31 | 32 |
      33 |

      Music List

      34 | 35 |
        36 |
      • 37 | {{data.artist}}－{{data.song}}－{{data.album}} 38 | 39 |
        • 40 |
      41 |
      42 |
      43 | 44 |
      45 |
      46 | 47 |
      48 | 49 | 50 |
      51 |
      52 | 53 | 54 | 55 | 60 | 61 | -------------------------------------------------------------------------------- /player/static/css/index.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8";.clearfix{*zoom:1}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0}.clearfix:after{clear:both}.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.input-block-level{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}@font-face{font-family:icomoon;src:url(../fonts/icomoon.eot?-32qlpk);src:url(../fonts/icomoon.eot?#iefix-32qlpk) format('embedded-opentype'),url(../fonts/icomoon.woff?-32qlpk) format('woff'),url(../fonts/icomoon.ttf?-32qlpk) format('truetype'),url(../fonts/icomoon.svg?-32qlpk#icomoon) format('svg');font-weight:400;font-style:normal}[class^=icon-],[class*=" icon-"]{font-family:icomoon;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-music:before{content:"\e600"}.icon-play:before{content:"\e601"}.icon-pause:before{content:"\e602"}.icon-backward:before{content:"\e603"}.icon-forward:before{content:"\e604"}.icon-volume-medium:before{content:"\e605"}.icon-volume-mute:before{content:"\e606"}.icon-loop:before{content:"\e607"}.icon-loop2:before{content:"\e608"}.icon-shuffle:before{content:"\e609"}.icon-vynil:before{content:"\e60a"}html{width:100%;height:100%}body{height:100%;color:#fff;background-color:#bc92ab;background-image:-moz-linear-gradient(top,#ec9cb5,#75839d);background-image:-webkit-gradient(linear,0 0,0 100%,from(#ec9cb5),to(#75839d));background-image:-webkit-linear-gradient(top,#ec9cb5,#75839d);background-image:-o-linear-gradient(top,#ec9cb5,#75839d);background-image:linear-gradient(to bottom,#ec9cb5,#75839d);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec9cb5', endColorstr='#ff75839d', GradientType=0)}li{list-style:none}a,b{color:#29295f}.container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:1000px}.main{*zoom:1}.main:before,.main:after{display:table;content:"";line-height:0}.main:after{clear:both}.player{float:left;width:500px}.player-list{position:relative;top:34px;float:right;width:500px;border-radius:15px;background:rgba(255,255,255,.2)}.player-list .list-title{width:182px;float:right;margin-right:-10px;padding:5px 2px;color:#fff;border-radius:15px;background-color:#5fc8c3;background-image:-moz-linear-gradient(top,#6cd3d0,#4cb7af);background-image:-webkit-gradient(linear,0 0,0 100%,from(#6cd3d0),to(#4cb7af));background-image:-webkit-linear-gradient(top,#6cd3d0,#4cb7af);background-image:-o-linear-gradient(top,#6cd3d0,#4cb7af);background-image:linear-gradient(to bottom,#6cd3d0,#4cb7af);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff6cd3d0', endColorstr='#ff4cb7af', GradientType=0);text-align:center}.player-list .icon-vynil{margin-right:5px}.list-music{padding:15px;border-radius:37px;text-align:center}.list-music li{margin:12px 0;padding:7px 0;cursor:pointer}.list-music span{display:inline-block;width:394px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}.list-music i{margin-left:5px;color:#5fc8c3}.artist{display:-webkit-flex;display:flex}.artist .artist-rotate{-moz-animation:spin 8s infinite linear;-o-animation:spin 8s infinite linear;-webkit-animation:spin 8s infinite linear;animation:spin 8s infinite linear}.artist .artist-img{width:100px;height:100px;border-radius:50%;z-index:9}.artist .artist-img img{display:block;width:100px;height:100px;border-radius:50%;border:3px solid #5fc8c3;-webkit-box-shadow:0 0 17px #333;-moz-box-shadow:0 0 17px #333;box-shadow:0 0 17px #333}.artist .artist-name{display:inline-block;width:184px;height:50px;margin:45px 0 0 -10px;text-align:center;line-height:50px;border-top-right-radius:25px;border-bottom-right-radius:25px;background-color:#5fc8c3;background-image:-moz-linear-gradient(top,#6cd3d0,#4cb7af);background-image:-webkit-gradient(linear,0 0,0 100%,from(#6cd3d0),to(#4cb7af));background-image:-webkit-linear-gradient(top,#6cd3d0,#4cb7af);background-image:-o-linear-gradient(top,#6cd3d0,#4cb7af);background-image:linear-gradient(to bottom,#6cd3d0,#4cb7af);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff6cd3d0', endColorstr='#ff4cb7af', GradientType=0);-webkit-box-shadow:0 0 17px #333;-moz-box-shadow:0 0 17px #333;box-shadow:0 0 17px #333}.artist .artist-name b{margin-right:10px;vertical-align:middle}.music{width:100%;margin-top:81px;text-align:center}.music .music-record{padding:0;margin:-10px 0 0 0}.player-btn{width:100%;margin-top:81px;text-align:center}.player-btn a{display:inline-block;margin:0 15px;text-align:center;border-radius:50%;text-decoration:none;color:#f4f2f5;background-color:#5fc8c3;background-image:-moz-linear-gradient(top,#6cd3d0,#4cb7af);background-image:-webkit-gradient(linear,0 0,0 100%,from(#6cd3d0),to(#4cb7af));background-image:-webkit-linear-gradient(top,#6cd3d0,#4cb7af);background-image:-o-linear-gradient(top,#6cd3d0,#4cb7af);background-image:linear-gradient(to bottom,#6cd3d0,#4cb7af);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff6cd3d0', endColorstr='#ff4cb7af', GradientType=0);transition:all 2s;-webkit-transition:all .5s}.player-btn a:hover{color:#5db7b5;background-color:#edeaed;background-image:-moz-linear-gradient(top,#f4f2f5,#e3dde1);background-image:-webkit-gradient(linear,0 0,0 100%,from(#f4f2f5),to(#e3dde1));background-image:-webkit-linear-gradient(top,#f4f2f5,#e3dde1);background-image:-o-linear-gradient(top,#f4f2f5,#e3dde1);background-image:linear-gradient(to bottom,#f4f2f5,#e3dde1);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff4f2f5', endColorstr='#ffe3dde1', GradientType=0)}.player-btn a.prev,.player-btn a.next{width:80px;height:80px}.player-btn a.prev span,.player-btn a.next span{line-height:80px;font-size:39px}.player-btn .icon-backward{padding-right:5px}.player-btn .icon-forward{padding-left:5px}.player-btn .icon-play,.player-btn .icon-pause{padding-left:12px;line-height:100px;font-size:49px}.player-btn .icon-pause{padding-left:0}.player-btn a.play,.player-btn a.stop{width:100px;height:100px}.play-sel{width:100%}.play-sel .play-style{display:inline-block;width:916px;text-align:right}.play-sel .play-style li{display:inline-block;margin:0 6px}.play-sel .play-style a{font-size:21px;text-decoration:none}.play-sel .play-style li.active a{color:#5db7b5}.progress-play{margin-top:71px}.progress-bar{position:relative;width:100%;height:10px;background-color:#edeaed;background-image:-moz-linear-gradient(top,#f4f2f5,#e3dde1);background-image:-webkit-gradient(linear,0 0,0 100%,from(#f4f2f5),to(#e3dde1));background-image:-webkit-linear-gradient(top,#f4f2f5,#e3dde1);background-image:-o-linear-gradient(top,#f4f2f5,#e3dde1);background-image:linear-gradient(to bottom,#f4f2f5,#e3dde1);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff4f2f5', endColorstr='#ffe3dde1', GradientType=0);border-radius:15px;border:2px solid #4cb7af;cursor:pointer}.progress-bar .progress-loading{position:absolute;height:10px;background:#ccc;border-radius:15px;z-index:9}.progress-bar .progress-playing{position:absolute;height:10px;background-color:#5fc8c3;background-image:-moz-linear-gradient(top,#6cd3d0,#4cb7af);background-image:-webkit-gradient(linear,0 0,0 100%,from(#6cd3d0),to(#4cb7af));background-image:-webkit-linear-gradient(top,#6cd3d0,#4cb7af);background-image:-o-linear-gradient(top,#6cd3d0,#4cb7af);background-image:linear-gradient(to bottom,#6cd3d0,#4cb7af);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff6cd3d0', endColorstr='#ff4cb7af', GradientType=0);border-radius:15px;z-index:99}.progress-bar .play-time{position:absolute;top:-50px;left:0}.play-voice{position:relative}.play-voice .play-vol,.play-voice .play-voling{display:block;position:absolute;width:8px;border-radius:15px}.play-voice .play-vol{left:0;top:-81px;height:74px;border:2px solid #fff;background:#ccc}.play-voice .play-voling{left:0;bottom:0;width:8px;background:#5db7b5}@-moz-keyframes spin{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(360deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@-o-keyframes spin{0%{-o-transform:rotate(0deg)}100%{-o-transform:rotate(360deg)}}@-ms-keyframes spin{0%{-ms-transform:rotate(0deg)}100%{-ms-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}} -------------------------------------------------------------------------------- /player/static/fonts/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ellyliang/JQM-me/894f19ff1e59dd23da1e4883c84f34670d452515/player/static/fonts/icomoon.eot -------------------------------------------------------------------------------- /player/static/fonts/icomoon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /player/static/fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ellyliang/JQM-me/894f19ff1e59dd23da1e4883c84f34670d452515/player/static/fonts/icomoon.ttf -------------------------------------------------------------------------------- /player/static/fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ellyliang/JQM-me/894f19ff1e59dd23da1e4883c84f34670d452515/player/static/fonts/icomoon.woff -------------------------------------------------------------------------------- /player/static/img/da.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ellyliang/JQM-me/894f19ff1e59dd23da1e4883c84f34670d452515/player/static/img/da.jpg -------------------------------------------------------------------------------- /player/static/img/jem.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ellyliang/JQM-me/894f19ff1e59dd23da1e4883c84f34670d452515/player/static/img/jem.jpg -------------------------------------------------------------------------------- /player/static/img/jew.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ellyliang/JQM-me/894f19ff1e59dd23da1e4883c84f34670d452515/player/static/img/jew.jpg -------------------------------------------------------------------------------- /player/static/img/la.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ellyliang/JQM-me/894f19ff1e59dd23da1e4883c84f34670d452515/player/static/img/la.jpg -------------------------------------------------------------------------------- /player/static/img/lenka.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ellyliang/JQM-me/894f19ff1e59dd23da1e4883c84f34670d452515/player/static/img/lenka.jpg -------------------------------------------------------------------------------- /player/static/img/ljr.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ellyliang/JQM-me/894f19ff1e59dd23da1e4883c84f34670d452515/player/static/img/ljr.jpg -------------------------------------------------------------------------------- /player/static/img/lm.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ellyliang/JQM-me/894f19ff1e59dd23da1e4883c84f34670d452515/player/static/img/lm.jpg -------------------------------------------------------------------------------- /player/static/img/tw.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ellyliang/JQM-me/894f19ff1e59dd23da1e4883c84f34670d452515/player/static/img/tw.jpg -------------------------------------------------------------------------------- /player/static/js/angular-route.min.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license AngularJS v1.3.0-beta.14 3 | * (c) 2010-2014 Google, Inc. http://angularjs.org 4 | * License: MIT 5 | */ 6 | !function(e,r,n){"use strict";function t(){function e(e,n){return r.extend(new(r.extend(function(){},{prototype:e})),n)}function n(e,r){var n=r.caseInsensitiveMatch,t={originalPath:e,regexp:e},a=t.keys=[];return e=e.replace(/([().])/g,"\\$1").replace(/(\/)?:(\w+)([\?\*])?/g,function(e,r,n,t){var o="?"===t?t:null,i="*"===t?t:null;return a.push({name:n,optional:!!o}),r=r||"",""+(o?"":r)+"(?:"+(o?r:"")+(i&&"(.+?)"||"([^/]+)")+(o||"")+")"+(o||"")}).replace(/([\/$\*])/g,"\\$1"),t.regexp=new RegExp("^"+e+"$",n?"i":""),t}var t={};this.when=function(e,a){if(t[e]=r.extend({reloadOnSearch:!0},a,e&&n(e,a)),e){var o="/"==e[e.length-1]?e.substr(0,e.length-1):e+"/";t[o]=r.extend({redirectTo:e},n(o,a))}return this},this.otherwise=function(e){return this.when(null,e),this},this.$get=["$rootScope","$location","$routeParams","$q","$injector","$http","$templateCache","$sce",function(n,a,o,i,c,l,u,s){function p(e,r){var n=r.keys,t={};if(!r.regexp)return null;var a=r.regexp.exec(e);if(!a)return null;for(var o=1,i=a.length;i>o;++o){var c=n[o-1],l="string"==typeof a[o]?decodeURIComponent(a[o]):a[o];c&&l&&(t[c.name]=l)}return t}function $(){var e=h(),t=m.current;e&&t&&e.$$route===t.$$route&&r.equals(e.pathParams,t.pathParams)&&!e.reloadOnSearch&&!d?(t.params=e.params,r.copy(t.params,o),n.$broadcast("$routeUpdate",t)):(e||t)&&(d=!1,n.$broadcast("$routeChangeStart",e,t),m.current=e,e&&e.redirectTo&&(r.isString(e.redirectTo)?a.path(f(e.redirectTo,e.params)).search(e.params).replace():a.url(e.redirectTo(e.pathParams,a.path(),a.search())).replace()),i.when(e).then(function(){if(e){var n=r.extend({},e.resolve),t,a;return r.forEach(n,function(e,t){n[t]=r.isString(e)?c.get(e):c.invoke(e,null,null,t)}),r.isDefined(t=e.template)?r.isFunction(t)&&(t=t(e.params)):r.isDefined(a=e.templateUrl)&&(r.isFunction(a)&&(a=a(e.params)),a=s.getTrustedResourceUrl(a),r.isDefined(a)&&(e.loadedTemplateUrl=a,t=l.get(a,{cache:u}).then(function(e){return e.data}))),r.isDefined(t)&&(n.$template=t),i.all(n)}}).then(function(a){e==m.current&&(e&&(e.locals=a,r.copy(e.params,o)),n.$broadcast("$routeChangeSuccess",e,t))},function(r){e==m.current&&n.$broadcast("$routeChangeError",e,t,r)}))}function h(){var n,o;return r.forEach(t,function(t,i){!o&&(n=p(a.path(),t))&&(o=e(t,{params:r.extend({},a.search(),n),pathParams:n}),o.$$route=t)}),o||t[null]&&e(t[null],{params:{},pathParams:{}})}function f(e,n){var t=[];return r.forEach((e||"").split(":"),function(e,r){if(0===r)t.push(e);else{var a=e.match(/(\w+)(.*)/),o=a[1];t.push(n[o]),t.push(a[2]||""),delete n[o]}}),t.join("")}var d=!1,m={routes:t,reload:function(){d=!0,n.$evalAsync($)}};return n.$on("$locationChangeSuccess",$),m}]}function a(){this.$get=function(){return{}}}function o(e,n,t){return{restrict:"ECA",terminal:!0,priority:400,transclude:"element",link:function(a,o,i,c,l){function u(){h&&(h.remove(),h=null),p&&(p.$destroy(),p=null),$&&(t.leave($,function(){h=null}),h=$,$=null)}function s(){var i=e.current&&e.current.locals,c=i&&i.$template;if(r.isDefined(c)){var s=a.$new(),h=e.current,m=l(s,function(e){t.enter(e,null,$||o,function i(){!r.isDefined(f)||f&&!a.$eval(f)||n()}),u()});$=m,p=h.scope=s,p.$emit("$viewContentLoaded"),p.$eval(d)}else u()}var p,$,h,f=i.autoscroll,d=i.onload||"";a.$on("$routeChangeSuccess",s),s()}}}function i(e,r,n){return{restrict:"ECA",priority:-400,link:function(t,a){var o=n.current,i=o.locals;a.html(i.$template);var c=e(a.contents());if(o.controller){i.$scope=t;var l=r(o.controller,i);o.controllerAs&&(t[o.controllerAs]=l),a.data("$ngControllerController",l),a.children().data("$ngControllerController",l)}c(t)}}}var c=r.module("ngRoute",["ng"]).provider("$route",t);c.provider("$routeParams",a),c.directive("ngView",o),c.directive("ngView",i),o.$inject=["$route","$anchorScroll","$animate"],i.$inject=["$compile","$controller","$route"]}(window,window.angular); -------------------------------------------------------------------------------- /player/static/js/app.js: -------------------------------------------------------------------------------- 1 | var playerApp = angular.module('playerApp', ['ngRoute']); -------------------------------------------------------------------------------- /player/static/js/controller.js: -------------------------------------------------------------------------------- 1 | //player Controller 2 | playerApp.controller('playerCtrls', ['$scope', 'DataList', 'DataBinding', 'Audio', 'Player', '$timeout', function($scope, DataList, DataBinding, Audio, Player, $timeout) { 3 | 4 | DataBinding.dataBindFunc(0);//默认绑定的数据 5 | 6 | //本应用重点部分：控制播放器 7 | $scope.player = Player; 8 | $scope.audio = Audio; 9 | $scope.player.active = 0; 10 | 11 | $scope.player.controllPlay($scope.player.active); 12 | $scope.player.playerSrc($scope.player.active); 13 | 14 | $scope.isSelected = function() { 15 | $scope.player.active = this.$index; //给当前的li添加.icon-music 16 | DataBinding.dataBindFunc($scope.player.active);//绑定数据 17 | $scope.player.controllPlay($scope.player.active); //播放当前的音频 18 | }; 19 | }]); -------------------------------------------------------------------------------- /player/static/js/directive.js: -------------------------------------------------------------------------------- 1 | //Mode Dirctive（播放方式和音量控制） 2 | playerApp.directive('musicMode', ['$timeout', '$document', function($timeout, $document) { 3 | return { 4 | restrict: 'AE', 5 | replace: true, 6 | scope: { 7 | player : '=', 8 | audio: '=' 9 | }, 10 | templateUrl: 'tpls/mode.html', 11 | link: function(scope, ele, attr) { 12 | 13 | var status = 'list'; //标识播放模式，默认为list 14 | 15 | scope.addActive = function(index) { //选中style 16 | ele.children('li').removeClass('active') 17 | ele.children('li').eq(index).addClass('active'); 18 | }; 19 | 20 | scope.addActive(0); 21 | 22 | scope.listPlay = function() { //列表循环 23 | status = 'list'; 24 | console.log('list'); 25 | scope.addActive(0); 26 | }; 27 | 28 | scope.randomPlay = function() { //随机循环 29 | console.log('random'); 30 | status = 'random'; 31 | scope.addActive(1); 32 | }; 33 | 34 | scope.repeatPlay = function() { // 单曲循环 35 | status = 'repeat'; 36 | console.log('repeat'); 37 | scope.addActive(2) 38 | }; 39 | 40 | scope.audio.addEventListener('ended', function() { 41 | if(status == 'list') { //列表循环 42 | 43 | if(scope.player.active == (scope.player.musicLen - 1)) { 44 | scope.player.active = 0; 45 | } else { 46 | scope.player.active += 1; 47 | } 48 | 49 | } else if(status == 'random') { //随机播放 50 | var randomIndex = parseInt(scope.player.musicLen * Math.random()); 51 | 52 | console.log('randomPlay' + randomIndex); 53 | 54 | if (randomIndex == scope.player.active) {//下一首和当前相同，跳到下一首 55 | randomIndex += 1; 56 | } 57 | 58 | scope.player.active = randomIndex; 59 | } else { 60 | console.log('repeat'); //单曲循环 61 | } 62 | 63 | scope.$apply(scope.player.controllPlay(scope.player.active)); 64 | }); 65 | 66 | //声音volume条显示或隐藏 67 | var volTime; 68 | scope.volShow = false; 69 | 70 | scope.showVol = function() { 71 | scope.volShow = true; 72 | clearTimeout(volTime); 73 | }; 74 | 75 | scope.hideVol = function() { 76 | volTime = $timeout(function() { 77 | scope.volShow = false; 78 | }, 300); 79 | }; 80 | 81 | //控制音量 82 | scope.volStyle = 'height: 64px'; 83 | scope.audio.volume = 0.8; 84 | scope.adjustVolume = function(ev){ //调整音量 85 | var event = window.event || ev; 86 | var volumeY = $document[0].querySelector('.play-vol').getBoundingClientRect().bottom - event.clientY; 87 | scope.audio.volume = (volumeY/75).toFixed(2); 88 | scope.volStyle = "height:" + volumeY + 'px'; 89 | }; 90 | 91 | //声音是否播放 92 | scope.muted = true; 93 | scope.audioMuted = function() { 94 | if(scope.audio.muted == false) { 95 | scope.audio.muted = true; 96 | scope.muted = false; 97 | } else { 98 | scope.audio.muted = false; 99 | scope.muted = true; 100 | } 101 | }; 102 | } 103 | 104 | } 105 | }]); 106 | 107 | //播放音乐进度条 108 | playerApp.directive('progressBar', ['$document', '$interval', '$rootScope', function($document, $interval, $rootScope) { 109 | return { 110 | restrict: 'AE', 111 | replace: true, 112 | scope: { 113 | player: '=', 114 | audio: '=' 115 | }, 116 | templateUrl: 'tpls/progress.html', 117 | link: function(scope, rootScope, ele, attr) { 118 | console.log($rootScope); 119 | scope.surplusBar = function() { //音乐剩余时间 120 | if(!isNaN(scope.audio.duration)) { 121 | 122 | var surplus = scope.audio.duration-scope.audio.currentTime; 123 | var surplusMin = parseInt(surplus/60); 124 | var surplusSecond = parseInt(surplus%60); 125 | if(surplusSecond < 10 ) { 126 | surplusSecond = '0'+surplusSecond; 127 | } 128 | 129 | scope.playTime = '-' + surplusMin + ':' + surplusSecond; 130 | 131 | //播放进度条 132 | var progressValue = scope.audio.currentTime/scope.audio.duration*1000; 133 | scope.surplusWidth = 'width:' + parseInt(progressValue) + 'px'; 134 | } 135 | }; 136 | 137 | scope.bufferBar = function() { //缓冲进度条 138 | bufferTimer = $interval(function() { 139 | var bufferIndex = scope.audio.buffered.length; 140 | 141 | if (bufferIndex > 0 && scope.audio.buffered != undefined) { 142 | var bufferValue = scope.audio.buffered.end(bufferIndex-1)/scope.audio.duration*1000; 143 | scope.bufferWidth = 'width:' + parseInt(bufferValue) + 'px'; 144 | 145 | if (Math.abs(scope.audio.duration - scope.audio.buffered.end(bufferIndex-1)) <1) { 146 | scope.bufferWidth = 'width: 1000px'; 147 | clearInterval(bufferTimer); 148 | } 149 | } 150 | }, 1000); 151 | }; 152 | 153 | scope.adjustPorgress = function(ev) { //播放进度条 154 | var event = window.event || ev; 155 | var progressX = event.clientX - $document[0].querySelector('.progress-bar').getBoundingClientRect().left; 156 | scope.audio.currentTime = parseInt(progressX/1000*scope.audio.duration); 157 | scope.audio.removeEventListener('canplay', scope.bufferBar); 158 | } 159 | 160 | //播放时间 161 | scope.audio.addEventListener('timeupdate',function(){ 162 | scope.$apply(scope.surplusBar()); 163 | }); 164 | 165 | //缓冲时间 166 | scope.audio.addEventListener('canplay', function() { 167 | scope.$apply(scope.bufferBar()); 168 | }); 169 | } 170 | } 171 | }]); -------------------------------------------------------------------------------- /player/static/js/index.min.js: -------------------------------------------------------------------------------- 1 | var playerApp=angular.module("playerApp",["ngRoute"]);playerApp.controller("playerCtrls",["$scope","DataList","DataBinding","Audio","Player","$timeout",function($scope,DataList,DataBinding,Audio,Player){DataBinding.dataBindFunc(0),$scope.player=Player,$scope.audio=Audio,$scope.player.active=0,$scope.player.controllPlay($scope.player.active),$scope.player.playerSrc($scope.player.active),$scope.isSelected=function(){$scope.player.active=this.$index,DataBinding.dataBindFunc($scope.player.active),$scope.player.controllPlay($scope.player.active)}}]),playerApp.factory("DataList",function(){var data=[{id:0,artist:"Lene Marlin",song:"A Place Nearby",album:"《Playing My Game》",songUrl:"static/music/A Place Nearby.mp3",avatar:"static/img/lm.jpg"},{id:1,artist:"David Archuleta",song:"Crush",album:"《David Archuleta》",songUrl:"static/music/Crush.mp3",avatar:"static/img/da.jpg"},{id:2,artist:"Lucie Arnaz",song:"I still Believe In Love",album:"《They'Re Playing Our Song》",songUrl:"static/music/I Still Believe In Love.mp3",avatar:"static/img/la.jpg"},{id:3,artist:"Jem",song:"It's Amazing",album:"《Sex And The City - Original Motion Picture Soundtrack》",songUrl:"static/music/It'S Amazing.mp3",avatar:"static/img/jem.jpg"},{id:4,artist:"Jewel",song:"Stay Here Forever",album:"《Sweet And Wild》",songUrl:"static/music/Stay Here Forever.mp3",avatar:"static/img/jew.jpg"},{id:5,artist:"Lenka",song:"The Show",album:"《#LOVE acoustic》",songUrl:"static/music/The Show.mp3",avatar:"static/img/lenka.jpg"},{id:6,artist:"Tamas Wells",song:"Valder Fields",album:"《A Plea En Vendredi》",songUrl:"static/music/Valder Fields.mp3",avatar:"static/img/tw.jpg"}];return data}),playerApp.factory("DataBinding",["$rootScope","DataList",function($rootScope,DataList){$rootScope.datas=DataList;var dataObj={dataBindFunc:function(index){$rootScope.avatar=$rootScope.datas[index].avatar,$rootScope.artist=$rootScope.datas[index].artist,$rootScope.song=$rootScope.datas[index].song,$rootScope.album=$rootScope.datas[index].album}};return dataObj}]),playerApp.factory("Audio",["$document",function($document){var audio=$document[0].createElement("audio");return audio}]),playerApp.factory("Player",["$rootScope","$interval","Audio","DataList","DataBinding",function($rootScope,$interval,Audio,DataList,DataBinding){$rootScope.data=DataList;var player={musicLen:"7",controllPlay:function(index){player.playerSrc(index),player.play(),player.isPlay=!0,DataBinding.dataBindFunc(index),player.playing=!0},playerSrc:function(index){var url=$rootScope.data[index].songUrl;Audio.src=url},play:function(){player.playing&&player.stop(),Audio.play(),player.isPlay=!0,player.playing=!0},stop:function(){player.playing&&Audio.pause(),player.isPlay=!1,player.playing=!1},prev:function(){console.log("prev:"+player.active),0==player.active?player.active=player.musicLen-1:player.active-=1,player.controllPlay(player.active)},next:function(){console.log("next:"+player.active),player.active==player.musicLen-1?player.active=0:player.active+=1,player.controllPlay(player.active)}};return player}]),playerApp.directive("musicMode",["$timeout","$document",function($timeout,$document){return{restrict:"AE",replace:!0,scope:{player:"=",audio:"="},templateUrl:"tpls/mode.html",link:function(scope,ele){var status="list";scope.addActive=function(index){ele.children("li").removeClass("active"),ele.children("li").eq(index).addClass("active")},scope.addActive(0),scope.listPlay=function(){status="list",console.log("list"),scope.addActive(0)},scope.randomPlay=function(){console.log("random"),status="random",scope.addActive(1)},scope.repeatPlay=function(){status="repeat",console.log("repeat"),scope.addActive(2)},scope.audio.addEventListener("ended",function(){if("list"==status)scope.player.active==scope.player.musicLen-1?scope.player.active=0:scope.player.active+=1;else if("random"==status){var randomIndex=parseInt(scope.player.musicLen*Math.random());console.log("randomPlay"+randomIndex),randomIndex==scope.player.active&&(randomIndex+=1),scope.player.active=randomIndex}else console.log("repeat");scope.$apply(scope.player.controllPlay(scope.player.active))});var volTime;scope.volShow=!1,scope.showVol=function(){scope.volShow=!0,clearTimeout(volTime)},scope.hideVol=function(){volTime=$timeout(function(){scope.volShow=!1},300)},scope.volStyle="height: 64px",scope.audio.volume=.8,scope.adjustVolume=function(ev){var event=window.event||ev,volumeY=$document[0].querySelector(".play-vol").getBoundingClientRect().bottom-event.clientY;scope.audio.volume=(volumeY/75).toFixed(2),scope.volStyle="height:"+volumeY+"px"},scope.muted=!0,scope.audioMuted=function(){0==scope.audio.muted?(scope.audio.muted=!0,scope.muted=!1):(scope.audio.muted=!1,scope.muted=!0)}}}}]),playerApp.directive("progressBar",["$document","$interval","$rootScope",function($document,$interval,$rootScope){return{restrict:"AE",replace:!0,scope:{player:"=",audio:"="},templateUrl:"tpls/progress.html",link:function(scope){console.log($rootScope),scope.surplusBar=function(){if(!isNaN(scope.audio.duration)){var surplus=scope.audio.duration-scope.audio.currentTime,surplusMin=parseInt(surplus/60),surplusSecond=parseInt(surplus%60);10>surplusSecond&&(surplusSecond="0"+surplusSecond),scope.playTime="-"+surplusMin+":"+surplusSecond;var progressValue=scope.audio.currentTime/scope.audio.duration*1e3;scope.surplusWidth="width:"+parseInt(progressValue)+"px"}},scope.bufferBar=function(){bufferTimer=$interval(function(){var bufferIndex=scope.audio.buffered.length;if(bufferIndex>0&&void 0!=scope.audio.buffered){var bufferValue=scope.audio.buffered.end(bufferIndex-1)/scope.audio.duration*1e3;scope.bufferWidth="width:"+parseInt(bufferValue)+"px",Math.abs(scope.audio.duration-scope.audio.buffered.end(bufferIndex-1))<1&&(scope.bufferWidth="width: 1000px",clearInterval(bufferTimer))}},1e3)},scope.adjustPorgress=function(ev){var event=window.event||ev,progressX=event.clientX-$document[0].querySelector(".progress-bar").getBoundingClientRect().left;scope.audio.currentTime=parseInt(progressX/1e3*scope.audio.duration),scope.audio.removeEventListener("canplay",scope.bufferBar)},scope.audio.addEventListener("timeupdate",function(){scope.$apply(scope.surplusBar())}),scope.audio.addEventListener("canplay",function(){scope.$apply(scope.bufferBar())})}}}]),playerApp.config(function($routeProvider){$routeProvider.when("/player",{templateUrl:"index.html",controller:"playerCtrls"}).otherwise({redirectTo:"/player"})}); -------------------------------------------------------------------------------- /player/static/js/router.js: -------------------------------------------------------------------------------- 1 | playerApp.config(function($routeProvider) { 2 | $routeProvider.when('/player', { 3 | templateUrl: 'index.html', 4 | controller: 'playerCtrls' 5 | }).otherwise({ 6 | redirectTo: '/player' 7 | }); 8 | }); -------------------------------------------------------------------------------- /player/static/js/service.js: -------------------------------------------------------------------------------- 1 | //Data list Service 2 | playerApp.factory('DataList', function() { 3 | var data = [ 4 | { 5 | "id": 0, 6 | "artist": "Lene Marlin", 7 | "song" : "A Place Nearby", 8 | "album" : "《Playing My Game》", 9 | "songUrl" : "static/music/A Place Nearby.mp3", 10 | "avatar" : "static/img/lm.jpg" 11 | }, 12 | { 13 | "id": 1, 14 | "artist": "David Archuleta", 15 | "song" : "Crush", 16 | "album" : "《David Archuleta》", 17 | "songUrl" : "static/music/Crush.mp3", 18 | "avatar" : "static/img/da.jpg" 19 | }, 20 | { 21 | "id": 2, 22 | "artist": "Lucie Arnaz", 23 | "song" : "I still Believe In Love", 24 | "album" : "《They'Re Playing Our Song》", 25 | "songUrl" : "static/music/I Still Believe In Love.mp3", 26 | "avatar" : "static/img/la.jpg" 27 | }, 28 | { 29 | "id": 3, 30 | "artist": "Jem", 31 | "song" : "It's Amazing", 32 | "album" : "《Sex And The City - Original Motion Picture Soundtrack》", 33 | "songUrl" : "static/music/It'S Amazing.mp3", 34 | "avatar" : "static/img/jem.jpg" 35 | }, 36 | { 37 | "id": 4, 38 | "artist": "Jewel", 39 | "song" : "Stay Here Forever", 40 | "album" : "《Sweet And Wild》", 41 | "songUrl" : "static/music/Stay Here Forever.mp3", 42 | "avatar" : "static/img/jew.jpg" 43 | }, 44 | { 45 | "id": 5, 46 | "artist": "Lenka", 47 | "song" : "The Show", 48 | "album" : "《#LOVE acoustic》", 49 | "songUrl" : "static/music/The Show.mp3", 50 | "avatar" : "static/img/lenka.jpg" 51 | }, 52 | { 53 | "id": 6, 54 | "artist": "Tamas Wells", 55 | "song" : "Valder Fields", 56 | "album" : "《A Plea En Vendredi》", 57 | "songUrl" : "static/music/Valder Fields.mp3", 58 | "avatar" : "static/img/tw.jpg" 59 | } 60 | ]; 61 | 62 | return data; 63 | }); 64 | 65 | //Binding Data Service 66 | playerApp.factory('DataBinding', ['$rootScope', 'DataList', function($rootScope, DataList) { 67 | $rootScope.datas = DataList; 68 | 69 | var dataObj = { 70 | dataBindFunc: function(index) { 71 | $rootScope.avatar = $rootScope.datas[index].avatar; 72 | $rootScope.artist = $rootScope.datas[index].artist; 73 | $rootScope.song = $rootScope.datas[index].song; 74 | $rootScope.album = $rootScope.datas[index].album; 75 | } 76 | }; 77 | 78 | return dataObj; 79 | }]); 80 | 81 | //Audio Service 82 | playerApp.factory('Audio', ['$document', function($document) { 83 | var audio = $document[0].createElement('audio'); 84 | 85 | return audio; 86 | }]); 87 | 88 | //Player Service 89 | playerApp.factory('Player', ['$rootScope', '$interval' ,'Audio', 'DataList', 'DataBinding', function($rootScope, $interval, Audio, DataList, DataBinding) { 90 | $rootScope.data = DataList; 91 | 92 | var player = { 93 | musicLen: '7', 94 | controllPlay: function(index) { 95 | player.playerSrc(index); 96 | player.play();//播放 97 | player.isPlay = true;//让图片转动 98 | DataBinding.dataBindFunc(index);//显示当前播放歌曲的信息 99 | player.playing = true;//显示暂停按钮 100 | }, 101 | playerSrc: function(index) { //Audio的url 102 | var url = $rootScope.data[index].songUrl; 103 | Audio.src = url; 104 | }, 105 | play: function(index) { //播放 106 | if(player.playing) { 107 | player.stop(); 108 | } 109 | 110 | Audio.play(); //h5 audio api 111 | player.isPlay = true; //图片转动 112 | player.playing = true; //显示暂停按钮 113 | }, 114 | stop: function() { //暂停 115 | if(player.playing) { 116 | Audio.pause(); 117 | } 118 | 119 | player.isPlay = false; //图片停止转动 120 | player.playing = false;//显示播放按钮 121 | }, 122 | prev: function(index) { //上一首歌 123 | console.log('prev:' + player.active); 124 | 125 | if(player.active == 0) { //如果是第一首音乐 126 | player.active = player.musicLen - 1; //播放最后一首 127 | } else { 128 | player.active -= 1; //否则递减 129 | } 130 | 131 | player.controllPlay(player.active); 132 | }, 133 | next: function(index) { //下一首歌 134 | console.log('next:' + player.active); 135 | 136 | if(player.active == (player.musicLen - 1)) { 137 | player.active = 0; 138 | } else { 139 | player.active += 1; 140 | } 141 | 142 | player.controllPlay(player.active); //播放显示的数据 143 | } 144 | }; 145 | 146 | return player; 147 | }]); 148 | -------------------------------------------------------------------------------- /player/static/less/index.less: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | //Mixins&Variables 4 | @import "mixins.less"; 5 | @import "variables.less"; 6 | 7 | //icon 8 | @font-face { 9 | font-family: 'icomoon'; 10 | src:url('../fonts/icomoon.eot?-32qlpk'); 11 | src:url('../fonts/icomoon.eot?#iefix-32qlpk') format('embedded-opentype'), 12 | url('../fonts/icomoon.woff?-32qlpk') format('woff'), 13 | url('../fonts/icomoon.ttf?-32qlpk') format('truetype'), 14 | url('../fonts/icomoon.svg?-32qlpk#icomoon') format('svg'); 15 | font-weight: normal; 16 | font-style: normal; 17 | } 18 | 19 | [class^="icon-"], [class*=" icon-"] { 20 | font-family: 'icomoon'; 21 | speak: none; 22 | font-style: normal; 23 | font-weight: normal; 24 | font-variant: normal; 25 | text-transform: none; 26 | line-height: 1; 27 | 28 | /* Better Font Rendering =========== */ 29 | -webkit-font-smoothing: antialiased; 30 | -moz-osx-font-smoothing: grayscale; 31 | } 32 | 33 | .icon-music:before { 34 | content: "\e600"; 35 | } 36 | .icon-play:before { 37 | content: "\e601"; 38 | } 39 | .icon-pause:before { 40 | content: "\e602"; 41 | } 42 | .icon-backward:before { 43 | content: "\e603"; 44 | } 45 | .icon-forward:before { 46 | content: "\e604"; 47 | } 48 | .icon-volume-medium:before { 49 | content: "\e605"; 50 | } 51 | .icon-volume-mute:before { 52 | content: "\e606"; 53 | } 54 | .icon-loop:before { 55 | content: "\e607"; 56 | } 57 | .icon-loop2:before { 58 | content: "\e608"; 59 | } 60 | .icon-shuffle:before { 61 | content: "\e609"; 62 | } 63 | .icon-vynil:before { 64 | content: "\e60a"; 65 | } 66 | 67 | 68 | //Index Style 69 | html { 70 | .size(100%, 100%); 71 | } 72 | 73 | body { 74 | height: 100%; 75 | color: #fff; 76 | #gradient .vertical(#ec9cb5, #75839d); 77 | } 78 | 79 | li { 80 | list-style: none; 81 | } 82 | 83 | a, 84 | b { 85 | color: #29295f; 86 | } 87 | 88 | .container { 89 | position: absolute; 90 | top: 50%; 91 | left: 50%; 92 | transform: translate(-50%, -50%); 93 | width: 1000px; 94 | } 95 | 96 | .main { 97 | .clearfix; 98 | } 99 | 100 | .player { 101 | float: left; 102 | width: 500px; 103 | } 104 | 105 | .player-list { 106 | position: relative; 107 | top: 34px; 108 | float: right; 109 | width: 500px; 110 | border-radius: 15px; 111 | background: rgba(255, 255, 255, .2); 112 | 113 | .list-title { 114 | width: 182px; 115 | float: right; 116 | margin-right: -10px; 117 | padding: 5px 2px; 118 | color: @white; 119 | border-radius: 15px; 120 | #gradient .vertical(#6cd3d0, #4cb7af); 121 | text-align: center; 122 | } 123 | 124 | .icon-vynil { 125 | margin-right: 5px; 126 | } 127 | } 128 | 129 | .list-music { 130 | padding: 15px 15px; 131 | border-radius: 37px; 132 | text-align: center; 133 | 134 | li { 135 | margin:12px 0; 136 | padding: 7px 0; 137 | cursor: pointer; 138 | } 139 | 140 | span { 141 | display: inline-block; 142 | width: 394px; 143 | text-align: left; 144 | white-space: nowrap; 145 | overflow: hidden; 146 | text-overflow: ellipsis; 147 | vertical-align: middle; 148 | } 149 | 150 | i { 151 | margin-left: 5px; 152 | color: #5fc8c3; 153 | } 154 | } 155 | 156 | .artist { 157 | display: -webkit-flex; 158 | display: flex; 159 | 160 | .artist-rotate { 161 | -moz-animation: spin 8s infinite linear; 162 | -o-animation: spin 8s infinite linear; 163 | -webkit-animation: spin 8s infinite linear; 164 | animation: spin 8s infinite linear; 165 | } 166 | 167 | .artist-img { 168 | .size(100px, 100px); 169 | border-radius: 50%; 170 | z-index: 9; 171 | 172 | img { 173 | display: block; 174 | .size(100px, 100px); 175 | border-radius: 50%; 176 | border: 3px solid #5fc8c3; 177 | .box-shadow(0 0 17px #333); 178 | } 179 | } 180 | 181 | .artist-name { 182 | display: inline-block; 183 | .size(184px, 50px); 184 | margin: 45px 0 0 -10px; 185 | text-align: center; 186 | line-height: 50px; 187 | border-top-right-radius: 25px; 188 | border-bottom-right-radius: 25px; 189 | #gradient .vertical(#6cd3d0, #4cb7af); 190 | .box-shadow(0 0 17px #333); 191 | 192 | b { 193 | margin-right: 10px; 194 | vertical-align: middle; 195 | } 196 | } 197 | } 198 | 199 | .music { 200 | width: 100%; 201 | margin-top: 81px; 202 | text-align: center; 203 | 204 | .music-record { 205 | padding: 0; 206 | margin: -10px 0 0 0; 207 | } 208 | } 209 | 210 | .player-btn { 211 | width: 100%; 212 | margin-top: 81px; 213 | text-align: center; 214 | 215 | a { 216 | display: inline-block; 217 | margin: 0 15px; 218 | text-align: center; 219 | border-radius: 50%; 220 | text-decoration: none; 221 | color: #f4f2f5; 222 | #gradient .vertical(#6cd3d0, #4cb7af); 223 | transition: all 2s; 224 | -webkit-transition: all .5s; 225 | 226 | &:hover { 227 | color: #5db7b5; 228 | #gradient .vertical(#f4f2f5, #e3dde1); 229 | } 230 | } 231 | 232 | a.prev, 233 | a.next { 234 | .size(80px, 80px); 235 | 236 | span { 237 | line-height: 80px; 238 | font-size: @baseFontSize + 25; 239 | } 240 | } 241 | 242 | .icon-backward { 243 | padding-right: 5px; 244 | } 245 | 246 | .icon-forward { 247 | padding-left: 5px; 248 | } 249 | 250 | .icon-play, 251 | .icon-pause { 252 | padding-left: 12px; 253 | line-height: 100px; 254 | font-size: @baseFontSize + 35; 255 | } 256 | 257 | .icon-pause { 258 | padding-left: 0; 259 | } 260 | 261 | a.play, 262 | a.stop { 263 | .size(100px, 100px); 264 | } 265 | } 266 | 267 | .play-sel { 268 | width: 100%; 269 | 270 | // .play-time { 271 | // display: inline-block; 272 | // text-align: left; 273 | // } 274 | 275 | .play-style { 276 | display: inline-block; 277 | width: 916px; 278 | text-align: right; 279 | 280 | li { 281 | display: inline-block; 282 | margin: 0 6px; 283 | } 284 | 285 | a { 286 | font-size: @baseFontSize + 7; 287 | text-decoration: none; 288 | } 289 | 290 | li.active { 291 | a { 292 | color: #5db7b5; 293 | } 294 | } 295 | } 296 | } 297 | 298 | .progress-play { 299 | margin-top: 71px; 300 | } 301 | 302 | .progress-bar { 303 | position: relative; 304 | width: 100%; 305 | height: 10px; 306 | #gradient .vertical(#f4f2f5, #e3dde1); 307 | border-radius: 15px; 308 | border: 2px solid #4cb7af; 309 | cursor: pointer; 310 | 311 | .progress-loading { 312 | position: absolute; 313 | height: 10px; 314 | background: #ccc; 315 | border-radius: 15px; 316 | z-index: 9; 317 | } 318 | 319 | .progress-playing { 320 | position: absolute; 321 | height: 10px; 322 | #gradient .vertical(#6cd3d0, #4cb7af); 323 | border-radius: 15px; 324 | z-index: 99; 325 | } 326 | 327 | .play-time { 328 | position: absolute; 329 | top: -50px; 330 | left: 0; 331 | } 332 | } 333 | 334 | .play-voice { 335 | position: relative; 336 | 337 | .play-vol, 338 | .play-voling { 339 | display: block; 340 | position: absolute; 341 | width: 8px; 342 | border-radius: 15px; 343 | } 344 | 345 | .play-vol { 346 | left: 0; 347 | top: -81px; 348 | height: 74px; 349 | border: 2px solid #fff; 350 | background: #ccc; 351 | } 352 | 353 | .play-voling { 354 | left: 0; 355 | bottom: 0; 356 | width: 8px; 357 | background: #5db7b5; 358 | } 359 | } 360 | 361 | @-moz-keyframes spin { 362 | 0% { -moz-transform: rotate(0deg); } 363 | 100% { -moz-transform: rotate(360deg); } 364 | } 365 | @-webkit-keyframes spin { 366 | 0% { -webkit-transform: rotate(0deg); } 367 | 100% { -webkit-transform: rotate(360deg); } 368 | } 369 | @-o-keyframes spin { 370 | 0% { -o-transform: rotate(0deg); } 371 | 100% { -o-transform: rotate(360deg); } 372 | } 373 | @-ms-keyframes spin { 374 | 0% { -ms-transform: rotate(0deg); } 375 | 100% { -ms-transform: rotate(360deg); } 376 | } 377 | @keyframes spin { 378 | 0% { transform: rotate(0deg); } 379 | 100% { transform: rotate(360deg); } 380 | } 381 | 382 | 383 | 384 | 385 | -------------------------------------------------------------------------------- /player/static/less/variables.less: -------------------------------------------------------------------------------- 1 | /* 2 | *@名称: variables 3 | *@功能: 全局变量 4 | */ 5 | 6 | /* 浅色 */ 7 | @black: #000; 8 | @grayDarker: #222; 9 | @grayDark: #333; 10 | @gray: #555; 11 | @grayLight: #999; 12 | @grayLighter: #eee; 13 | @white: #fff; 14 | 15 | /* 深色 */ 16 | @blue: #049cdb; 17 | @blueDark: #0064cd; 18 | @green: #46a546; 19 | @red: #9d261d; 20 | @yellow: #ffc40d; 21 | @orange: #f89406; 22 | @pink: #c3325f; 23 | @purple: #7a43b6; 24 | 25 | /* 背景和文字颜色 */ 26 | @bodyBackground: @white; 27 | @textColor: @grayDark; 28 | 29 | /* 链接 */ 30 | @linkColor: #08c; 31 | @linkColorHover: darken(@linkColor, 15%); 32 | 33 | /* 排版 */ 34 | @sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif; 35 | @serifFontFamily: Georgia, "Times New Roman", Times, serif; 36 | @monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace; 37 | 38 | @baseFontSize: 14px; 39 | @baseFontFamily: @sansFontFamily; 40 | @baseLineHeight: 20px; 41 | @altFontFamily: @serifFontFamily; 42 | 43 | @headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily 44 | @headingsFontWeight: bold; // instead of browser default, bold 45 | @headingsColor: inherit; // empty to use BS default, @textColor 46 | 47 | /* 48 | *字体大小 49 | *@Based on 14px font-size and 20px line-height 50 | */ 51 | @fontSizeLarge: @baseFontSize * 1.25; // ~18px 52 | @fontSizeMedium: @baseFontSize * 0.90; // ~13px 53 | @fontSizeSmall: @baseFontSize * 0.85; // ~12px 54 | @fontSizeMini: @baseFontSize * 0.75; // ~11px 55 | 56 | @paddingLarge: 11px 19px; // 44px 57 | @paddingSmall: 2px 10px; // 26px 58 | @paddingMini: 0 6px; // 22px 59 | 60 | @baseBorderRadius: 4px; 61 | @borderRadiusLarge: 6px; 62 | @borderRadiusSmall: 3px; 63 | 64 | /* 表格 */ 65 | @tableBackground: transparent; // overall background-color 66 | @tableBackgroundAccent: #f9f9f9; // for striping 67 | @tableBackgroundHover: #f5f5f5; // for hover 68 | @tableBorder: #ddd; // table and cell border 69 | 70 | /* 按钮 */ 71 | @btnBackground: @white; 72 | @btnBackgroundHighlight: darken(@white, 10%); 73 | @btnBorder: #ccc; 74 | 75 | @btnPrimaryBackground: @linkColor; 76 | @btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%); 77 | 78 | @btnNormalBackground: #F0EFEB; 79 | @btnNormalBackgroundHighlight: #FAF9F5; 80 | 81 | @btnInfoBackground: #5bc0de; 82 | @btnInfoBackgroundHighlight: #2f96b4; 83 | 84 | @btnSuccessBackground: #62c462; 85 | @btnSuccessBackgroundHighlight: #51a351; 86 | 87 | @btnWarningBackground: lighten(@orange, 15%); 88 | @btnWarningBackgroundHighlight: @orange; 89 | 90 | @btnDangerBackground: #ee5f5b; 91 | @btnDangerBackgroundHighlight: #bd362f; 92 | 93 | @btnInverseBackground: #444; 94 | @btnInverseBackgroundHighlight: @grayDarker; 95 | 96 | /* 表单 */ 97 | @inputBackground: @white; 98 | @inputBorder: #ccc; 99 | @inputBorderRadius: @baseBorderRadius; 100 | @inputDisabledBackground: @grayLighter; 101 | @formActionsBackground: #f5f5f5; 102 | @inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border 103 | 104 | /* 下拉菜单 */ 105 | @dropdownBackground: @white; 106 | @dropdownBorder: rgba(0,0,0,.2); 107 | @dropdownDividerTop: #e5e5e5; 108 | @dropdownDividerBottom: @white; 109 | 110 | @dropdownLinkColor: @grayDark; 111 | @dropdownLinkColorHover: @white; 112 | @dropdownLinkColorActive: @white; 113 | 114 | @dropdownLinkBackgroundActive: @linkColor; 115 | @dropdownLinkBackgroundHover: @dropdownLinkBackgroundActive; 116 | 117 | /* 层级 */ 118 | @zindexDropdown: 1000; 119 | @zindexPopover: 1010; 120 | @zindexTooltip: 1030; 121 | @zindexFixedNavbar: 1030; 122 | @zindexModalBackdrop: 1040; 123 | @zindexModal: 1050; 124 | 125 | /* Sprite图标路径 */ 126 | @iconSpritePath: "../img/glyphicons-halflings.png"; 127 | @iconWhiteSpritePath: "../img/glyphicons-halflings-white.png"; 128 | 129 | /* 导航栏 */ 130 | @navbarCollapseWidth: 979px; 131 | @navbarCollapseDesktopWidth: @navbarCollapseWidth + 1; 132 | 133 | @navbarHeight: 40px; 134 | @navbarBackgroundHighlight: #ffffff; 135 | @navbarBackground: darken(@navbarBackgroundHighlight, 5%); 136 | @navbarBorder: darken(@navbarBackground, 12%); 137 | 138 | @navbarText: #777; 139 | @navbarLinkColor: #777; 140 | @navbarLinkColorHover: @grayDark; 141 | @navbarLinkColorActive: @gray; 142 | @navbarLinkBackgroundHover: transparent; 143 | @navbarLinkBackgroundActive: darken(@navbarBackground, 5%); 144 | 145 | @navbarBrandColor: @navbarLinkColor; 146 | 147 | /* 分页 */ 148 | @paginationBackground: #fff; 149 | @paginationBorder: #ddd; 150 | @paginationActiveBackground: #f5f5f5; 151 | 152 | /* 表单状态和提示 */ 153 | @warningText: #c09853; 154 | @warningBackground: #fcf8e3; 155 | @warningBorder: darken(spin(@warningBackground, -10), 3%); 156 | 157 | @errorText: #b94a48; 158 | @errorBackground: #f2dede; 159 | @errorBorder: darken(spin(@errorBackground, -10), 3%); 160 | 161 | @successText: #468847; 162 | @successBackground: #dff0d8; 163 | @successBorder: darken(spin(@successBackground, -10), 5%); 164 | 165 | @infoText: #3a87ad; 166 | @infoBackground: #d9edf7; 167 | @infoBorder: darken(spin(@infoBackground, -10), 7%); 168 | 169 | /* Tooltips and popovers */ 170 | @tooltipColor: #fff; 171 | @tooltipBackground: #000; 172 | @tooltipArrowWidth: 5px; 173 | @tooltipArrowColor: @tooltipBackground; 174 | 175 | @popoverBackground: #fff; 176 | @popoverArrowWidth: 10px; 177 | @popoverArrowColor: #fff; 178 | @popoverTitleBackground: darken(@popoverBackground, 3%); 179 | 180 | // Special enhancement for popovers 181 | @popoverArrowOuterWidth: @popoverArrowWidth + 1; 182 | @popoverArrowOuterColor: rgba(0,0,0,.25); 183 | 184 | /* 栅格 */ 185 | // 默认940px 186 | @gridColumns: 12; 187 | @gridColumnWidth: 60px; 188 | @gridGutterWidth: 20px; 189 | @gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); 190 | 191 | // 1200px 192 | @gridColumnWidth1200: 70px; 193 | @gridGutterWidth1200: 30px; 194 | @gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1)); 195 | 196 | // 768px-979px 197 | @gridColumnWidth768: 42px; 198 | @gridGutterWidth768: 20px; 199 | @gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1)); 200 | 201 | // 流体栅格 202 | @fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth); 203 | @fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth); 204 | 205 | // 1200px 206 | @fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200); 207 | @fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200); 208 | 209 | // 768px-979px 210 | @fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768); 211 | @fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768); -------------------------------------------------------------------------------- /player/static/music/A Place Nearby.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ellyliang/JQM-me/894f19ff1e59dd23da1e4883c84f34670d452515/player/static/music/A Place Nearby.mp3 -------------------------------------------------------------------------------- /player/static/music/Crush.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ellyliang/JQM-me/894f19ff1e59dd23da1e4883c84f34670d452515/player/static/music/Crush.mp3 -------------------------------------------------------------------------------- /player/static/music/I Still Believe In Love.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ellyliang/JQM-me/894f19ff1e59dd23da1e4883c84f34670d452515/player/static/music/I Still Believe In Love.mp3 -------------------------------------------------------------------------------- /player/static/music/It'S Amazing.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ellyliang/JQM-me/894f19ff1e59dd23da1e4883c84f34670d452515/player/static/music/It'S Amazing.mp3 -------------------------------------------------------------------------------- /player/static/music/Stay Here Forever.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ellyliang/JQM-me/894f19ff1e59dd23da1e4883c84f34670d452515/player/static/music/Stay Here Forever.mp3 -------------------------------------------------------------------------------- /player/static/music/The Show.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ellyliang/JQM-me/894f19ff1e59dd23da1e4883c84f34670d452515/player/static/music/The Show.mp3 -------------------------------------------------------------------------------- /player/static/music/Valder Fields.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ellyliang/JQM-me/894f19ff1e59dd23da1e4883c84f34670d452515/player/static/music/Valder Fields.mp3 -------------------------------------------------------------------------------- /player/tpls/mode.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /player/tpls/progress.html: -------------------------------------------------------------------------------- 1 |
      2 |

      {{playTime}}

      3 |
      4 |
      5 |
      -------------------------------------------------------------------------------- /qqcss3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | qq 6 | 66 | 67 | 68 |
      69 |
      70 |
      71 |
      72 | 73 | -------------------------------------------------------------------------------- /react-player/app/Router.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 路由 3 | */ 4 | 5 | var router = (function() { 6 | 'use strict'; 7 | 8 | var routes = []; 9 | 10 | function addRoute(route, handler) { 11 | 12 | routes.push({parts: route.split('/'), handler: handler}); 13 | } 14 | 15 | function load(route) { 16 | window.location.hash = route; 17 | } 18 | 19 | function start() { 20 | 21 | var path = window.location.hash.substr(1), 22 | parts = path.split('/'), 23 | partsLength = parts.length; 24 | 25 | for (var i = 0; i < routes.length; i++) { 26 | var route = routes[i]; 27 | if (route.parts.length === partsLength) { 28 | var params = []; 29 | for (var j = 0; j < partsLength; j++) { 30 | if (route.parts[j].substr(0, 1) === ':') { 31 | params.push(parts[j]); 32 | } else if (route.parts[j] !== parts[j]) { 33 | break; 34 | } 35 | } 36 | if (j === partsLength) { 37 | route.handler.apply(undefined, params); 38 | return; 39 | } 40 | } 41 | } 42 | } 43 | 44 | window.onhashchange = start; 45 | 46 | return { 47 | addRoute: addRoute, 48 | load: load, 49 | start: start 50 | }; 51 | }()); 52 | 53 | module.exports = router; -------------------------------------------------------------------------------- /react-player/app/css/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Microsoft Yahei', 'Helvetica Neue', sans-serif, SimHei; 3 | overflow: hidden; 4 | background: #3b3837; 5 | cursor: pointer; 6 | -webkit-tap-highlight-color: rgba(255, 0, 0, 0); 7 | /*解决背景闪的bug*/ 8 | } 9 | @font-face { 10 | font-family: 'icomoon'; 11 | src: url('../fonts/icomoon.eot?-32qlpk'); 12 | src: url('../fonts/icomoon.eot?#iefix-32qlpk') format('embedded-opentype'), url('../fonts/icomoon.woff?-32qlpk') format('woff'), url('../fonts/icomoon.ttf?-32qlpk') format('truetype'), url('../fonts/icomoon.svg?-32qlpk#icomoon') format('svg'); 13 | font-weight: normal; 14 | font-style: normal; 15 | } 16 | [class^="icon-"], 17 | [class*=" icon-"] { 18 | font-family: 'icomoon'; 19 | speak: none; 20 | font-style: normal; 21 | font-weight: normal; 22 | font-variant: normal; 23 | text-transform: none; 24 | line-height: 1; 25 | /* Better Font Rendering =========== */ 26 | -webkit-font-smoothing: antialiased; 27 | -moz-osx-font-smoothing: grayscale; 28 | } 29 | .icon-music:before { 30 | content: "\e600"; 31 | } 32 | .icon-play:before { 33 | content: "\e601"; 34 | } 35 | .icon-backward:before { 36 | content: "\e603"; 37 | } 38 | .icon-forward:before { 39 | content: "\e604"; 40 | } 41 | .icon-volume-medium:before { 42 | content: "\e605"; 43 | } 44 | .icon-volume-mute:before { 45 | content: "\e606"; 46 | } 47 | .icon-loop:before { 48 | content: "\e607"; 49 | } 50 | .icon-loop2:before { 51 | content: "\e608"; 52 | } 53 | .icon-shuffle:before { 54 | content: "\e609"; 55 | } 56 | .icon-vynil:before { 57 | content: "\e60a"; 58 | } 59 | .indexBg { 60 | position: absolute; 61 | top: 0; 62 | width: 100%; 63 | height: 100%; 64 | text-align: center; 65 | z-index: 99; 66 | } 67 | .indexBg .indexMe { 68 | margin: 30% auto 0; 69 | padding: 10px 0; 70 | } 71 | .indexBg .indexMe img { 72 | display: block; 73 | width: 100px; 74 | margin: 0 auto; 75 | border-radius: 50%; 76 | border: 2px solid #fff; 77 | } 78 | .indexBg .indexMe .indexName { 79 | display: block; 80 | margin-top: 10px; 81 | } 82 | .indexBg p { 83 | font-size: 18px; 84 | color: #fff; 85 | } 86 | .indexBg .indexBtn { 87 | position: absolute; 88 | bottom: 0; 89 | width: 100%; 90 | margin-bottom: 0; 91 | background: rgba(0, 0, 0, 0.3); 92 | } 93 | .indexBg .indexBtn i { 94 | margin-right: 10px; 95 | vertical-align: middle; 96 | } 97 | .indexBg .indexBtn a { 98 | display: inline-block; 99 | padding: 15px 0; 100 | text-decoration: none; 101 | color: #fff; 102 | vertical-align: middle; 103 | } 104 | .dim { 105 | display: block; 106 | position: absolute; 107 | top: 0; 108 | width: 100%; 109 | height: 100%; 110 | -webkit-filter: blur(6px); 111 | filter: blur(6px); 112 | z-index: 9; 113 | overflow: hidden; 114 | } 115 | .music { 116 | width: 100%; 117 | height: 100%; 118 | overflow: hidden; 119 | } 120 | .musicContent { 121 | overflow: hidden; 122 | } 123 | .musicContent .musicHeader { 124 | margin: 10px 10px 0 10px; 125 | padding: 10px 0; 126 | text-align: center; 127 | overflow: hidden; 128 | } 129 | .musicContent .musicList { 130 | width: 233px; 131 | height: 200px; 132 | margin: -38px auto 0px; 133 | text-align: center; 134 | padding-top: 40px; 135 | background: gradient(linear, 0 0, 0 100%, from(#f2a489), to(#f68379)); 136 | background: -webkit-gradient(linear, 0 0, 0 100%, from(#f2a489), to(#f68379)); 137 | border-radius: 50%; 138 | border: 5px solid rgba(0, 0, 0, 0.9); 139 | } 140 | .musicContent .iconMusic { 141 | display: inline-block; 142 | width: 60px; 143 | height: 60px; 144 | margin: 4%; 145 | line-height: 60px; 146 | font-size: 31px; 147 | text-align: center; 148 | border: 5px solid rgba(0, 0, 0, 0.9); 149 | border-radius: 50%; 150 | background: gradient(linear, 0 0, 0 100%, from(#f2a489), to(#f68379)); 151 | background: -webkit-gradient(linear, 0 0, 0 100%, from(#f2a489), to(#f68379)); 152 | } 153 | .musicContent .icon-pause { 154 | width: 70px; 155 | height: 70px; 156 | background: url(http://7xkinp.com1.z0.glb.clouddn.com/music.png) 0 0 no-repeat; 157 | background-size: 100%; 158 | } 159 | .musicContent .rotate { 160 | -moz-animation: spin 8s infinite linear; 161 | -o-animation: spin 8s infinite linear; 162 | -webkit-animation: spin 8s infinite linear; 163 | animation: spin 8s infinite linear; 164 | } 165 | .footer { 166 | width: 100%; 167 | margin-top: 30px; 168 | font-size: 16px; 169 | text-align: center; 170 | } 171 | @-moz-keyframes spin { 172 | 0% { 173 | -moz-transform: rotate(0deg); 174 | } 175 | 100% { 176 | -moz-transform: rotate(360deg); 177 | } 178 | } 179 | @-webkit-keyframes spin { 180 | 0% { 181 | -webkit-transform: rotate(0deg); 182 | } 183 | 100% { 184 | -webkit-transform: rotate(360deg); 185 | } 186 | } 187 | @-o-keyframes spin { 188 | 0% { 189 | -o-transform: rotate(0deg); 190 | } 191 | 100% { 192 | -o-transform: rotate(360deg); 193 | } 194 | } 195 | @-ms-keyframes spin { 196 | 0% { 197 | -ms-transform: rotate(0deg); 198 | } 199 | 100% { 200 | -ms-transform: rotate(360deg); 201 | } 202 | } 203 | @keyframes spin { 204 | 0% { 205 | transform: rotate(0deg); 206 | } 207 | 100% { 208 | transform: rotate(360deg); 209 | } 210 | } 211 | -------------------------------------------------------------------------------- /react-player/app/data.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 音乐数据 3 | * 模拟服务器 4 | */ 5 | 6 | var data = [ 7 | { 8 | "id": 0, 9 | "song" : "Mockingbird", 10 | "album" : "《Mockingbird Ep》", 11 | "songUrl" : "http://7xkinp.com1.z0.glb.clouddn.com/Mockingbird.mp3" 12 | }, 13 | { 14 | "id": 1, 15 | "song" : "Read All About It", 16 | "album" : "《Our Version of Events (Special Edition)》", 17 | "songUrl" : "http://7xkinp.com1.z0.glb.clouddn.com/Read%20All%20About%20It,%20Pt.%20III.mp3" 18 | }, 19 | { 20 | "id": 2, 21 | "song" : "Heaven Please", 22 | "album" : "《My Beautiful Sinking Ship》", 23 | "songUrl" : "http://7xkinp.com1.z0.glb.clouddn.com/Heaven%20Please.mp3" 24 | } 25 | ]; 26 | 27 | module.exports = data; -------------------------------------------------------------------------------- /react-player/app/fonts/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ellyliang/JQM-me/894f19ff1e59dd23da1e4883c84f34670d452515/react-player/app/fonts/icomoon.eot -------------------------------------------------------------------------------- /react-player/app/fonts/icomoon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /react-player/app/fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ellyliang/JQM-me/894f19ff1e59dd23da1e4883c84f34670d452515/react-player/app/fonts/icomoon.ttf -------------------------------------------------------------------------------- /react-player/app/fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ellyliang/JQM-me/894f19ff1e59dd23da1e4883c84f34670d452515/react-player/app/fonts/icomoon.woff -------------------------------------------------------------------------------- /react-player/app/images/1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ellyliang/JQM-me/894f19ff1e59dd23da1e4883c84f34670d452515/react-player/app/images/1.jpeg -------------------------------------------------------------------------------- /react-player/app/images/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ellyliang/JQM-me/894f19ff1e59dd23da1e4883c84f34670d452515/react-player/app/images/bg.jpg -------------------------------------------------------------------------------- /react-player/app/images/music.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ellyliang/JQM-me/894f19ff1e59dd23da1e4883c84f34670d452515/react-player/app/images/music.png -------------------------------------------------------------------------------- /react-player/app/less/index.less: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Microsoft Yahei','Helvetica Neue',sans-serif,SimHei; 3 | overflow: hidden; 4 | background: #3b3837; 5 | cursor: pointer; 6 | -webkit-tap-highlight-color: rgba(255, 0, 0, 0); /*解决背景闪的bug*/ 7 | } 8 | 9 | //Mixin 10 | .size(@width, @height) { 11 | width: @width; 12 | height: @height; 13 | } 14 | 15 | //icon 16 | @font-face { 17 | font-family: 'icomoon'; 18 | src:url('../fonts/icomoon.eot?-32qlpk'); 19 | src:url('../fonts/icomoon.eot?#iefix-32qlpk') format('embedded-opentype'), 20 | url('../fonts/icomoon.woff?-32qlpk') format('woff'), 21 | url('../fonts/icomoon.ttf?-32qlpk') format('truetype'), 22 | url('../fonts/icomoon.svg?-32qlpk#icomoon') format('svg'); 23 | font-weight: normal; 24 | font-style: normal; 25 | } 26 | 27 | [class^="icon-"], [class*=" icon-"] { 28 | font-family: 'icomoon'; 29 | speak: none; 30 | font-style: normal; 31 | font-weight: normal; 32 | font-variant: normal; 33 | text-transform: none; 34 | line-height: 1; 35 | 36 | /* Better Font Rendering =========== */ 37 | -webkit-font-smoothing: antialiased; 38 | -moz-osx-font-smoothing: grayscale; 39 | } 40 | 41 | .icon-music:before { 42 | content: "\e600"; 43 | } 44 | .icon-play:before { 45 | content: "\e601"; 46 | } 47 | .icon-backward:before { 48 | content: "\e603"; 49 | } 50 | .icon-forward:before { 51 | content: "\e604"; 52 | } 53 | .icon-volume-medium:before { 54 | content: "\e605"; 55 | } 56 | .icon-volume-mute:before { 57 | content: "\e606"; 58 | } 59 | .icon-loop:before { 60 | content: "\e607"; 61 | } 62 | .icon-loop2:before { 63 | content: "\e608"; 64 | } 65 | .icon-shuffle:before { 66 | content: "\e609"; 67 | } 68 | .icon-vynil:before { 69 | content: "\e60a"; 70 | } 71 | 72 | //index 73 | .indexBg { 74 | position: absolute; 75 | top: 0; 76 | .size(100%, 100%); 77 | text-align: center; 78 | z-index: 99; 79 | 80 | .indexMe { 81 | margin: 30% auto 0; 82 | padding: 10px 0; 83 | 84 | img { 85 | display: block; 86 | width: 100px; 87 | margin: 0 auto; 88 | border-radius: 50%; 89 | border: 2px solid #fff; 90 | } 91 | 92 | .indexName { 93 | display: block; 94 | margin-top: 10px; 95 | } 96 | } 97 | 98 | p { 99 | font-size: 18px; 100 | color: #fff; 101 | } 102 | 103 | .indexBtn { 104 | position: absolute; 105 | bottom: 0; 106 | width: 100%; 107 | margin-bottom: 0; 108 | background: rgba(0, 0, 0, 0.3); 109 | 110 | i { 111 | margin-right: 10px; 112 | vertical-align: middle; 113 | } 114 | 115 | a { 116 | display: inline-block; 117 | padding: 15px 0; 118 | text-decoration: none; 119 | color: #fff; 120 | vertical-align: middle; 121 | } 122 | } 123 | } 124 | //背景模糊效果 125 | .dim { 126 | display: block; 127 | position: absolute; 128 | top: 0; 129 | .size(100%, 100%); 130 | -webkit-filter: blur(6px); 131 | filter: blur(6px); 132 | z-index: 9; 133 | overflow: hidden; 134 | } 135 | 136 | //music 137 | .music { 138 | .size(100%, 100%); 139 | overflow: hidden; 140 | } 141 | 142 | .musicContent { 143 | overflow: hidden; 144 | .musicHeader { 145 | margin: 10px 10px 0 10px; 146 | padding: 10px 0; 147 | text-align: center; 148 | overflow: hidden; 149 | } 150 | 151 | .musicList { 152 | .size(233px, 200px); 153 | margin: -38px auto 0px; 154 | text-align: center; 155 | padding-top: 40px; 156 | background: gradient(linear, 0 0, 0 100%, from(#f2a489), to(#f68379)); 157 | background: -webkit-gradient(linear, 0 0, 0 100%, from(#f2a489), to(#f68379)); 158 | border-radius: 50%; 159 | border: 5px solid rgba(0, 0, 0, .9); 160 | } 161 | 162 | .iconMusic { 163 | display: inline-block; 164 | .size(60px, 60px); 165 | margin: 4%; 166 | line-height: 60px; 167 | font-size: 31px; 168 | text-align: center; 169 | border: 5px solid rgba(0, 0, 0, .9); 170 | border-radius: 50%; 171 | background: gradient(linear, 0 0, 0 100%, from(#f2a489), to(#f68379)); 172 | background: -webkit-gradient(linear, 0 0, 0 100%, from(#f2a489), to(#f68379)); 173 | } 174 | 175 | .icon-pause { 176 | width: 70px; 177 | height: 70px; 178 | background: url(http://7xkinp.com1.z0.glb.clouddn.com/music.png) 0 0 no-repeat; 179 | background-size: 100%; 180 | } 181 | 182 | .rotate { 183 | -moz-animation: spin 8s infinite linear; 184 | -o-animation: spin 8s infinite linear; 185 | -webkit-animation: spin 8s infinite linear; 186 | animation: spin 8s infinite linear; 187 | } 188 | } 189 | 190 | .footer { 191 | width: 100%; 192 | margin-top: 30px; 193 | font-size: 16px; 194 | text-align: center; 195 | } 196 | 197 | @-moz-keyframes spin { 198 | 0% { -moz-transform: rotate(0deg); } 199 | 100% { -moz-transform: rotate(360deg); } 200 | } 201 | @-webkit-keyframes spin { 202 | 0% { -webkit-transform: rotate(0deg); } 203 | 100% { -webkit-transform: rotate(360deg); } 204 | } 205 | @-o-keyframes spin { 206 | 0% { -o-transform: rotate(0deg); } 207 | 100% { -o-transform: rotate(360deg); } 208 | } 209 | @-ms-keyframes spin { 210 | 0% { -ms-transform: rotate(0deg); } 211 | 100% { -ms-transform: rotate(360deg); } 212 | } 213 | @keyframes spin { 214 | 0% { transform: rotate(0deg); } 215 | 100% { transform: rotate(360deg); } 216 | } -------------------------------------------------------------------------------- /react-player/app/main.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | var Router = require('./Router'); 3 | var Music = require('./music'); 4 | var Data = require('./data'); 5 | 6 | /** 7 | * 首页 8 | */ 9 | var Index = React.createClass({ 10 | render : function() { 11 | return ( 12 |
      13 | 14 |
      15 |

      16 | 个人头像 17 | 柚子音乐播放器 18 |

      19 |

      Come on >>

      20 |
      21 |
      22 | ); 23 | } 24 | }); 25 | 26 | var ImgBg = React.createClass({ 27 | render : function() { 28 | return ( 29 | 30 | ); 31 | } 32 | }); 33 | 34 | //首页 35 | Router.addRoute('index', function() { 36 | React.render(, document.body); 37 | }); 38 | //音乐播放器 39 | Router.addRoute('music', function() { 40 | React.render(, document.body); 41 | }); 42 | 43 | Router.start(); -------------------------------------------------------------------------------- /react-player/app/music.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | 3 | /** 4 | * 音乐播放器 5 | */ 6 | var Music = React.createClass({ 7 | getInitialState : function() { 8 | return { 9 | index : 0, 10 | surplusTime : '0:00' 11 | }; 12 | }, 13 | handleParentCount : function(count, time) { //回调，为了获取子元素中的变量（chidren -> parent -> children）-> ( -> -> ) 14 | this.setState({index : count}); 15 | if(time) { 16 | var timeSecond = time.split(':')[1]; 17 | if(+timeSecond > 0) { 18 | this.setState({surplusTime : time}); 19 | } 20 | } 21 | }, 22 | render : function() { 23 | return ( 24 |
      25 |
      26 | 27 | 28 |
      29 |
      30 |
      31 | ); 32 | } 33 | }); 34 | 35 | var Audio = React.createClass({ 36 | render : function() { 37 | return ( 38 |