├── 404.html ├── CNAME ├── LICENSE ├── README.md ├── audio ├── 404.mp3 ├── AlbumArtSmall.jpg ├── Folder.jpg └── lrc │ ├── Alstroemeria_Records-Bad_Apple!!.lrc │ ├── eyii.lrc │ ├── happy.lrc │ ├── music2.lrc │ ├── music3.lrc │ └── zuihoudeluxin.lrc ├── css ├── about.css ├── delete.css ├── mp │ ├── mplayer.css │ ├── mplayer.css.map │ └── mplayer.less └── process.css ├── desktop.ini ├── favicon.ico ├── images ├── 404.jpg ├── Erii.png ├── bad_apple.svg ├── error.jpg ├── icon │ ├── arrowhead.png │ ├── arrowleft.png │ ├── arrowright.png │ ├── bilibili.png │ ├── blog.png │ ├── dingding.png │ ├── email.png │ ├── facebook.png │ ├── file.png │ ├── github.png │ ├── github_white.png │ ├── google.png │ ├── pan.png │ ├── qie.png │ ├── qq.png │ └── twitter.png ├── mp │ ├── mplayer_bg.png │ └── mplayer_error.png ├── null.jpg └── pic │ ├── ex.jpg │ ├── head.jpg │ ├── pic_1.jpg │ ├── pic_2.jpg │ ├── pic_3.jpg │ └── pic_4.jpg ├── index.html ├── js ├── about.js ├── jquery-3.0.0.js ├── mp │ ├── jquery.nstSlider.js │ ├── jquery.nstSlider.min.js │ ├── mplayer-list.js │ ├── mplayer-main.js │ └── mplayer.js ├── project.js └── zzbaidu.js └── null ├── css └── style.css ├── images ├── clouds.png ├── ground-bottom.png ├── ground.png ├── hole.png ├── load.gif ├── mountain.png ├── rocks.png ├── sky-bg.jpg ├── sweat.png ├── texty-sign.png ├── worker.png └── working-sign.png ├── index.html └── js ├── css_browser_selector.js ├── jquery-1.8.3.min.js ├── jquery-animate-css-rotate-scale.js ├── jquery.spritely-0.6.1.js ├── plax.js ├── preloader.js └── script.js /404.html: -------------------------------------------------------------------------------- 1 | 2 | 你要找的页面不存在啊 3 |

4 |

5 |
6 | 找不到这个页面啊！是不是天然呆打错啦!

7 | 8 |

11 | 12 | 19 | -------------------------------------------------------------------------------- /CNAME: -------------------------------------------------------------------------------- 1 | about.whiteg.cn -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # New 2 | Hello World 3 | http://about.whiteg.cn -------------------------------------------------------------------------------- /audio/404.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moewhite19/about/95c90aa695190db71ffd4c40712540cb63691e56/audio/404.mp3 -------------------------------------------------------------------------------- /audio/AlbumArtSmall.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moewhite19/about/95c90aa695190db71ffd4c40712540cb63691e56/audio/AlbumArtSmall.jpg -------------------------------------------------------------------------------- /audio/Folder.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moewhite19/about/95c90aa695190db71ffd4c40712540cb63691e56/audio/Folder.jpg -------------------------------------------------------------------------------- /audio/lrc/Alstroemeria_Records-Bad_Apple!!.lrc: -------------------------------------------------------------------------------- 1 | [00:00.00]Alstroemeria Records - EXSERENS (例大祭5) 2 | [00:14.00]Bad Apple!! 3 | [00:17.00]Vocal nomico 4 | [00:28.00]还没找到pv版歌词 5 | [00:35.00]所以拿的完整版mp3的歌词 6 | [00:45.00]Powered By chyxion 7 | [00:50.00]【东方】BAD APPLE 3D 影绘版 PV 8 | [00:53.00]Bad Apple!! 9 | [00:54.00] 10 | [00:56.22]流れてく/流逝着的 11 | [00:57.68]时の中ででも/时空之中 12 | [00:59.89]気だるさが/令人疲倦地 13 | [01:01.16]ほらグルグル廻って/这样呼噜呼噜转个不停 14 | [01:03.33]私から/我的那颗 15 | [01:04.62]离れる心も/失去的心 16 | [01:06.75]见えないわ/看不见的话 17 | [01:08.10]そう知らない？/这样也能知道吗？ 18 | [01:09.94] 19 | [01:10.30]自分から/就算自己 20 | [01:11.61]动くこともなく/什么也不做 21 | [01:13.75]时の隙间に/时间的缝隙里 22 | [01:15.05]流され続けて/流逝仍在继续 23 | [01:17.18]知らないわ/什么也不知道 24 | [01:18.55]周りの事など/周围的一切 25 | [01:20.72]私は私/我就是我 26 | [01:22.08]それだけ/仅此而已 27 | [01:24.08] 28 | [01:24.26]梦见てる？/梦见了吗， 29 | [01:25.60]何も见てない？/什么也没看见吗？ 30 | [01:27.29]语るも无駄な/说什么也无用了的 31 | [01:29.01]自分の言叶？/自己的话语 32 | [01:30.72]悲しむなんて/“悲伤”什么的 33 | [01:32.42]疲れるだけよ/只是徒增疲累 34 | [01:34.19]何も感じず/装作什么也感受不到 35 | [01:35.97]过ごせばいいの/就这样虚度算了 36 | [01:37.66] 37 | [01:38.06]戸惑う言叶/困惑的话语 38 | [01:39.81]与えられても/即使被给予 39 | [01:41.51]自分の心/自己的心 40 | [01:43.29]ただ上の空/停留在半空 41 | [01:45.00]もし私から/如果我这样 42 | [01:46.73]动くのならば/试着去做的话 43 | [01:48.51]すべて変えるのなら/如果全部改变的话 44 | [01:50.28]黒にする/都将化作黑暗 45 | [01:51.71] 46 | [01:52.39]こんな自分に/这样的我， 47 | [01:53.74]未来はあるの？/能有未来吗？ 48 | [01:55.48]こんな世界に/这样的世界， 49 | [01:57.21]私はいるの？/有我存在吗？ 50 | [01:58.93]今切ないの？/现在难受吗？ 51 | [02:00.63]今悲しいの？/现在悲伤吗？ 52 | [02:02.44]自分の事も/连自己的事情也 53 | [02:04.16]わからないのまま/什么都不明白了。 54 | [02:05.73] 55 | [02:05.98]歩むことさえ/“前行”这种事 56 | [02:07.62]疲れるだけよ/只是徒增疲累 57 | [02:09.38]人のことなど/与他人相关的事 58 | [02:11.09]知りもしないわ/装作一无所知好了 59 | [02:12.80]こんな私も/这样的我也 60 | [02:14.56]変われるのなら/能够改变的话 61 | [02:16.33]もし変われるのなら/如果真的改变的话， 62 | [02:18.06]白になる？/是否能变得洁白无暇？ 63 | [02:22.01] 64 | [02:40.27] 65 | [02:48.14]流れてく/流逝着的 66 | [02:49.38]时の中ででも/时空之中 67 | [02:51.53]気だるさがほら/令人疲惫地 68 | [02:52.88]グルグル廻って/这样呼噜呼噜原地打转 69 | [02:55.04]私から/我的那颗 70 | [02:56.29]离れる心も/失去的心 71 | [02:58.46]见えないわそう/看不见的话 72 | [02:59.79]知らない？/也能知道吗？ 73 | [03:01.79] 74 | [03:02.17]自分から/就算自己 75 | [03:03.45]动くこともなく/什么也不做 76 | [03:05.66]时の隙间に/时间的缝隙里 77 | [03:06.96]流され続けて/流逝仍在继续 78 | [03:09.09]知らないわ/什么也不知道 79 | [03:10.42]周りのことなく/周围的一切 80 | [03:12.56]私は私/我就是我 81 | [03:13.90]それだけ？/仅此而已 82 | [03:15.94] 83 | [03:16.13]梦见てる？/梦见了吗， 84 | [03:17.39]何も见てない？/什么也没梦见吗？ 85 | [03:19.13]语るも无駄な/说什么也无用了的 86 | [03:20.83]自分の言叶？/自己的话语 87 | [03:22.53]悲しむなんて/“悲伤”什么的 88 | [03:24.30]疲れるだけよ/只是徒增疲累 89 | [03:26.05]何も感じず/装作什么也感受不到 90 | [03:27.81]过ごせばいいの/就这样虚度算了 91 | [03:29.86] 92 | [03:30.18]戸惑う言叶/困惑的话语 93 | [03:31.54]与えられても/即使被给予 94 | [03:33.32]自分の心/自己的心 95 | [03:35.05]ただ上の空/停留在半空 96 | [03:36.77]もし私から/如果我这样 97 | [03:38.44]动くのならば/试着去做的话 98 | [03:40.29]すべて変えるのなら/如果全部改变的话 99 | [03:42.00]黒にする/都将化作黑暗 100 | [03:43.40]无駄な时间に/在蹉跎的时间中 101 | [03:43.45] 102 | [03:44.61]未来はあるの？/未来真的存在吗？ 103 | [03:46.38]こんな所に/在这样的地方中 104 | [03:48.09]私はいるの？/我真的存在吗？ 105 | [03:49.81]私のことを/关于我自己 106 | [03:51.57]言えたいならば/如果要说的话 107 | [03:53.30]言叶にするの/用言语表达 108 | [03:55.08]なら「ろくでなし/」就是“无用之物” 109 | [03:56.54] 110 | [03:57.09]こんな所に/在这样的地方中 111 | [03:58.51]私はいるの？/我真的存在吗？ 112 | [04:00.27]こんな时间に/在这样的时间中， 113 | [04:02.00]私はいるの？/有我存在吗？ 114 | [04:03.73]こんな私も/这样的我也 115 | [04:05.48]変われるのなら/能够改变的话 116 | [04:07.22]もし変われるのなら/如果真的改变的话， 117 | [04:08.95]白になる？/是否能变得洁白无暇？ 118 | [04:10.56] 119 | [04:10.84]今梦见てる？/现在梦见了吗， 120 | [04:12.39]なにも见てない？/什么也没看见吗？ 121 | [04:14.15]语るも无駄な/说什么也无用了的 122 | [04:15.94]自分の言叶？/自己的话语 123 | [04:17.68]悲しむなんて/“悲伤”什么的 124 | [04:19.44]疲れるだけよ/只是徒增疲累 125 | [04:21.13]何も感じず/装作什么也感受不到 126 | [04:22.85]过ごせばいいのど/就这样虚度算了 127 | [04:24.55] 128 | [04:24.86]戸惑う言叶/困惑的话语 129 | [04:26.39]与えられても/即使被给予 130 | [04:28.10]自分の心/自己的心 131 | [04:29.80]ただ上の空/停留在半空 132 | [04:31.57]もし私から/如果我这样 133 | [04:33.30]动くのならば/试着去做的话 134 | [04:35.06]すべて変えるのなら/如果全部改变的话 135 | [04:36.84]黒にする/都将化作黑暗 136 | [04:38.16] 137 | [04:38.58]动くのならば/试着去做的话 138 | [04:40.28]动くのならば/试着去做的话 139 | [04:42.01]すべて壊すわ/一切都将崩坏 140 | [04:43.75]すべて壊すわ/一切都将崩坏 141 | [04:45.48]悲しむならば/如果能够悲伤的话 142 | [04:47.27]悲しむならば/如果能够悲伤的话 143 | [04:48.97]私の心/我的心 144 | [04:50.68]白く変われる？/是否能变回洁白无暇？ 145 | [04:52.33] 146 | [04:52.52]贵方の事も/不管是你的事 147 | [04:54.17]私のことも/我的事 148 | [04:55.91]すべての事も/所有的事 149 | [04:57.63]まだ知らないの/全都不清楚了 150 | [04:59.39]重い目盖を/沉重的眼皮 151 | [05:01.17]开けたのならば/如果打开的话 152 | [05:02.95]すべて壊すのなら/既然全都崩坏的话 153 | [05:04.63]黒になれ！！！/干脆化作黑暗吧! 154 | [05:06.01] 155 | [05:10.00] 156 | [05:10.29]Alstroemeria Records - EXSERENS (例大祭5) 157 | [05:12.85]Bad Apple!! 158 | [05:13.56]- END - 159 | -------------------------------------------------------------------------------- /audio/lrc/eyii.lrc: -------------------------------------------------------------------------------- 1 | [00:00.00] 作曲 : 泽野弘之《blue dragon》 2 | [00:00.00] 作词 : 琢彻 3 | [00:17.00]倾天寒光月读镇涛浪 4 | [00:26.00]掬捧月光我独自向前 5 | [00:33.00]火光闪烁映出修罗 6 | [00:41.00]拉着你的手我不退后 7 | [00:52.00]你牵着我路途多远我都不寂寞 8 | [01:00.00]棉花糖攥在手里留给你一颗 9 | [01:08.00]你告诉我万水千山都会共我走过 10 | [01:17.00]我会听话在原地等到你来接我 11 | [02:05.00]穿过铁轨登上那草木葳蕤的山坡 12 | [02:13.00]听你讲故事里你喜欢的段落 13 | [02:22.00]万家灯火倒映在你眼眸像星辰坠落 14 | [02:30.00]我看着你任车窗将你我温度相隔 15 | [02:38.00]若能再见我会再次将你手紧握 16 | [02:47.00]在海棠树下为你唱支歌 17 | [02:55.00]不能再见幸好我在你心里停留过 18 | [03:04.00]来年暮春请代我看一次樱花飘落 -------------------------------------------------------------------------------- /audio/lrc/happy.lrc: -------------------------------------------------------------------------------- 1 | [by:左千雪] 2 | [ti:] 3 | [ar:] 4 | [al:] 5 | [by:九九Lrc歌词网～www.99Lrc.net] 6 | [00:01.27]1　2　Party time! 7 | [00:08.35]1　2　Party time! 8 | [00:08.86] dance X 16 9 | [00:15.44]I'm so Happy that I've found you... 10 | [00:21.20]I'm so Happy that I've found you... 11 | [00:25.91]I'm so Happy that I've found you... 12 | [00:31.32]I'm so Happy that I've found you... 13 | [00:37.34]Clap Your Hands! 14 | [00:48.67]I'm so Happy that I've found you... 15 | [00:53.88]I'm so Happy that I've found you... 16 | [01:10.12]I'm so Happy... -------------------------------------------------------------------------------- /audio/lrc/music2.lrc: -------------------------------------------------------------------------------- 1 | [by:Yuminoki仒Wasabi] 2 | [00:07.97]次は長尾峰へ、長尾峰です 3 | [00:12.26]出口は右側に変わります 4 | [00:35.56]遠く汽笛が鳴り響いている真夜中 5 | [00:39.98]街の灯火がひとつ消えた 6 | [00:42.59]さよなら 7 | [00:44.33]届かない想いはそうきっとなゆた 8 | [00:48.62]けど今星がほらひとつ増えた 9 | [00:51.42]懐かしい歌だけ思い出すんだよ 10 | [00:57.09]あなたのやさしい声 11 | [01:01.50]飛べない僕はチケットを握りしめ 12 | [01:08.95]汽車に乗る 13 | [01:10.25]何億光年離れていても 14 | [01:12.36]手を伸ばす僕はペンギン 15 | [01:14.60]故郷の海にきっと映る 16 | [01:16.85]あなたを想うよ 17 | [01:18.96]何億光年離れていても 18 | [01:21.14]手を伸ばす僕はペンギン 19 | [01:23.32]故郷の海にきっと映る 20 | [01:25.68]あなたを想うよ 21 | [01:35.52]セイブ·ミー 22 | [01:44.23]セイブ·ミー 23 | [01:45.73]ああ~ 24 | [01:48.61]テイク·ミー 25 | [01:49.66]ああ~ 26 | [01:52.85]セイブ·ミー 27 | [01:53.85]ああ~ 28 | [01:57.18]テイク·ミー 29 | [01:58.33]ああ~ 30 | [02:01.53]セイブ·ミー 31 | [02:05.02]こぼれたミルクみたいな川を渡って 32 | [02:09.41]白鳥の停車場を過ぎたら 33 | [02:13.74]夜汽車はサウザンクロス石炭袋を目指して 34 | [02:17.92]胸の霧もきっと晴れるのでしょう 35 | [02:20.90]窓の外流れ星 36 | [02:23.23]まるで思い出みたい 37 | [02:26.56]何気ない日常を 38 | [02:30.85]真っ黒なこのキャンバスに 39 | [02:35.13]散りばめて輝くよ 40 | [02:39.61]何億光年ワープしたら 41 | [02:40.90]あなたに届くの 42 | [02:43.16]ペンギン 43 | [02:44.07]故郷の海の塩辛さも 44 | [02:46.22]忘れてしまうよ 45 | [02:48.36]本当の幸せをいつか 46 | [02:49.95]僕は見つけられるのかなあ 47 | [02:51.95]ペンギン 48 | [02:52.79]他には何も要らないよ 49 | [02:54.98]あなたじゃなきゃイヤだよ 50 | [03:14.49]銀河鉄道は僕を乗せて 51 | [03:18.04]テイク·ミー 52 | [03:18.83]故郷の星を遠く離れて 53 | [03:22.29]セイブ·ミー 54 | [03:23.13]銀河鉄道は僕を乗せて 55 | [03:26.61]テイク·ミー 56 | [03:27.46]夢も絶望もふっと消えて 57 | [03:31.05]セイブ·ミー 58 | [03:32.73]ああ~ 59 | [03:36.13]ああ~ 60 | [03:40.47]ああ~ 61 | [03:44.90]ああ~ 62 | [03:49.20]ああ～ -------------------------------------------------------------------------------- /audio/lrc/music3.lrc: -------------------------------------------------------------------------------- 1 | [00:19.77]收藏夹的照片看了又删 2 | [00:23.56]去年夏天后就没聊过天 3 | [00:27.35]一盏一盏街灯烘焙了夜 4 | [00:31.10]只有手中烟在寂寞地渲染 5 | [00:34.84]人太多大部分是漫无目的的走 6 | [00:38.68]听着歌想念一个人心痛也不说 7 | [00:42.27]悄悄看外边的情侣暧昧牵着手 8 | [00:46.21]你也牵过手是左手牵右手 9 | [00:50.15]叮叮当当 qq响起会是谁呢NaYo 10 | [00:53.34]会是她吗NaYo 11 | [00:55.36]什么事呢Ayo 12 | [00:57.43]假装正经帮她把问题都把问题都摆平NaYo 13 | [01:00.97]不多聊了NaYo 14 | [01:02.95]去吃饭了Ayo 15 | [01:05.67]明明心里很喜欢却保持着距离 16 | [01:09.21]噢怕被伤害就伪装出高冷的表情 17 | [01:13.10]以为这样总有一天她会接近你 18 | [01:16.90]直到有天看见她和别人在一起 19 | [01:21.29]一盏一盏街灯烘焙了夜 20 | [01:25.08]只有手中烟在寂寞地渲染 21 | [01:28.73]收藏夹的照片看了又删 22 | [01:32.72]去年夏天后就再没聊过天 23 | [01:36.41]人太多大部分是漫无目的的走 24 | [01:40.00]听着歌想念一个人心痛也不说 25 | [01:43.85]悄悄看外边的情侣暧昧牵着手 26 | [01:47.43]你也牵过手是左手牵右手 27 | [01:51.58]叮叮当当 qq响起会是谁呢NaYo 28 | [01:54.86]会是她吗NaYo 29 | [01:56.79]什么事呢Ayo 30 | [01:58.96]假装正经帮她把问题都摆平NaYo 31 | [02:02.76]不多聊了NaYo 32 | [02:04.74]去吃饭了Ayo 33 | [02:07.05]明明心里很喜欢却保持着距离 34 | [02:10.65]噢怕被伤害就伪装出高冷的表情 35 | [02:14.44]以为这样总有一天她会接近你 36 | [02:18.23]直到有天看见她和别人在一起 37 | [02:22.63]优雅的转身 38 | [02:24.55]熟悉的音乐 39 | [02:26.32]是我们曾经的那一段 40 | [02:30.57]你已经淡出 41 | [02:32.44]在我时间轴 42 | [02:34.22]只留下那天的回忆单曲循环 43 | [02:37.44]叮叮当当 qq响起会是谁呢NaYo 44 | [02:41.04]会是她吗NaYo 45 | [02:42.96]什么事呢Ayo 46 | [02:45.13]假装正经帮她把问题都摆平NaYo 47 | [02:48.86]不多聊了NaYo 48 | [02:50.73]去吃饭了Ayo 49 | [02:53.01]明明心里很喜欢却保持着距离 50 | [02:56.55]噢怕被伤害就伪装出高冷的表情 51 | [03:00.44]以为这样总有一天她会接近你 52 | [03:04.33]直到有天看见她和别人在一起 53 | [03:08.18]叮叮当当 qq响起会是谁呢NaYo 54 | [03:11.61]会是她吗NaYo 55 | [03:13.64]什么事呢Ayo 56 | [03:15.82]假装正经帮她把问题都摆平NaYo 57 | [03:19.30]不多聊了NaYo 58 | [03:21.12]去吃饭了Ayo 59 | [03:23.69]明明心里很喜欢却保持着距离 60 | [03:27.23]噢怕被伤害就伪装出高冷的表情 61 | [03:31.32]以为这样总有一天她会接近你 62 | [03:35.12]直到有天看见她和别人在一起 63 | [03:39.01]叮叮当当 qq响起会是谁呢NaYo" -------------------------------------------------------------------------------- /audio/lrc/zuihoudeluxin.lrc: -------------------------------------------------------------------------------- 1 | [by:Ruse渲丶染 2 | [00:00.00] 作曲 : 天ノ弱「Piano Arrange」 3 | [00:00.33] 作词 : 陌离 4 | [00:01.00]选曲：天ノ弱「Piano Arrange」 5 | [00:01.50]填词：陌离【浮声未歇】 6 | [00:02.00]演唱/后期：Rainton桐 7 | [00:02.50]念白：夏螟虫虫【声赋网音】 8 | [00:03.00]海报：纷纷【木语】 9 | [00:04.00]「“04.24，和sakura去东京天空树， 10 | [00:07.96]世界上最暖和的地方在天空树的顶上。” 11 | [00:12.51]“04.26，和sakura 去明治神宫， 12 | [00:15.85]有人在那里举办婚礼。” 13 | [00:20.80]“04.25，和sakura 去迪士尼， 14 | [00:24.45]鬼屋很可怕，但是有sakura 在，所以不可怕。” 15 | [00:29.81]“sakura最好了。”」 16 | [00:33.10]沿着电车隧道一直向前 17 | [00:36.41]踏着枕木间的落叶来到山巅 18 | [00:39.81]认真地遵守与你的诺言 19 | [00:43.36]三个数之后才轻轻睁开双眼 20 | [00:46.86]暮色如海潮般涌入视线 21 | [00:50.25]染红了枫林一直蔓延到天边 22 | [00:53.81]山下的摩天轮还在回旋 23 | [00:57.36]一圈又一圈似乎永远都不会疲倦 24 | [01:04.41] 25 | [01:14.91]落日一点一点触及海面 26 | [01:18.26]和倒影一起组成了完整的圆 27 | [01:21.97]余晖笼罩小镇静谧安恬 28 | [01:25.44]夜幕降临前还可以再看一眼 29 | [01:28.71]静静坐在矿井的屋檐下 30 | [01:32.18]本子上写满千奇百怪的问答 31 | [01:35.86]突然明白原来世界很大 32 | [01:39.21]只是可惜我已没有时间探察 33 | [01:42.76]遇见了你仿佛命定轨迹 34 | [01:47.64]每一天都是美好的回忆珍藏在心底 35 | [01:53.91]命运十字路口谢谢你曾挽留 36 | [02:00.52]站在时间尽头再回首世界如此温柔 37 | [02:07.50]哪怕明天过后终究逃不开这诅咒 38 | [02:14.24]我已觉得足够 39 | [02:21.60]东京天空树被闪电点燃 40 | [02:25.16]拔地而起插入漆黑的云端 41 | [02:28.84]推开窗看雨夜焰火绚烂 42 | [02:32.26]映入眼瞳的城市如星海一般 43 | [02:35.87]把所有玩具都换了标签 44 | [02:39.21]是不是就可以将你留在身边 45 | [02:42.63]再长的旅途也会有终点 46 | [02:45.77]隔着车窗听你说那一声再见 47 | [02:49.74]多么希望行程没有归期 48 | [02:56.50]一起逃亡在温暖阳光里 49 | [03:03.61]守着两只小怪兽的秘密 50 | [03:07.00]紧紧拥抱似乎永不会分离 51 | [03:10.56]每当看见你就好像另一个自己 52 | [03:17.30]命运十字路口谢谢你曾停留 53 | [03:24.00]站在时间尽头再回首世界如此温柔 54 | [03:30.91]哪怕明天过后再看不到新的白昼 55 | [03:37.67]我已觉得足够 56 | [03:44.83]命运十字路口谢谢你曾停留 57 | [03:52.10]站在时间尽头再回首世界如此温柔 58 | [03:58.78]纵然雨狂风骤也不害怕无路可走 59 | [04:05.81]我们的名字手牵手 -------------------------------------------------------------------------------- /css/about.css: -------------------------------------------------------------------------------- 1 | /* reset */ 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | list-style-type: none; 7 | font-family: 'Microsoft Yahei', '宋体', arial, 'Hiragino Sans GB', Helvetica, serif; 8 | } 9 | 10 | #debugtex { 11 | font-size: 14px; 12 | color: #fafa00; 13 | } 14 | 15 | .img_max_size { 16 | max-width: 100%; 17 | max-height: 100%; 18 | } 19 | 20 | #mydebug { 21 | font-size: 17px; 22 | } 23 | 24 | label { 25 | cursor: pointer; 26 | } 27 | 28 | img { 29 | vertical-align: middle; 30 | } 31 | 32 | table { 33 | empty-cells: show; 34 | border-collapse: collapse; 35 | border-spacing: 0; 36 | } 37 | 38 | abbr, 39 | acronym { 40 | border: 0; 41 | font-variant: normal; 42 | } 43 | 44 | address, 45 | caption, 46 | cite, 47 | code, 48 | dfn, 49 | em, 50 | th, 51 | var, 52 | optgroup { 53 | font-style: normal; 54 | font-weight: normal; 55 | } 56 | 57 | input, 58 | button, 59 | textarea, 60 | select, 61 | optgroup, 62 | option { 63 | font-family: inherit; 64 | font-size: inherit; 65 | font-style: inherit; 66 | font-weight: inherit; 67 | } 68 | 69 | input, 70 | button, 71 | textarea, 72 | select { 73 | *font-size: 100%; 74 | } 75 | 76 | .clear { 77 | clear: both; 78 | } 79 | 80 | 81 | /*main*/ 82 | 83 | body { 84 | background-color: #ffffff; 85 | width: 100%; 86 | } 87 | 88 | .head { 89 | position: fixed; 90 | top: 0; 91 | left: 0; 92 | z-index: 9; 93 | width: 100%; 94 | background-color: rgba(235, 235, 235, 1); 95 | height: 70px; 96 | filter: alpha(opacity=90); 97 | opacity: 0.9; 98 | } 99 | 100 | .logo_img { 101 | width: 45px; 102 | height: 45px; 103 | border-radius: 50%; 104 | border: 2px solid #ffffff; 105 | margin-bottom: 15px; 106 | } 107 | 108 | .head_logo_div, 109 | .head_nav_div { 110 | width: 50%; 111 | float: left; 112 | } 113 | 114 | .head_logo_div { 115 | line-height: 70px; 116 | text-align: center; 117 | } 118 | 119 | .head_nav_div { 120 | line-height: 70px; 121 | } 122 | 123 | .head_nav { 124 | margin: 0 auto; 125 | } 126 | 127 | .head_nav ul li { 128 | float: left; 129 | margin: 0px 25px; 130 | cursor: pointer; 131 | font-size: 16px; 132 | transition: all cubic-bezier(.08, .82, .17, 1) 0.3s; 133 | } 134 | 135 | .nav_li_on { 136 | color: red; 137 | } 138 | 139 | .head_nav ul li a { 140 | font-size: 16px; 141 | color: #333333; 142 | -webkit-transition: all 0.2s; 143 | -moz-transition: all 0.2s; 144 | -o-transition: all 0.2s; 145 | transform: all 0.2s; 146 | } 147 | 148 | .head_nav ul li a:hover { 149 | color: #4b91c9; 150 | } 151 | 152 | .wrapBox { 153 | top: 0; 154 | position: fixed; 155 | width: 100%; 156 | height: 100%; 157 | transition: all ease 1.5s; 158 | } 159 | 160 | .bg01 { 161 | background: url(../images/pic/pic_1.jpg); 162 | } 163 | 164 | .bg02 { 165 | background: url(../images/pic/pic_2.jpg); 166 | } 167 | 168 | .bg03 { 169 | background: url(../images/pic/pic_3.jpg); 170 | } 171 | 172 | .bg04 { 173 | background: url(../images/pic/pic_4.jpg); 174 | } 175 | 176 | .warpBox_tochMoveing { 177 | transition: all ease 0s; 178 | } 179 | 180 | .box { 181 | background-repeat: no-repeat; 182 | background-position: center center; 183 | background-attachment: fixed; 184 | background-size: cover; 185 | overflow: hidden; 186 | position: relative; 187 | width: 100%; 188 | height: 100%; 189 | /* 190 | -webkit-transition: all 1s; 191 | -moz-transition: all 1s; 192 | -o-transition: all 1s; 193 | */ 194 | } 195 | 196 | .box01_content { 197 | position: absolute; 198 | z-index: 3; 199 | top: 13%; 200 | left: 10%; 201 | width: 80%; 202 | } 203 | 204 | .head_div { 205 | width: 400px; 206 | margin: 0 auto; 207 | height: 400px; 208 | } 209 | 210 | .cycle_item { 211 | width: 400px; 212 | height: 400px; 213 | margin-left: auto; 214 | margin-right: auto; 215 | position: relative; 216 | text-align: center; 217 | } 218 | 219 | .cycle_item_b { 220 | text-align: center; 221 | } 222 | 223 | .cycle_item_b .cycle_a { 224 | width: 55px; 225 | height: 55px; 226 | border-radius: 50%; 227 | } 228 | 229 | .cycle_item_b .cycle_text { 230 | display: none; 231 | } 232 | 233 | .green_cycle_img, 234 | .yellow_cycle_img, 235 | .blue_cycle_img { 236 | position: absolute; 237 | display: block; 238 | } 239 | 240 | .head_img_div { 241 | position: relative; 242 | z-index: 2; 243 | display: inline; 244 | width: 200px; 245 | height: 200px; 246 | margin-top: 7px; 247 | } 248 | 249 | .head_img { 250 | width: 200px; 251 | height: 200px; 252 | border-radius: 50%; 253 | border: 3px solid pink; 254 | margin: 97px; 255 | box-shadow: 0 0 1px #fff, 0 0 1px #fff, 0 0 5px #fff, 0 0 1px #fff; 256 | transition: all cubic-bezier(.17, .84, .44, 1) 1s; 257 | transform: perspective(400px) rotateY(0deg); 258 | position: absolute; 259 | display: flex; 260 | } 261 | 262 | .head_img:active { 263 | width: 195px; 264 | height: 195px; 265 | } 266 | 267 | .green_cycle_img { 268 | animation-name: clockwise; 269 | animation-duration: 1.8s; 270 | animation-timing-function: linear; 271 | animation-iteration-count: infinite; 272 | animation-direction: normal; 273 | margin: 70px; 274 | } 275 | 276 | .yellow_cycle_img { 277 | animation-name: anticlockwise; 278 | animation-duration: 1.3s; 279 | animation-timing-function: linear; 280 | animation-iteration-count: infinite; 281 | animation-direction: normal; 282 | margin: 80px; 283 | } 284 | 285 | .blue_cycle_img { 286 | animation-name: clockwise; 287 | animation-duration: 1s; 288 | animation-timing-function: linear; 289 | animation-iteration-count: infinite; 290 | animation-direction: normal; 291 | margin: 90px; 292 | } 293 | 294 | .cycle_a { 295 | position: absolute; 296 | border-radius: 25px; 297 | width: 120px; 298 | height: 50px; 299 | transition: all 2s cubic-bezier(.09, .21, .65, 1.03); 300 | animation-duration: 1.8s; 301 | animation-timing-function: ease; 302 | animation-iteration-count: 1; 303 | animation-fill-mode: both; 304 | animation-direction: alternate; 305 | margin: 165px 140px; 306 | display: block; 307 | } 308 | 309 | .cycle_a_b { 310 | width: 55px; 311 | height: 55px; 312 | border-radius: 50%; 313 | } 314 | 315 | .cycle_a_b .cycle_icon_1, 316 | .cycle_icon_2, 317 | .cycle_icon_3 { 318 | margin: 4px; 319 | left: inherit !important; 320 | border-radius: 30%; 321 | } 322 | 323 | .cycle_a_b .cycle_text { 324 | display: none; 325 | } 326 | 327 | #item_1 { 328 | background-color: #42c9a3; 329 | animation-name: num1; 330 | transform: rotate(0deg) translateX(200px) rotate(-0deg); 331 | } 332 | 333 | #item_1 .cycle_icon_1 { 334 | background: url('../images/icon/github.png') no-repeat; 335 | border-radius: 25px; 336 | display: block; 337 | width: 50px; 338 | height: 50px; 339 | position: relative; 340 | background-size: cover; 341 | left: 5px; 342 | } 343 | 344 | .cycle_text { 345 | width: 50px; 346 | margin-top: 0; 347 | left: 50px; 348 | text-align: right; 349 | padding: 0 5px; 350 | position: absolute; 351 | top: 0; 352 | } 353 | 354 | .item_name { 355 | font-size: 16px; 356 | line-height: 50px; 357 | text-align: center; 358 | color: #fff; 359 | white-space: nowrap; 360 | } 361 | 362 | #item_2 { 363 | background-color: #eb86e6; 364 | animation-name: num2; 365 | transform: rotate(120deg) translateX(200px) rotate(-120deg); 366 | -webkit-transform: rotate(120deg) translateX(200px) rotate(-120deg); 367 | -moz-transform: rotate(120deg) translateX(200px) rotate(-120deg); 368 | -ms-transform: rotate(120deg) translateX(200px) rotate(-120deg); 369 | -o-transform: rotate(120deg) translateX(200px) rotate(-120deg); 370 | } 371 | 372 | #item_2 .cycle_icon_2 { 373 | background: url('../images/icon/bilibili.png'); 374 | border-radius: 5px; 375 | display: block; 376 | width: 40px; 377 | height: 40px; 378 | position: absolute; 379 | background-size: cover; 380 | -moz-background-size: cover; 381 | left: 5px; 382 | } 383 | 384 | #item_3 { 385 | background-color: #6DB3D9; 386 | animation-name: num3; 387 | transform: rotate(240deg) translateX(200px) rotate(-240deg); 388 | } 389 | 390 | #item_3 .cycle_icon_3 { 391 | background: url('../images/icon/blog.png'); 392 | display: block; 393 | width: 40px; 394 | height: 40px; 395 | position: relative; 396 | background-size: cover; 397 | left: 5px; 398 | top: -5px; 399 | } 400 | 401 | .box01_content h1, 402 | .box01_content h2, 403 | .box01_content p { 404 | color: #ffffff; 405 | font-weight: lighter; 406 | text-align: center; 407 | } 408 | 409 | .box01_content .title { 410 | font-size: 40px; 411 | margin-top: 10px; 412 | text-shadow: -1px -1px 1px #FFE6B4; 413 | } 414 | 415 | .box01_content .title_h2 { 416 | font-size: 30px; 417 | margin-top: 10px; 418 | margin-bottom: 20px; 419 | text-shadow: -1px -1px 1px #FFE6B4; 420 | } 421 | 422 | #box01_text { 423 | width: 100%; 424 | overflow: hidden; 425 | position: relative; 426 | } 427 | 428 | #box01_text p { 429 | font-size: 20px; 430 | font-weight: lighter; 431 | line-height: 38px; 432 | -webkit-transition: all ease 0.3s; 433 | -moz-transition: all ease 0.3s; 434 | -ms-transition: all ease 0.3s; 435 | transition: all ease 0.3s; 436 | filter: alpha(opacity=0); 437 | -moz-opacity: 0; 438 | -khtml-opacity: 0; 439 | /*! opacity: 0; */ 440 | cursor: pointer; 441 | text-shadow: -1px -1px 1px #FFE6B4; 442 | } 443 | 444 | #box01_text p:hover { 445 | font-size: 22px; 446 | } 447 | 448 | .float_btn { 449 | z-index: 9; 450 | display: block; 451 | position: fixed; 452 | right: 40px; 453 | top: 50%; 454 | } 455 | 456 | .float_btn li { 457 | height: 12px; 458 | width: 12px; 459 | border: 1px solid #ffffff; 460 | border-radius: 50%; 461 | margin-bottom: 14px; 462 | background-color: transparent; 463 | transition: all 0.5s ease; 464 | } 465 | 466 | .float_btn li:last-child { 467 | margin-bottom: 0; 468 | } 469 | 470 | .float_btn > .btn_on { 471 | background: #ffffff; 472 | } 473 | 474 | .arrow_div { 475 | z-index: 5; 476 | position: fixed; 477 | bottom: 50px; 478 | text-align: center; 479 | width: 100%; 480 | } 481 | 482 | .box_content { 483 | top: 10%; 484 | width: 90%; 485 | left: 5%; 486 | position: absolute; 487 | z-index: 2; 488 | } 489 | 490 | .box02_content { 491 | width: 80%; 492 | left: 10%; 493 | } 494 | 495 | 496 | #box02_text { 497 | width: 50%; 498 | min-width: 400px; 499 | float: left; 500 | overflow: hidden; 501 | cursor: pointer; 502 | text-shadow: -1px -1px 1px #B9A36C; 503 | } 504 | 505 | #box02_text h1 { 506 | font-size: 25px; 507 | font-weight: lighter; 508 | color: #ffffff; 509 | margin-top: 25px; 510 | text-align: center; 511 | position: relative; 512 | right: -100%; 513 | -webkit-transition: all 0.5s; 514 | -moz-transition: all 0.5s; 515 | -o-transition: all 0.5s; 516 | transform: all 0.5s; 517 | right: -100%; 518 | } 519 | 520 | .overline { 521 | width: 100%; 522 | height: 0; 523 | border-bottom: 1px dashed #ffffff; 524 | right: -100%; 525 | transition: all 0.5s ease; 526 | position: relative; 527 | right: -100%; 528 | } 529 | 530 | #box02_text p { 531 | font-size: 18px; 532 | font-weight: lighter; 533 | color: #ffffff; 534 | line-height: 25px; 535 | text-align: center; 536 | position: relative; 537 | right: -100%; 538 | transition: all 1s; 539 | right: -100%; 540 | } 541 | 542 | #box02_text p:hover { 543 | font-size: 22px; 544 | } 545 | 546 | .box03_content { 547 | right: 10%; 548 | height: 60%; 549 | text-align: right; 550 | overflow: hidden; 551 | } 552 | 553 | 554 | /*时间轴*/ 555 | 556 | .timeUl { 557 | height: 100%; 558 | width: 160%; 559 | position: relative; 560 | left: -160%; 561 | transition: all ease 0.8s; 562 | } 563 | 564 | 565 | /*时间轴线条*/ 566 | 567 | .timeUl::before { 568 | content: ' '; 569 | top: 50%; 570 | position: absolute; 571 | height: 0; 572 | width: 100%; 573 | padding: 0 20px; 574 | border: 1px dashed #ffffff; 575 | display: block; 576 | } 577 | 578 | .timeUl::after { 579 | content: ''; 580 | display: table; 581 | clear: both; 582 | } 583 | 584 | .timeUl li { 585 | width: 25%; 586 | float: left; 587 | height: 100%; 588 | position: relative; 589 | } 590 | 591 | .timeUl li::before { 592 | content: ' '; 593 | top: 50%; 594 | left: 50%; 595 | position: absolute; 596 | height: 0; 597 | width: 12px; 598 | height: 12px; 599 | border: 4px solid #E7A98F; 600 | display: block; 601 | z-index: 35; 602 | background: #ffffff; 603 | border-radius: 50%; 604 | margin-top: -8px; 605 | margin-left: -8px; 606 | } 607 | 608 | .timeUl li div { 609 | height: 45%; 610 | width: 100%; 611 | background-color: #444444; 612 | filter: alpha(opacity=90); 613 | opacity: 0.9; 614 | text-align: center; 615 | color: #ffffff; 616 | box-shadow: 10px 10px 5px #00000080; 617 | } 618 | 619 | .timeUl li:nth-child(2n) div { 620 | position: absolute; 621 | bottom: 10px; 622 | } 623 | 624 | .right_div, 625 | .left_div { 626 | z-index: 5; 627 | position: absolute; 628 | top: 40%; 629 | text-align: center; 630 | left: 65px; 631 | } 632 | 633 | .timeUl li div { 634 | font-weight: normal; 635 | border-radius: 1%; 636 | } 637 | 638 | .left_arrow, 639 | .right_arrow { 640 | margin-top: 52px; 641 | } 642 | 643 | .timeUl li div h1 { 644 | line-height: 40px; 645 | font-size: 28px; 646 | font-weight: lighter; 647 | } 648 | 649 | .timeUl li div p { 650 | line-height: 28px; 651 | font-size: 18px; 652 | font-weight: lighter; 653 | } 654 | 655 | .right_div { 656 | right: 65px; 657 | left: unset; 658 | } 659 | 660 | .box04_content { 661 | left: 3%; 662 | height: 90%; 663 | overflow: hidden; 664 | } 665 | 666 | .box04_title { 667 | font-size: 25px; 668 | font-weight: lighter; 669 | text-align: center; 670 | color: #EEEEEE; 671 | } 672 | 673 | .foot { 674 | width: 100%; 675 | background: #ffffff; 676 | position: relative; 677 | padding-top: 60px; 678 | display: block; 679 | } 680 | 681 | .foot_info_main { 682 | width: 62%; 683 | margin: 0 auto; 684 | padding-bottom: 60px; 685 | border-bottom: 1px solid #eeeeee; 686 | } 687 | 688 | .foot_info_main ul { 689 | width: 100%; 690 | } 691 | 692 | .foot_info_main ul li { 693 | width: 23%; 694 | margin: 0px 0 16px 0; 695 | text-align: center; 696 | border: #ffffff solid 5px; 697 | float: left; 698 | cursor: pointer; 699 | width: 23%; 700 | } 701 | 702 | .foot_info_main ul li:hover { 703 | border-color: #bbb; 704 | } 705 | 706 | .foot_info_main ul li a { 707 | display: block; 708 | width: 100%; 709 | height: 100%; 710 | padding: 10px 0; 711 | font-size: 20px; 712 | color: #FEFEFE; 713 | text-decoration: none; 714 | font-variant: small-caps; 715 | background-position: 16px center; 716 | background-repeat: no-repeat; 717 | background-size: 30px; 718 | } 719 | 720 | .github_items { 721 | background: rgba(0, 0, 0, 0.8) 722 | } 723 | 724 | .github_items a { 725 | background: rgba(0, 0, 0, 0.8) url(../images/icon/github_white.png); 726 | } 727 | 728 | .google_items { 729 | background: rgba(80, 43, 127, 0.8); 730 | } 731 | 732 | .google_items a { 733 | background: rgba(80, 43, 127, 0.8) url(../images/icon/google.png); 734 | } 735 | 736 | .twitter_items { 737 | background: rgba(25, 25, 115, 0.8); 738 | } 739 | 740 | .twitter_items a { 741 | background: rgba(25, 25, 115, 0.8) url(../images/icon/twitter.png); 742 | } 743 | 744 | .pan_items { 745 | background: rgba(59, 89, 152, 0.8); 746 | } 747 | 748 | .pan_items a { 749 | background: rgba(59, 89, 152, 0.8) url(../images/icon/pan.png); 750 | } 751 | 752 | .uname1_items { 753 | background: rgba(189, 64, 64, 0.8); 754 | } 755 | 756 | .uname1_items a { 757 | background: rgba(189, 64, 64, 0.8) url(../images/icon/blog.png); 758 | } 759 | 760 | .qie_items { 761 | background: rgba(6, 100, 195, 0.8); 762 | } 763 | 764 | .qie_items a { 765 | background: rgba(6, 100, 195, 0.8) url(../images/icon/qie.png); 766 | } 767 | 768 | .file_items { 769 | background: rgba(153, 0, 102, 0.8); 770 | } 771 | 772 | .email_items { 773 | background: rgba(51, 153, 102, 0.8); 774 | } 775 | 776 | .email_items a { 777 | background: rgba(51, 153, 102, 0.8) url(../images/icon/email.png); 778 | } 779 | 780 | .foot_title { 781 | font-variant: small-caps; 782 | color: black; 783 | font-size: 20px; 784 | line-height: 30px; 785 | text-align: center; 786 | } 787 | 788 | .weixin { 789 | margin-right: 30px; 790 | } 791 | 792 | .dingding { 793 | margin-right: 30px; 794 | } 795 | 796 | .weixin_icon { 797 | width: 45px; 798 | height: 45px; 799 | background: url(../images/icon/weixin.png); 800 | background-repeat: no-repeat; 801 | background-size: 45px; 802 | display: block; 803 | } 804 | 805 | .dingding_icon { 806 | width: 45px; 807 | height: 45px; 808 | background: url(../images/icon/dingding.png); 809 | background-repeat: no-repeat; 810 | background-size: 45px; 811 | display: block; 812 | } 813 | 814 | .qq_icon { 815 | width: 45px; 816 | height: 45px; 817 | background: url(../images/icon/qq.png); 818 | background-repeat: no-repeat; 819 | background-size: 45px; 820 | display: block; 821 | } 822 | 823 | .weixin_icon:hover + .weixin_img { 824 | display: block; 825 | } 826 | 827 | .dingding_icon:hover + .dingding_img { 828 | display: block; 829 | } 830 | 831 | .qq_icon:hover + .qq_img { 832 | display: block; 833 | } 834 | 835 | .foot_power { 836 | text-align: center; 837 | padding: 30px 0; 838 | } 839 | 840 | .foot_power h3 { 841 | font-size: 16px; 842 | color: #999999; 843 | font-weight: normal; 844 | } 845 | 846 | .foot_power h3 a { 847 | color: #999999; 848 | font-weight: normal; 849 | } 850 | 851 | .box_bg { 852 | position: absolute; 853 | } 854 | 855 | .hobby_img_info_mob { 856 | display: none; 857 | } 858 | 859 | @keyframes num1 { 860 | 0% { 861 | transform: rotate(-120deg) translateX(10px) rotate(120deg); 862 | } 863 | 60% { 864 | transform: rotate(-24deg) translateX(250px) rotate(24deg); 865 | } 866 | 100% { 867 | transform: rotate(0deg) translateX(200px) rotate(-0deg); 868 | } 869 | } 870 | 871 | @keyframes num2 { 872 | 0% { 873 | transform: rotate(0deg) translateX(10px) rotate(-0deg); 874 | } 875 | 60% { 876 | transform: rotate(96deg) translateX(250px) rotate(-96deg); 877 | } 878 | 100% { 879 | transform: rotate(120deg) translateX(200px) rotate(-120deg); 880 | } 881 | } 882 | 883 | @keyframes num3 { 884 | 0% { 885 | transform: rotate(120deg) translateX(10px) rotate(-120deg); 886 | } 887 | 60% { 888 | transform: rotate(216deg) translateX(250px) rotate(-216deg); 889 | } 890 | 100% { 891 | transform: rotate(240deg) translateX(200px) rotate(-240deg); 892 | } 893 | } 894 | 895 | @keyframes xuanzhuan { 896 | 0% { 897 | transform: perspective(200px) rotateY(0deg) 898 | } 899 | 100% { 900 | transform: perspective(200px) rotateY(720deg); 901 | } 902 | } 903 | 904 | @keyframes clockwise { 905 | from { 906 | transform: rotate(0deg); 907 | } 908 | to { 909 | transform: rotate(360deg); 910 | } 911 | } 912 | 913 | @keyframes anticlockwise { 914 | from { 915 | transform: rotate(0deg); 916 | } 917 | to { 918 | transform: rotate(-360deg); 919 | } 920 | } 921 | 922 | @media screen and (max-width: 1100px) { 923 | .head { 924 | height: 70px 925 | } 926 | 927 | .head_logo_div { 928 | width: 20%; 929 | } 930 | 931 | .head_nav_div { 932 | width: 80%; 933 | font-size: 16px; 934 | } 935 | 936 | .head .head_nav ul li { 937 | margin: 0px 15px; 938 | } 939 | 940 | .box01_content { 941 | width: 100%; 942 | left: 0; 943 | } 944 | 945 | .box_content { 946 | left: 0; 947 | width: auto; 948 | } 949 | 950 | .box02_content { 951 | left: 2px; 952 | } 953 | 954 | .box02_content #box02_text { 955 | width: 90%; 956 | } 957 | 958 | .box02_content #bar_container { 959 | width: 90%; 960 | margin: 0 auto; 961 | float: none; 962 | } 963 | 964 | .box04_content { 965 | width: auto; 966 | top: 10%; 967 | } 968 | 969 | #bar_container .bar { 970 | margin: 30px 0; 971 | } 972 | 973 | .box03_content { 974 | width: 90%; 975 | left: 5%; 976 | } 977 | 978 | .float_btn { 979 | right: 1em; 980 | } 981 | 982 | .foot_info_main { 983 | width: 90%; 984 | margin: 0 auto; 985 | } 986 | 987 | .foot_info_main ul li { 988 | margin: 0px 0 16px 0; 989 | width: 20%; 990 | } 991 | 992 | .foot_info_main ul li a { 993 | background: none; 994 | } 995 | } 996 | 997 | @media screen and (max-width: 700px) { 998 | .head { 999 | height: 3rem; 1000 | } 1001 | 1002 | .head_logo_div { 1003 | width: 100%; 1004 | height: 3rem; 1005 | line-height: 3rem; 1006 | } 1007 | 1008 | .head_nav_div { 1009 | display: none; 1010 | } 1011 | 1012 | .box01_content { 1013 | top: 0; 1014 | } 1015 | 1016 | .cycle_item { 1017 | 1018 | } 1019 | 1020 | .cycle_item a { 1021 | display: flex; 1022 | margin: 172.5px; 1023 | } 1024 | 1025 | .box01_content .title { 1026 | font-size: 2em; 1027 | } 1028 | 1029 | .box01_content .title_h2 { 1030 | font-size: 1rem; 1031 | margin-top: 0.5rem; 1032 | margin-bottom: 0.5rem; 1033 | } 1034 | 1035 | .box01_content .box01_p { 1036 | font-size: 0.8rem; 1037 | line-height: 1.6rem; 1038 | text-shadow: -1px -1px 1px #FFE6B4; 1039 | } 1040 | 1041 | .box02_content { 1042 | top: 5rem; 1043 | width: 100%; 1044 | height: auto; 1045 | } 1046 | 1047 | .logo_img { 1048 | width: 2.5rem; 1049 | height: 2.5rem; 1050 | margin-bottom: 0.1rem; 1051 | } 1052 | 1053 | #bar_container .bar { 1054 | margin: 0.5rem 0; 1055 | } 1056 | 1057 | .bar { 1058 | height: 2rem; 1059 | font-size: 0.8rem; 1060 | } 1061 | 1062 | #bar_container .bar:before { 1063 | position: absolute; 1064 | padding: 0.5rem; 1065 | height: 2rem; 1066 | } 1067 | 1068 | #bar_container .bar:after { 1069 | position: absolute; 1070 | padding: 0.5rem; 1071 | height: 2rem; 1072 | right: -3rem; 1073 | } 1074 | 1075 | .arrow_div { 1076 | bottom: 1rem; 1077 | } 1078 | 1079 | .box04_content { 1080 | top: 3.2rem; 1081 | padding: 0; 1082 | height: auto; 1083 | } 1084 | 1085 | .box04_title { 1086 | margin-top: 1.5rem; 1087 | font-variant: small-caps; 1088 | margin-top: 1rem; 1089 | line-height: 2rem; 1090 | } 1091 | 1092 | .foot { 1093 | padding-top: 0.5rem; 1094 | } 1095 | 1096 | .foot_title { 1097 | font-size: 1rem; 1098 | line-height: 1.2rem; 1099 | } 1100 | 1101 | .foot_info_main ul li { 1102 | width: 45%; 1103 | margin: 0px 0 0.2rem 0; 1104 | } 1105 | 1106 | .foot_info_main ul li a { 1107 | font-size: 1rem; 1108 | } 1109 | 1110 | .qrcode_div { 1111 | margin-top: 0.8rem; 1112 | } 1113 | 1114 | .qrcode_div span { 1115 | width: 2rem; 1116 | height: 2rem; 1117 | background-size: 2rem; 1118 | } 1119 | 1120 | .qrcode_div span img { 1121 | width: 8rem; 1122 | height: 8rem; 1123 | display: none; 1124 | top: -9rem; 1125 | left: -3.5rem; 1126 | } 1127 | 1128 | .weixin_icon { 1129 | width: 2rem; 1130 | height: 2rem; 1131 | background-size: 2rem; 1132 | } 1133 | 1134 | .dingding_icon { 1135 | width: 2rem; 1136 | height: 2rem; 1137 | background-size: 2rem; 1138 | } 1139 | 1140 | .qq_icon { 1141 | width: 2rem; 1142 | height: 2rem; 1143 | background-size: 2rem; 1144 | } 1145 | 1146 | .weixin, 1147 | .dingding { 1148 | margin-right: 0.5rem; 1149 | } 1150 | 1151 | .spot { 1152 | position: absolute; 1153 | width: 100%; 1154 | height: 100%; 1155 | top: 0; 1156 | left: 0; 1157 | } 1158 | 1159 | .foot_info_main { 1160 | padding-bottom: 1rem; 1161 | } 1162 | 1163 | .foot_power { 1164 | padding: 1rem 0; 1165 | } 1166 | 1167 | .foot_power h3 { 1168 | font-size: 0.8rem; 1169 | } 1170 | 1171 | #bar_container .bar.mint { 1172 | border-bottom: 0.2rem solid #0d7e68; 1173 | } 1174 | 1175 | #bar_container .bar.red { 1176 | border-bottom: 0.2rem solid #9f292a; 1177 | } 1178 | 1179 | #bar_container .bar.orange { 1180 | border-bottom: 0.2rem solid #dd481b; 1181 | } 1182 | 1183 | #bar_container .bar.lila { 1184 | border-bottom: 5px solid #2a242c; 1185 | } 1186 | 1187 | #bar_container .bar.gray { 1188 | border-bottom: 5px solid #333434; 1189 | } 1190 | 1191 | #bar_container .bar.blue { 1192 | border-bottom: 5px solid #333434; 1193 | } 1194 | 1195 | #bar_container .bar.green { 1196 | border-bottom: 5px solid #dd481b; 1197 | } 1198 | } -------------------------------------------------------------------------------- /css/delete.css: -------------------------------------------------------------------------------- 1 | /* 弃用元素 */ 2 | .head_img_div { 3 | position: relative; 4 | z-index: 2; 5 | display: inline; 6 | width: 200px; 7 | height: 200px; 8 | margin-top: 7px; 9 | } 10 | 11 | .green_cycle { 12 | width: 260px; 13 | height: 260px; 14 | margin: 0 auto; 15 | padding-top: 70px; 16 | } 17 | 18 | .yellow_cycle { 19 | display: inline-block; 20 | width: 240px; 21 | height: 240px; 22 | margin: 10px; 23 | } 24 | 25 | .blue_cycle { 26 | width: 220px; 27 | height: 220px; 28 | text-align: center; 29 | margin: 10px auto 10px auto; 30 | } 31 | 32 | .hobby_content{ 33 | padding: 15px 0 0 0; 34 | } 35 | 36 | .hobby_content li{ 37 | width: 30%; 38 | float: left; 39 | } 40 | 41 | .hobby_img_div{ 42 | position: relative; 43 | text-align: center; 44 | height: 280px; 45 | } 46 | 47 | .spinner{ 48 | width: 230px; 49 | height: 230px; 50 | margin: 0 auto; 51 | border-radius: 50%; 52 | -webkit-transition: all 0.8s ease-in-out; 53 | -moz-transition: all 0.8s ease-in-out; 54 | transition: all 0.8s ease-in-out; 55 | filter:alpha(opacity=80); 56 | -moz-opacity:0.8; 57 | opacity:0.8; 58 | -khtml-opacity: 0.8; 59 | -webkit-animation: headneon 1.5s ease-in-out infinite alternate; 60 | -moz-animation: headneon 1.5s ease-in-out infinite alternate; 61 | animation: headneon 1.5s ease-in-out infinite alternate; 62 | } 63 | 64 | .spinner_01{ 65 | border: 10px solid #ecab18; 66 | border-right-color: #1ad280; 67 | border-bottom-color: #1ad280; 68 | } 69 | 70 | .spinner_02{ 71 | border: 10px solid #ff9933; 72 | border-right-color: #3366cc; 73 | border-bottom-color: #3366cc; 74 | } 75 | 76 | .spinner_03{ 77 | border: 10px solid #339933; 78 | border-right-color: #cc9900; 79 | border-bottom-color: #cc9900; 80 | } 81 | 82 | .hobby_img{ 83 | position: absolute; 84 | top: 10px; 85 | bottom: 0; 86 | left: 50%; 87 | margin-left: -115px; 88 | right: 0; 89 | width: 230px; 90 | height: 230px; 91 | border-radius: 50%; 92 | } 93 | 94 | .hobby_img_info{ 95 | position: absolute; 96 | top: 10px; 97 | bottom: 0; 98 | left: 50%; 99 | margin-left: -115px; 100 | right: 0; 101 | width: 230px; 102 | height: 230px; 103 | border-radius: 50%; 104 | background: rgba(0, 0, 0, 0.6); 105 | filter:alpha(opacity=0); 106 | -moz-opacity:0; 107 | opacity:0; 108 | -khtml-opacity: 0; 109 | -webkit-transition: all 0.8s ease-in-out; 110 | -moz-transition: all 0.8s ease-in-out; 111 | transition: all 0.8s ease-in-out; 112 | } 113 | 114 | .hobby_img_info h1{ 115 | margin:80px 45px 0 45px; 116 | line-height: 40px; 117 | font-size: 25px; 118 | color: #ffffff; 119 | font-weight: lighter; 120 | border-bottom: 1px solid #ffffff; 121 | } 122 | 123 | .hobby_img_info h2{ 124 | color: #bbb; 125 | font-size: 18px; 126 | line-height: 35px; 127 | font-style: italic; 128 | } 129 | 130 | .hobby_img img{ 131 | width: 230px; 132 | height: 230px; 133 | border-radius: 50%; 134 | } 135 | 136 | .hobby_img_div:hover .spinner{ 137 | -webkit-transform: rotate(180deg); 138 | -moz-transform: rotate(180deg); 139 | -ms-transform: rotate(180deg); 140 | -o-transform: rotate(180deg); 141 | transform: rotate(180deg); 142 | } 143 | 144 | .hobby_img_div:hover .hobby_img_info{ 145 | filter:alpha(opacity=100); 146 | -moz-opacity:1; 147 | opacity:1; 148 | -khtml-opacity: 1; 149 | } 150 | 151 | .hobby_text_div{ 152 | padding: 0 30px; 153 | color: #DADADA; 154 | } 155 | 156 | .hobby_text_div p{ 157 | text-indent:2em; 158 | padding: 0.2em 0; 159 | font-size: 19px; 160 | font-weight: lighter; 161 | } 162 | 163 | .hobby_text_div p a{ 164 | color: #EEEEEE; 165 | font-weight: lighter; 166 | text-decoration: underline; 167 | } 168 | 169 | .hobby_01{ 170 | background: rgba(140, 131, 131, 0.6); 171 | padding: 15px 0 15px 0; 172 | margin-right: 3%; 173 | border-radius: 10px; 174 | } 175 | 176 | .hobby_02{ 177 | background: rgba(132, 59, 59, 0.6); 178 | padding: 15px 0 10px 0; 179 | margin-right: 3%; 180 | border-radius: 10px; 181 | } 182 | 183 | .hobby_03{ 184 | background: rgba(114, 53, 134, 0.6); 185 | padding: 15px 0 10px 0; 186 | border-radius: 10px; 187 | } 188 | 189 | .hobby_03 .hobby_text_div p a{ 190 | color: #969292; 191 | } 192 | 193 | 194 | .qrcode_div{ 195 | margin-top: 10px; 196 | text-align: center; 197 | } 198 | 199 | .qrcode_div span{ 200 | width: 45px; 201 | height: 45px; 202 | position: relative; 203 | display: inline-block; 204 | /*background-size: 45px; 205 | background-repeat: no-repeat;*/ 206 | } 207 | 208 | .qrcode_div span img{ 209 | position: absolute; 210 | width: 150px; 211 | height: 150px; 212 | border: 5px solid greenyellow; 213 | border-radius: 3px; 214 | top: -170px; 215 | left: -55px; 216 | display: block; 217 | display: none; 218 | -webkit-transition: all 0.5s; 219 | -moz-transition: all 0.5s; 220 | -o-transition: all 0.5s; 221 | transition: all 0.5s; 222 | } 223 | -------------------------------------------------------------------------------- /css/mp/mplayer.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @authors 0936zz (zz5840@qq.com) 3 | * @date 2016-08-06 23:54 4 | */ 5 | /* 去除浏览器默认样式 && 避免Bootstrap等框架破坏布局 */ 6 | /* line 14, mplayer.less */ 7 | .mp * { 8 | -webkit-box-sizing: content-box; 9 | -moz-box-sizing: content-box; 10 | box-sizing: content-box; 11 | margin: 0; 12 | padding: 0; 13 | font-family: "Microsoft YaHei", serif; 14 | } 15 | /* line 23, mplayer.less */ 16 | .mp img { 17 | border: none; 18 | } 19 | /* line 26, mplayer.less */ 20 | .mp input { 21 | outline: none; 22 | } 23 | /* line 29, mplayer.less */ 24 | .mp a { 25 | text-decoration: none; 26 | display: inline-block; 27 | color: #FFF; 28 | } 29 | /* line 34, mplayer.less */ 30 | .mp p { 31 | color: #FFF; 32 | } 33 | /* line 37, mplayer.less */ 34 | .mp ul { 35 | list-style-type: none; 36 | } 37 | /* line 40, mplayer.less */ 38 | .mp button { 39 | border: none; 40 | outline: none; 41 | cursor: pointer; 42 | background-color: transparent; 43 | } 44 | /* line 47, mplayer.less */ 45 | /*悬浮窗*/ 46 | .mp { 47 | z-index:6; 48 | width: 574px; 49 | height: 120px; 50 | position: fixed; 51 | bottom: 80px; 52 | left: -574px; 53 | background-color: #212121; 54 | opacity: 0.8; 55 | transition: left .5s; 56 | display:block; 57 | } 58 | /* line 59, mplayer.less */ 59 | .mp.mp-show { 60 | left: 0px; 61 | } 62 | /* line 61, mplayer.less */ 63 | .mp.mp-show .mp-toggle-img { 64 | transform: rotate(180deg); 65 | } 66 | .mp.mp-show .mp-toggle{ 67 | transform: translate(4px ,0px); 68 | } 69 | /* line 69, mplayer.less */ 70 | .mp .mp-cover { 71 | width: 100px; 72 | height: 100px; 73 | position: absolute; 74 | top: 10px; 75 | left: 10px; 76 | border-radius: 2%; 77 | } 78 | /* line 76, mplayer.less */ 79 | .mp .mp-info { 80 | position: absolute; 81 | left: 120px; 82 | top: 15px; 83 | font-size: 14px; 84 | line-height: 1.8; 85 | } 86 | /* line 83, mplayer.less */ 87 | .mp .mp-lrc-box { 88 | padding-top: 10px; 89 | padding-bottom: 10px; 90 | position: absolute; 91 | left: 574px; 92 | background-color: #212121; 93 | border-radius: 0 5px 5px 0; 94 | overflow: hidden; 95 | opacity: 1; 96 | transition: all ease 0.5s; 97 | width: 0px; 98 | } 99 | /* line 96, mplayer.less */ 100 | .mp .mp-lrc-box.mp-lrc-show { 101 | width: 225px; 102 | top: 0px; 103 | padding: 10px; 104 | } 105 | /* line 103, mplayer.less */ 106 | .mp .mp-lrc { 107 | width: 200px; 108 | height: 100px; 109 | font-size: 12px; 110 | overflow: hidden; 111 | color: #FFF; 112 | text-align: center; 113 | line-height: 2; 114 | margin-left: 20px; 115 | } 116 | /* line 112, mplayer.less */ 117 | .mp .mp-lrc-current { 118 | color: #d32f2f; 119 | } 120 | .mp .mp-lrc-close { 121 | width: 7px; 122 | height: 7px; 123 | background: url("../../images/mp/mplayer_bg.png") no-repeat 0 -56px; 124 | position: absolute; 125 | top: 7px; 126 | right: 7px; 127 | transition: opacity .5s; 128 | } 129 | /* line 127, mplayer.less */ 130 | .mp .mp-lrc-close:hover { 131 | background-position-x: -7px; 132 | } 133 | /* line 131, mplayer.less */ 134 | .mp .mp-menu { 135 | position: absolute; 136 | left: 510px; 137 | top: 10px; 138 | } 139 | /* line 136, mplayer.less */ 140 | .mp .mp-list-toggle { 141 | width: 21px; 142 | height: 14px; 143 | background: url("../../images/mp/mplayer_bg.png") no-repeat -29px -90px; 144 | float: left; 145 | } 146 | /* line 141, mplayer.less */ 147 | .mp .mp-list-toggle:hover { 148 | background-position-x: -50px; 149 | } 150 | /* line 145, mplayer.less */ 151 | .mp .mp-lrc-toggle { 152 | width: 14px; 153 | height: 14px; 154 | background: url("../../images/mp/mplayer_bg.png") no-repeat -29px -56px; 155 | float: left; 156 | margin-left: 15px; 157 | } 158 | /* line 151, mplayer.less */ 159 | .mp .mp-lrc-toggle:hover { 160 | background-position-y: -70px; 161 | } 162 | /* line 155, mplayer.less */ 163 | .mp .mp-pro { 164 | width: 440px; 165 | height: 5px; 166 | border: 1px solid #d32f2f; 167 | position: absolute; 168 | bottom: 15px; 169 | left: 120px; 170 | cursor: pointer; 171 | } 172 | /* line 164, mplayer.less */ 173 | .mp .mp-pro-current { 174 | width: 0; 175 | height: 100%; 176 | background-color: #d32f2f; 177 | } 178 | /* line 169, mplayer.less */ 179 | .mp .mp-btn { 180 | position: absolute; 181 | top: 36px; 182 | left: 230px; 183 | height: 45px; 184 | } 185 | /* line 175, mplayer.less */ 186 | .mp .mp-prev, 187 | .mp .mp-next { 188 | width: 24px; 189 | height: 28px; 190 | background: url("../../images/mp/mplayer_bg.png") no-repeat; 191 | float: left; 192 | margin-top: 8.5px; 193 | } 194 | /* line 181, mplayer.less */ 195 | .mp .mp-prev:hover, 196 | .mp .mp-next:hover { 197 | background-position-y: -28px; 198 | } 199 | /* line 185, mplayer.less */ 200 | .mp .mp-prev { 201 | background-position: 0 0; 202 | margin-right: 30px; 203 | } 204 | /* line 189, mplayer.less */ 205 | .mp .mp-next { 206 | background-position: -24px 0; 207 | margin-right: 20px; 208 | } 209 | /* line 193, mplayer.less */ 210 | .mp .mp-pause { 211 | width: 38px; 212 | height: 45px; 213 | margin-right: 30px; 214 | float: left; 215 | background: url("../../images/mp/mplayer_bg.png") no-repeat -86px 0; 216 | } 217 | /* line 199, mplayer.less */ 218 | .mp .mp-pause:hover { 219 | background-position-y: -45px; 220 | } 221 | /* line 203, mplayer.less */ 222 | .mp .mp-play { 223 | background-position: -48px 0; 224 | } 225 | /* line 206, mplayer.less */ 226 | .mp .mp-mode { 227 | width: 26px; 228 | height: 21px; 229 | background: url("../../images/mp/mplayer_bg.png") no-repeat 0 -105px; 230 | margin-right: 20px; 231 | float: left; 232 | margin-top: 12px; 233 | } 234 | /* line 213, mplayer.less */ 235 | .mp .mp-mode:hover { 236 | background-position-y: -126px; 237 | } 238 | /* line 217, mplayer.less */ 239 | .mp .mp-mode-0 { 240 | background-position-x: 0; 241 | } 242 | /* line 220, mplayer.less */ 243 | .mp .mp-mode-1 { 244 | background-position-x: -26px; 245 | } 246 | /* line 223, mplayer.less */ 247 | .mp .mp-mode-2 { 248 | background-position-x: -52px; 249 | } 250 | /* line 226, mplayer.less */ 251 | .mp .mp-mode-3 { 252 | background-position-x: -78px; 253 | } 254 | /* line 229, mplayer.less */ 255 | .mp .mp-vol { 256 | display: inline-block; 257 | float: left; 258 | } 259 | /* line 233, mplayer.less */ 260 | .mp .mp-vol-img { 261 | width: 29px; 262 | height: 21px; 263 | background: url("../../images/mp/mplayer_bg.png") no-repeat 0 -63px; 264 | margin-top: 12px; 265 | float: left; 266 | } 267 | /* line 239, mplayer.less */ 268 | .mp .mp-vol-img:hover { 269 | background-position-y: -84px; 270 | } 271 | /* line 243, mplayer.less */ 272 | .mp .mp-mute { 273 | background-position: -120px -126px; 274 | } 275 | /* line 245, mplayer.less */ 276 | .mp .mp-mute:hover { 277 | background-position: -149px -126px; 278 | } 279 | /* line 249, mplayer.less */ 280 | .mp .mp-vol-range { 281 | width: 70px; 282 | height: 5px; 283 | background: #FFF; 284 | display: inline-block; 285 | float: left; 286 | position: relative; 287 | margin: 20px 0 0 8px; 288 | } 289 | /* line 258, mplayer.less */ 290 | .mp .mp-vol-current { 291 | width: 0; 292 | height: 100%; 293 | background: #d32f2f; 294 | } 295 | /* line 263, mplayer.less */ 296 | .mp .mp-vol-circle { 297 | width: 9px; 298 | height: 9px; 299 | position: absolute; 300 | top: -2px; 301 | border-radius: 5px; 302 | background: #d32f2f; 303 | cursor: pointer; 304 | } 305 | /* line 271, mplayer.less */ 306 | .mp .mp-vol-circle:hover { 307 | background-color: #f44336; 308 | } 309 | /* line 274, mplayer.less */ 310 | .mp .mp-vol-circle.mp-disabled { 311 | -webkit-user-select: none; 312 | -moz-user-select: none; 313 | -ms-user-select: none; 314 | user-select: none; 315 | cursor: default; 316 | } 317 | /* line 280, mplayer.less */ 318 | .mp .mp-vol-circle.mp-disabled:hover { 319 | background-color: #d32f2f; 320 | } 321 | /* line 285, mplayer.less */ 322 | .mp .mp-toggle { 323 | position: absolute; 324 | right: 0; 325 | top: 0; 326 | left: 570px; 327 | height: 120px; 328 | width: 25px; 329 | background-color: #c33732; 330 | border-radius: 0 100% 100% 0; 331 | transition: all 0.5s ease; 332 | } 333 | /* line 292, mplayer.less */ 334 | .mp .mp-toggle:hover { 335 | background-color: #d1473f; 336 | transform: translate(4px ,0px); 337 | } 338 | /* line 296, mplayer.less */ 339 | .mp .mp-toggle-img { 340 | width: 12px; 341 | height: 21px; 342 | display: inline-block; 343 | background: url("../../images/mp/mplayer_bg.png") no-repeat -104px -126px; 344 | position: absolute; 345 | top: 50px; 346 | left: 6px; 347 | -webkit-transition: -webkit-transform 0.5s; 348 | -moz-transition: -moz-transform 0.5s; 349 | -o-transition: -o-transform 0.5s; 350 | transition: transform .5s; 351 | } 352 | /* line 309, mplayer.less */ 353 | .mp .mp-list-box { 354 | position: absolute; 355 | bottom: 120px; 356 | left: 0; 357 | width: 574px; 358 | height: 0; 359 | overflow: hidden; 360 | background-color: #212121; 361 | -webkit-transition: height .5s; 362 | -moz-transition: height .5s; 363 | -o-transition: height .5s; 364 | transition: height .5s; 365 | border-radius: 0% 3% 0% 0%; 366 | } 367 | /* line 321, mplayer.less */ 368 | .mp .mp-list-box.mp-list-show { 369 | height: 400px; 370 | } 371 | /* line 325, mplayer.less */ 372 | .mp .mp-list-title { 373 | height: 40px; 374 | font-size: 18px; 375 | color: #FFF; 376 | line-height: 40px; 377 | width: 100%; 378 | background: #212121; 379 | } 380 | /* line 332, mplayer.less */ 381 | .mp .mp-list-title li { 382 | float: left; 383 | padding: 0 20px; 384 | cursor: pointer; 385 | } 386 | /* line 338, mplayer.less */ 387 | .mp .mp-list-title-current { 388 | background: #727272; 389 | position: relative; 390 | } 391 | /* line 341, mplayer.less */ 392 | .mp .mp-list-title-current:before { 393 | content: ""; 394 | position: absolute; 395 | top: 40px; 396 | left: 50%; 397 | width: 0; 398 | height: 0; 399 | border: 6px dashed transparent; 400 | border-top: 6px solid #727272; 401 | margin-left: -6px; 402 | } 403 | /* line 353, mplayer.less */ 404 | .mp .mp-list-table { 405 | max-height: 340px; 406 | width: 100%; 407 | border-collapse: collapse; 408 | border: none; 409 | margin: 10px 0; 410 | overflow: auto; 411 | } 412 | /* line 360, mplayer.less */ 413 | .mp .mp-list-table th { 414 | font-weight: normal; 415 | text-align: left; 416 | } 417 | /* line 364, mplayer.less */ 418 | .mp .mp-list-table th, 419 | .mp .mp-list-table td { 420 | text-indent: 10px; 421 | } 422 | /* line 367, mplayer.less */ 423 | .mp .mp-list-table tr { 424 | height: 20px; 425 | font-size: 14px; 426 | color: #FFF; 427 | line-height: 2; 428 | padding: 0 10px; 429 | } 430 | /* line 375, mplayer.less */ 431 | .mp .mp-list-table tbody tr { 432 | cursor: pointer; 433 | } 434 | /* line 377, mplayer.less */ 435 | .mp .mp-list-table tbody tr.mp-list-current, 436 | .mp .mp-list-table tbody tr:hover { 437 | background: #727272; 438 | } 439 | /*# sourceMappingURL=mplayer.css.map */ 440 | -------------------------------------------------------------------------------- /css/mp/mplayer.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"mplayer.css","sources":["mplayer.less"],"names":[],"mappings":";;;;;;AAYA,GACC;EACC,+BAAA;EACA,4BAAA;EACA,uBAAA;EACA,SAAA;EACA,UAAA;EACA,aAAa,wBAAb;;;AAPF,GAUC;EACC,YAAA;;;AAXF,GAaC;EACC,aAAA;;;AAdF,GAgBC;EACC,qBAAA;EACA,qBAAA;EACA,WAAA;;;AAnBF,GAqBC;EACC,WAAA;;;AAtBF,GAwBC;EACC,qBAAA;;;AAzBF,GA2BC;EACC,YAAA;EACA,aAAA;EACA,eAAA;EACA,6BAAA;;;AAGF;EACC,YAAA;EACA,aAAA;EACA,eAAA;EACA,YAAA;EACA,YAAA;EACA,0BAAA;EACA,yBAAA;EACA,4BAAA;EACA,yBAAA;EACA,uBAAA;EACA,oBAAA;;;AACA,GAAC;EACA,OAAA;;;AADD,GAAC,QAEA;EACC,mBAAmB,cAAnB;EACA,gBAAgB,cAAhB;EACA,eAAe,cAAf;EACA,cAAc,cAAd;EACA,WAAW,cAAX;;;AAnBH,GAsBC;EACC,YAAA;EACA,aAAA;EACA,kBAAA;EACA,SAAA;EACA,UAAA;;;AA3BF,GA6BC;EACC,kBAAA;EACA,WAAA;EACA,SAAA;EACA,eAAA;EACA,gBAAA;;;AAlCF,GAoCC;EACC,aAAA;EACA,kBAAA;EACA,MAAA;EACA,WAAA;EACA,yBAAA;EACA,0BAAA;EACA,gBAAA;EACA,UAAA;EACA,+BAAA;EACA,4BAAA;EACA,0BAAA;EACA,uBAAA;;;AACA,GAbD,YAaE;EACA,UAAA;;;AACA,GAfF,YAaE,YAEE;EACD,UAAA;;;AApDJ,GAwDC;EACC,YAAA;EACA,aAAA;EACA,eAAA;EACA,gBAAA;EACA,WAAA;EACA,kBAAA;EACA,cAAA;;;AA/DF,GAiEC;EACC,cAAA;;;AAlEF,GAoEC;EACC,UAAA;EACA,WAAA;EACA,gBAjHiB,0CAiHjB;EACA,kBAAA;EACA,QAAA;EACA,aAAA;EACA,UAAA;EACA,+BAAA;EACA,4BAAA;EACA,0BAAA;EACA,uBAAA;;;AACA,GAZD,cAYE;EACA,2BAAA;;;AAjFH,GAoFC;EACC,kBAAA;EACA,WAAA;EACA,SAAA;;;AAvFF,GAyFC;EACC,WAAA;EACA,YAAA;EACA,gBAtIiB,8CAsIjB;EACA,WAAA;;;AACA,GALD,gBAKE;EACA,4BAAA;;;AA/FH,GAkGC;EACC,WAAA;EACA,YAAA;EACA,gBA/IiB,8CA+IjB;EACA,WAAA;EACA,iBAAA;;;AACA,GAND,eAME;EACA,4BAAA;;;AAzGH,GA4GC;EACC,YAAA;EACA,WAAA;EACA,yBAAA;EACA,kBAAA;EACA,YAAA;EACA,WAAA;EACA,eAAA;;;AAnHF,GAqHC;EACC,QAAA;EACA,YAAA;EACA,yBAAA;;;AAxHF,GA0HC;EACC,kBAAA;EACA,SAAA;EACA,WAAA;EACA,YAAA;;;AA9HF,GAgIC;AAhID,GAgVC,CAhNS;EACR,WAAA;EACA,YAAA;EACA,gBA7KiB,kCA6KjB;EACA,WAAA;EACA,iBAAA;;;AACA,GAND,SAME;AAAD,GA0MD,CAhNS,QAMP;EACA,4BAAA;;;AAvIH,GA0IC;EACC,wBAAA;EACA,kBAAA;;;AA5IF,GA8IC;EACC,4BAAA;EACA,kBAAA;;;AAhJF,GAkJC;EACC,WAAA;EACA,YAAA;EACA,kBAAA;EACA,WAAA;EACA,gBAjMiB,0CAiMjB;;;AACA,GAND,UAME;EACA,4BAAA;;;AAzJH,GA4JC;EACC,4BAAA;;;AA7JF,GA+JC;EACC,WAAA;EACA,YAAA;EACA,gBA5MiB,2CA4MjB;EACA,kBAAA;EACA,WAAA;EACA,gBAAA;;;AACA,GAPD,SAOE;EACA,6BAAA;;;AAvKH,GA0KC;EACC,wBAAA;;;AA3KF,GA6KC;EACC,4BAAA;;;AA9KF,GAgLC;EACC,4BAAA;;;AAjLF,GAmLC;EACC,4BAAA;;;AApLF,GAsLC;EACC,qBAAA;EACA,WAAA;;;AAxLF,GA0LC;EACC,WAAA;EACA,YAAA;EACA,gBAvOiB,0CAuOjB;EACA,gBAAA;EACA,WAAA;;;AACA,GAND,YAME;EACA,4BAAA;;;AAjMH,GAoMC;EACC,kCAAA;;;AACA,GAFD,SAEE;EACA,kCAAA;;;AAvMH,GA0MC;EACC,WAAA;EACA,WAAA;EACA,gBAAA;EACA,qBAAA;EACA,WAAA;EACA,kBAAA;EACA,oBAAA;;;AAjNF,GAmNC;EACC,QAAA;EACA,YAAA;EACA,mBAAA;;;AAtNF,GAwNC;EACC,UAAA;EACA,WAAA;EACA,kBAAA;EACA,SAAA;EACA,kBAAA;EACA,mBAAA;EACA,eAAA;;;AACA,GARD,eAQE;EACA,yBAAA;;;AAED,GAXD,eAWE;EACA,yBAAA;EACA,sBAAA;EACA,qBAAA;EACA,iBAAA;EACA,eAAA;;;AACA,GAjBF,eAWE,YAMC;EACA,yBAAA;;;AA1OJ,GA8OC;EACC,kBAAA;EACA,QAAA;EACA,MAAA;EACA,aAAA;EACA,WAAA;EACA,gBA9RiB,2CA8RjB;;;AACA,GAPD,WAOE;EACA,6BAAA;;;AAtPH,GAyPC;EACC,WAAA;EACA,YAAA;EACA,qBAAA;EACA,gBAvSiB,gDAuSjB;EACA,kBAAA;EACA,SAAA;EACA,SAAA;EACA,0CAAA;EACA,oCAAA;EACA,gCAAA;EACA,yBAAA;;;AApQF,GAsQC;EACC,kBAAA;EACA,aAAA;EACA,OAAA;EACA,YAAA;EACA,SAAA;EACA,gBAAA;EACA,yBAAA;EACA,8BAAA;EACA,2BAAA;EACA,yBAAA;EACA,sBAAA;;;AACA,GAZD,aAYE;EACA,aAAA;;;AAnRH,GAsRC;EACC,YAAA;EACA,eAAA;EACA,WAAA;EACA,iBAAA;EACA,WAAA;EACA,mBAAA;;;AA5RF,GAsRC,eAOC;EACC,WAAA;EACA,eAAA;EACA,eAAA;;;AAhSH,GAmSC;EACC,mBAAA;EACA,kBAAA;;;AACA,GAHD,uBAGE;EACA,SAAS,EAAT;EACA,kBAAA;EACA,SAAA;EACA,SAAA;EACA,QAAA;EACA,SAAA;EACA,8BAAA;EACA,6BAAA;EACA,iBAAA;;;AA/SH,GAkTC;EACC,iBAAA;EACA,WAAA;EACA,yBAAA;EACA,YAAA;EACA,cAAA;EACA,cAAA;;;AAxTF,GAkTC,eAOC;EACC,mBAAA;EACA,gBAAA;;;AA3TH,GAkTC,eAWC;AA7TF,GAkTC,eA8BA,CAnBI;EACF,iBAAA;;;AA9TH,GAkTC,eAcC;EACC,YAAA;EACA,eAAA;EACA,WAAA;EACA,cAAA;EACA,eAAA;;;AArUH,GAkTC,eAqBC,MACC;EACC,eAAA;;;AACA,GAxBH,eAqBC,MACC,GAEE;AAAiB,GAxBrB,eAqBC,MACC,GAEoB;EAClB,mBAAA","sourceRoot":""} -------------------------------------------------------------------------------- /css/mp/mplayer.less: -------------------------------------------------------------------------------- 1 | /** 2 | * @authors 0936zz (zz5840@qq.com) 3 | * @date 2016-08-06 23:54 4 | */ 5 | @mp-background-url:"../img/mplayer_bg.png"; 6 | @mp-background-color : #212121; 7 | @mp-gray : #727272; 8 | @mp-main-color : #D32F2F; 9 | @mp-hover : #F44336; 10 | 11 | 12 | /* 去除浏览器默认样式 && 避免Bootstrap等框架破坏布局 */ 13 | .mp { 14 | * { 15 | -webkit-box-sizing: content-box; 16 | -moz-box-sizing: content-box; 17 | box-sizing: content-box; 18 | margin: 0; 19 | padding: 0; 20 | font-family: "Microsoft YaHei", serif; 21 | } 22 | 23 | img { 24 | border: none; 25 | } 26 | input { 27 | outline: none; 28 | } 29 | a { 30 | text-decoration: none; 31 | display: inline-block; 32 | color: #FFF; 33 | } 34 | p { 35 | color: #FFF; 36 | } 37 | ul { 38 | list-style-type: none; 39 | } 40 | button { 41 | border: none; 42 | outline: none; 43 | cursor: pointer; 44 | background-color: transparent; 45 | } 46 | } 47 | .mp { 48 | width: 599px; 49 | height: 120px; 50 | position: fixed; 51 | bottom: 20px; 52 | left: -574px; 53 | border-radius: 0 5px 5px 0; 54 | background-color: @mp-background-color; 55 | -webkit-transition: left .5s; 56 | -moz-transition: left .5s; 57 | -o-transition: left .5s; 58 | transition: left .5s; 59 | &.mp-show { 60 | left: 0; 61 | .mp-toggle-img { 62 | -webkit-transform: rotate(180deg); 63 | -moz-transform: rotate(180deg); 64 | -ms-transform: rotate(180deg); 65 | -o-transform: rotate(180deg); 66 | transform: rotate(180deg); 67 | } 68 | } 69 | .mp-cover { 70 | width: 100px; 71 | height: 100px; 72 | position: absolute; 73 | top: 10px; 74 | left: 10px; 75 | } 76 | .mp-info { 77 | position: absolute; 78 | left: 120px; 79 | top: 15px; 80 | font-size: 14px; 81 | line-height: 1.8; 82 | } 83 | .mp-lrc-box { 84 | padding: 10px; 85 | position: absolute; 86 | top: 0; 87 | left: 600px; 88 | background-color: @mp-background-color; 89 | border-radius: 0 5px 5px 0; 90 | overflow: hidden; 91 | opacity: 0; 92 | -webkit-transition: opacity .5s; 93 | -moz-transition: opacity .5s; 94 | -o-transition: opacity .5s; 95 | transition: opacity .5s; 96 | &.mp-lrc-show { 97 | opacity: 1; 98 | & ~ .mp-lrc-close { 99 | opacity: 1; 100 | } 101 | } 102 | } 103 | .mp-lrc { 104 | width: 200px; 105 | height: 100px; 106 | font-size: 12px; 107 | overflow: hidden; 108 | color: #FFF; 109 | text-align: center; 110 | line-height: 2; 111 | } 112 | .mp-lrc-current { 113 | color: @mp-main-color; 114 | } 115 | .mp-lrc-close { 116 | width: 7px; 117 | height: 7px; 118 | background: url(@mp-background-url) no-repeat 0 -56px; 119 | position: absolute; 120 | top: 7px; 121 | right: -215px; 122 | opacity: 0; 123 | -webkit-transition: opacity .5s; 124 | -moz-transition: opacity .5s; 125 | -o-transition: opacity .5s; 126 | transition: opacity .5s; 127 | &:hover { 128 | background-position-x: -7px; 129 | } 130 | } 131 | .mp-menu { 132 | position: absolute; 133 | left: 510px; 134 | top: 10px; 135 | } 136 | .mp-list-toggle { 137 | width: 21px; 138 | height: 14px; 139 | background: url(@mp-background-url) no-repeat -29px -90px; 140 | float: left; 141 | &:hover { 142 | background-position-x: -50px; 143 | } 144 | } 145 | .mp-lrc-toggle { 146 | width: 14px; 147 | height: 14px; 148 | background: url(@mp-background-url) no-repeat -29px -56px; 149 | float: left; 150 | margin-left: 15px; 151 | &:hover { 152 | background-position-y: -70px; 153 | } 154 | } 155 | .mp-pro { 156 | width: 440px; 157 | height: 5px; 158 | border: 1px solid @mp-main-color; 159 | position: absolute; 160 | bottom: 15px; 161 | left: 120px; 162 | cursor: pointer; 163 | } 164 | .mp-pro-current { 165 | width: 0; 166 | height: 100%; 167 | background-color: @mp-main-color; 168 | } 169 | .mp-btn { 170 | position: absolute; 171 | top: 36px; 172 | left: 230px; 173 | height: 45px; 174 | } 175 | .mp-prev,.mp-next { 176 | width: 24px; 177 | height: 28px; 178 | background: url(@mp-background-url) no-repeat; 179 | float: left; 180 | margin-top: 8.5px; 181 | &:hover { 182 | background-position-y: -28px; 183 | } 184 | } 185 | .mp-prev { 186 | background-position: 0 0; 187 | margin-right: 30px; 188 | } 189 | .mp-next { 190 | background-position: -24px 0; 191 | margin-right: 20px; 192 | } 193 | .mp-pause { 194 | width: 38px; 195 | height: 45px; 196 | margin-right: 30px; 197 | float: left; 198 | background: url(@mp-background-url) no-repeat -86px 0; 199 | &:hover { 200 | background-position-y: -45px; 201 | } 202 | } 203 | .mp-play { 204 | background-position: -48px 0; 205 | } 206 | .mp-mode { 207 | width: 26px; 208 | height: 21px; 209 | background: url(@mp-background-url) no-repeat 0 -105px; 210 | margin-right: 20px; 211 | float: left; 212 | margin-top: 12px; 213 | &:hover { 214 | background-position-y: -126px; 215 | } 216 | } 217 | .mp-mode-0 { 218 | background-position-x: 0; 219 | } 220 | .mp-mode-1 { 221 | background-position-x: -26px; 222 | } 223 | .mp-mode-2 { 224 | background-position-x: -52px; 225 | } 226 | .mp-mode-3 { 227 | background-position-x: -78px; 228 | } 229 | .mp-vol { 230 | display: inline-block; 231 | float: left; 232 | } 233 | .mp-vol-img { 234 | width: 29px; 235 | height: 21px; 236 | background: url(@mp-background-url) no-repeat 0 -63px; 237 | margin-top: 12px; 238 | float: left; 239 | &:hover { 240 | background-position-y: -84px; 241 | } 242 | } 243 | .mp-mute { 244 | background-position: -120px -126px; 245 | &:hover { 246 | background-position: -149px -126px; 247 | } 248 | } 249 | .mp-vol-range { 250 | width: 70px; 251 | height: 5px; 252 | background: #FFF; 253 | display: inline-block; 254 | float: left; 255 | position: relative; 256 | margin: 20px 0 0 8px; 257 | } 258 | .mp-vol-current { 259 | width: 0; 260 | height: 100%; 261 | background: @mp-main-color; 262 | } 263 | .mp-vol-circle { 264 | width: 9px; 265 | height: 9px; 266 | position: absolute; 267 | top: -2px; 268 | border-radius: 5px; 269 | background: @mp-main-color; 270 | cursor: pointer; 271 | &:hover { 272 | background-color: @mp-hover; 273 | } 274 | &.mp-disabled { 275 | -webkit-user-select: none; 276 | -moz-user-select: none; 277 | -ms-user-select: none; 278 | user-select: none; 279 | cursor: default; 280 | &:hover { 281 | background-color: @mp-main-color; 282 | } 283 | } 284 | } 285 | .mp-toggle { 286 | position: absolute; 287 | right: 0; 288 | top: 0; 289 | height: 120px; 290 | width: 25px; 291 | background: url(@mp-background-url) no-repeat -124px 0; 292 | &:hover { 293 | background-position-x: -149px; 294 | } 295 | } 296 | .mp-toggle-img { 297 | width: 12px; 298 | height: 21px; 299 | display: inline-block; 300 | background: url(@mp-background-url) no-repeat -104px -126px; 301 | position: absolute; 302 | top: 50px; 303 | left: 6px; 304 | -webkit-transition: -webkit-transform .5s; 305 | -moz-transition: -moz-transform .5s; 306 | -o-transition: -o-transform .5s; 307 | transition: transform .5s; 308 | } 309 | .mp-list-box { 310 | position: absolute; 311 | bottom: 120px; 312 | left: 0; 313 | width: 574px; 314 | height: 0; 315 | overflow: hidden; 316 | background-color: @mp-background-color; 317 | -webkit-transition: height .5s; 318 | -moz-transition: height .5s; 319 | -o-transition: height .5s; 320 | transition: height .5s; 321 | &.mp-list-show { 322 | height: 400px; 323 | } 324 | } 325 | .mp-list-title { 326 | height: 40px; 327 | font-size: 18px; 328 | color: #FFF; 329 | line-height: 40px; 330 | width: 100%; 331 | background: @mp-background-color; 332 | li { 333 | float: left; 334 | padding: 0 20px; 335 | cursor: pointer; 336 | } 337 | } 338 | .mp-list-title-current { 339 | background: @mp-gray; 340 | position: relative; 341 | &:before { 342 | content: ""; 343 | position: absolute; 344 | top: 40px; 345 | left: 50%; 346 | width: 0; 347 | height: 0; 348 | border: 6px dashed transparent; 349 | border-top:6px solid @mp-gray; 350 | margin-left: -6px; 351 | } 352 | } 353 | .mp-list-table { 354 | max-height: 340px; 355 | width: 100%; 356 | border-collapse: collapse; 357 | border: none; 358 | margin: 10px 0; 359 | overflow: auto; 360 | th { 361 | font-weight: normal; 362 | text-align: left; 363 | } 364 | th,td { 365 | text-indent: 10px; 366 | } 367 | tr { 368 | height: 20px; 369 | font-size: 14px; 370 | color: #FFF; 371 | line-height: 2; 372 | padding: 0 10px; 373 | } 374 | tbody { 375 | tr{ 376 | cursor: pointer; 377 | &.mp-list-current,&:hover { 378 | background: @mp-gray; 379 | } 380 | } 381 | } 382 | } 383 | } -------------------------------------------------------------------------------- /css/process.css: -------------------------------------------------------------------------------- 1 | /*进度条效果*/ 2 | #bar_container{ 3 | float: left; 4 | color: #ffffff; 5 | width: 50%; 6 | } 7 | 8 | .bar { 9 | height: 40px; 10 | width: 0; 11 | transition: width 1.2s ease-in-out; 12 | -webkit-transition: width 1.2s ease-in-out; 13 | -moz-transition: width 1.2s ease-in-out; 14 | -ms-transition: width 1.2s ease-in-out; 15 | position: relative; 16 | margin: 30px 0; 17 | border-radius: 4px; 18 | } 19 | 20 | .bar.mint { 21 | background-color: #14c3a2; 22 | background-image: repeating-linear-gradient(-45deg, #14c3a2, #14c3a2 30px, #22e8c3 30px, #22e8c3 60px); 23 | background-size: 600px 100%; 24 | animation: barberpole 12s linear infinite; 25 | -webkit-animation: barberpole 12s linear infinite; 26 | -moz-animation: barberpole 12s linear infinite; 27 | -o-animation: barberpole 12s linear infinite; 28 | -ms-accelerator: barberpole 12s linear infinite; 29 | border-bottom: 5px solid #0d7e68; 30 | } 31 | 32 | .bar.red { 33 | background-color: #cf4647; 34 | background-image: repeating-linear-gradient(-45deg, #cf4647, #cf4647 30px, #da6e6f 30px, #da6e6f 60px); 35 | background-size: 600px 100%; 36 | animation: barberpole 12s linear infinite; 37 | -webkit-animation: barberpole 12s linear infinite; 38 | -moz-animation: barberpole 12s linear infinite; 39 | -o-animation: barberpole 12s linear infinite; 40 | -ms-accelerator: barberpole 12s linear infinite; 41 | border-bottom: 5px solid #9f292a; 42 | } 43 | 44 | .bar.orange {d 45 | background-color: #eb7b59; 46 | background-image: repeating-linear-gradient(-45deg, #eb7b59, #eb7b59 30px, #f09f87 30px, #f09f87 60px); 47 | background-size: 600px 100%; 48 | animation: barberpole 12s linear infinite; 49 | -webkit-animation: barberpole 12s linear infinite; 50 | -moz-animation: barberpole 12s linear infinite; 51 | -o-animation: barberpole 12s linear infinite; 52 | -ms-accelerator: barberpole 12s linear infinite; 53 | border-bottom: 5px solid #dd481b; 54 | } 55 | 56 | .bar.lila { 57 | background-color: #524656; 58 | background-image: repeating-linear-gradient(-45deg, #524656, #524656 30px, #6d5d72 30px, #6d5d72 60px); 59 | background-size: 600px 100%; 60 | animation: barberpole 12s linear infinite; 61 | -webkit-animation: barberpole 12s linear infinite; 62 | -moz-animation: barberpole 12s linear infinite; 63 | -ms-accelerator: barberpole 12s linear infinite; 64 | -o-animation: barberpole 12s linear infinite; 65 | border-bottom: 5px solid #2a242c; 66 | } 67 | 68 | .bar.gray { 69 | background-color: #595b5a; 70 | background-image: repeating-linear-gradient(-45deg, #595b5a, #595b5a 30px, #727574 30px, #727574 60px); 71 | background-size: 600px 100%; 72 | animation: barberpole 12s linear infinite; 73 | -webkit-animation: barberpole 12s linear infinite; 74 | -moz-animation: barberpole 12s linear infinite; 75 | -ms-accelerator: barberpole 12s linear infinite; 76 | -o-animation: barberpole 12s linear infinite; 77 | border-bottom: 5px solid #333434; 78 | } 79 | 80 | .bar.blue { 81 | background-color: blueviolet; 82 | background-image: repeating-linear-gradient(-45deg, #595b5a, #595b5a 30px, #727574 30px, #727574 60px); 83 | background-size: 600px 100%; 84 | animation: barberpole 12s linear infinite; 85 | -webkit-animation: barberpole 12s linear infinite; 86 | -moz-animation: barberpole 12s linear infinite; 87 | -o-animation: barberpole 12s linear infinite; 88 | -ms-accelerator: barberpole 12s linear infinite; 89 | border-bottom: 5px solid #333434; 90 | } 91 | 92 | .bar.moe { 93 | background-color: green; 94 | background-image: repeating-linear-gradient(-45deg, #f56d5d, #ff7374 30px, #ff8383 30px, #ff8c8d 60px); 95 | background-size: 600px 100%; 96 | animation: barberpole 12s linear infinite; 97 | -webkit-animation: barberpole 12s linear infinite; 98 | -moz-animation: barberpole 12s linear infinite; 99 | -o-animation: barberpole 12s linear infinite; 100 | -ms-accelerator: barberpole 12s linear infinite; 101 | border-bottom: 5px solid #dd481b; 102 | } 103 | 104 | .bar.active:after, .bar.active:before { 105 | opacity: 1; 106 | font-size: 16px; 107 | } 108 | 109 | .bar:before { 110 | content: attr(data-skill); 111 | display: block; 112 | position: absolute; 113 | top: 0; 114 | left: 0; 115 | padding: 10px; 116 | height: 40px; 117 | font-style: italic; 118 | opacity: 0; 119 | transition: opacity 2s 0.6s; 120 | -webkit-transition: opacity 2s 0.6s; 121 | -moz-transition: opacity 2s 0.6s; 122 | -ms-transition: opacity 2s 0.6s; 123 | -o-animation: opacity 2s 0.6s; 124 | } 125 | 126 | .bar:after { 127 | content: attr(data-percent) "%"; 128 | display: block; 129 | position: absolute; 130 | top: 0; 131 | right: 0; 132 | height: 40px; 133 | padding: 10px; 134 | opacity: 0; 135 | transition: opacity 2s 0.6s; 136 | -webkit-transition: opacity 2s 0.6s; 137 | -moz-transition: opacity 2s 0.6s; 138 | -ms-transition: opacity 2s 0.6s; 139 | -o-animation: opacity 2s 0.6s; 140 | } 141 | 142 | @keyframes barberpole { 143 | from { 144 | background-position: 0% 0%; 145 | } 146 | 147 | to { 148 | background-position: 600px 0%; 149 | } 150 | } 151 | 152 | @-webkit-keyframes barberpole { 153 | from { 154 | background-position: 0% 0%; 155 | } 156 | 157 | to { 158 | background-position: 600px 0%; 159 | } 160 | } 161 | 162 | @-moz-keyframes barberpole { 163 | from { 164 | background-position: 0% 0%; 165 | } 166 | 167 | to { 168 | background-position: 600px 0%; 169 | } 170 | } 171 | 172 | @-ms-keyframes barberpole { 173 | from { 174 | background-position: 0% 0%; 175 | } 176 | 177 | to { 178 | background-position: 600px 0%; 179 | } 180 | } 181 | 182 | @-o-keyframes barberpole { 183 | from { 184 | background-position: 0% 0%; 185 | } 186 | 187 | to { 188 | background-position: 600px 0%; 189 | } 190 | } 191 | 192 | .bar.active[data-percent="5"] { 193 | width: 5%; 194 | } 195 | 196 | .bar.active[data-percent="10"] { 197 | width: 10%; 198 | } 199 | 200 | .bar.active[data-percent="15"] { 201 | width: 15%; 202 | } 203 | 204 | .bar.active[data-percent="20"] { 205 | width: 20%; 206 | } 207 | 208 | .bar.active[data-percent="25"] { 209 | width: 25%; 210 | } 211 | 212 | .bar.active[data-percent="30"] { 213 | width: 30%; 214 | } 215 | 216 | .bar.active[data-percent="35"] { 217 | width: 35%; 218 | } 219 | 220 | .bar.active[data-percent="40"] { 221 | width: 40%; 222 | } 223 | 224 | .bar.active[data-percent="45"] { 225 | width: 45%; 226 | } 227 | 228 | .bar.active[data-percent="50"] { 229 | width: 50%; 230 | } 231 | 232 | .bar.active[data-percent="55"] { 233 | width: 55%; 234 | } 235 | 236 | .bar.active[data-percent="60"] { 237 | width: 60%; 238 | } 239 | 240 | .bar.active[data-percent="65"] { 241 | width: 65%; 242 | } 243 | 244 | .bar.active[data-percent="70"] { 245 | width: 70%; 246 | } 247 | 248 | .bar.active[data-percent="75"] { 249 | width: 75%; 250 | } 251 | 252 | .bar.active[data-percent="80"] { 253 | width: 80%; 254 | } 255 | 256 | .bar.active[data-percent="85"] { 257 | width: 85%; 258 | } 259 | 260 | .bar.active[data-percent="90"] { 261 | width: 90%; 262 | } 263 | 264 | .bar.active[data-percent="95"] { 265 | width: 95%; 266 | } 267 | 268 | .bar.active[data-percent="100"] { 269 | width: 100%; 270 | } 271 | /*便签*/ 272 | } 273 | .bq ul{ 274 | overflow:hidden; 275 | padding:3em; 276 | list-style:none; 277 | } 278 | .bq li a{ 279 | text-decoration:none; 280 | color:#000; 281 | background:rgba(183, 183, 183, 0.81); 282 | display:block; 283 | height:10em; 284 | width:10em; 285 | padding:1em; 286 | -moz-box-shadow:5px 5px 7px rgba(33,33,33,1); 287 | -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7); 288 | box-shadow: 5px 5px 7px rgba(33,33,33,.7); 289 | -moz-transition:-moz-transform .15s linear; 290 | -o-transition:-o-transform .15s linear; 291 | -webkit-transition:-webkit-transform .15s linear; 292 | text-align: center; 293 | } 294 | .bq li{ 295 | margin:1em; 296 | float:left; 297 | list-style:none; 298 | } 299 | .bq li h2{ 300 | font-size:140%; 301 | font-weight:bold; 302 | /*! padding-bottom:10px; */ 303 | /*! padding: inherit !important; */ 304 | text-align: center; 305 | } 306 | .bq li p{ 307 | font-family:"Reenie Beanie",arial,sans-serif; 308 | font-size:180%; 309 | } 310 | .bq li a{ 311 | -webkit-transform: rotate(-6deg); 312 | -o-transform: rotate(-6deg); 313 | -moz-transform:rotate(-6deg); 314 | } 315 | .bq li:nth-child(even) a{ 316 | -o-transform:rotate(4deg); 317 | -webkit-transform:rotate(4deg); 318 | -moz-transform:rotate(4deg); 319 | position:relative; 320 | top:5px; 321 | background:rgba(201, 70, 70, 0.8); 322 | } 323 | .bq li:nth-child(3n) a{ 324 | -o-transform:rotate(-3deg); 325 | -webkit-transform:rotate(-3deg); 326 | -moz-transform:rotate(-3deg); 327 | position:relative; 328 | top:-5px; 329 | background:rgba(182, 130, 206, 0.8); 330 | } 331 | .bq li:nth-child(5n) a{ 332 | -o-transform:rotate(5deg); 333 | -webkit-transform:rotate(5deg); 334 | -moz-transform:rotate(5deg); 335 | position:relative; 336 | top:-10px; 337 | } 338 | .bq li a:hover, .bq li a:focus{ 339 | box-shadow:10px 10px 7px rgba(0,0,0,.7); 340 | -moz-box-shadow:10px 10px 7px rgba(0,0,0,.7); 341 | -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7); 342 | -webkit-transform: scale(1.25); 343 | -moz-transform: scale(1.25); 344 | -o-transform: scale(1.25); 345 | position:relative; 346 | z-index:5; 347 | } -------------------------------------------------------------------------------- /desktop.ini: -------------------------------------------------------------------------------- 1 | [.ShellClassInfo] 2 | IconResource=favicon.ico 3 | IconArea_text=FFFFFF -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moewhite19/about/95c90aa695190db71ffd4c40712540cb63691e56/favicon.ico -------------------------------------------------------------------------------- /images/404.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moewhite19/about/95c90aa695190db71ffd4c40712540cb63691e56/images/404.jpg -------------------------------------------------------------------------------- /images/Erii.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moewhite19/about/95c90aa695190db71ffd4c40712540cb63691e56/images/Erii.png -------------------------------------------------------------------------------- /images/bad_apple.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/error.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moewhite19/about/95c90aa695190db71ffd4c40712540cb63691e56/images/error.jpg -------------------------------------------------------------------------------- /images/icon/arrowhead.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moewhite19/about/95c90aa695190db71ffd4c40712540cb63691e56/images/icon/arrowhead.png -------------------------------------------------------------------------------- /images/icon/arrowleft.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moewhite19/about/95c90aa695190db71ffd4c40712540cb63691e56/images/icon/arrowleft.png -------------------------------------------------------------------------------- /images/icon/arrowright.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moewhite19/about/95c90aa695190db71ffd4c40712540cb63691e56/images/icon/arrowright.png -------------------------------------------------------------------------------- /images/icon/bilibili.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moewhite19/about/95c90aa695190db71ffd4c40712540cb63691e56/images/icon/bilibili.png -------------------------------------------------------------------------------- /images/icon/blog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moewhite19/about/95c90aa695190db71ffd4c40712540cb63691e56/images/icon/blog.png -------------------------------------------------------------------------------- /images/icon/dingding.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moewhite19/about/95c90aa695190db71ffd4c40712540cb63691e56/images/icon/dingding.png -------------------------------------------------------------------------------- /images/icon/email.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moewhite19/about/95c90aa695190db71ffd4c40712540cb63691e56/images/icon/email.png -------------------------------------------------------------------------------- /images/icon/facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moewhite19/about/95c90aa695190db71ffd4c40712540cb63691e56/images/icon/facebook.png -------------------------------------------------------------------------------- /images/icon/file.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moewhite19/about/95c90aa695190db71ffd4c40712540cb63691e56/images/icon/file.png -------------------------------------------------------------------------------- /images/icon/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moewhite19/about/95c90aa695190db71ffd4c40712540cb63691e56/images/icon/github.png -------------------------------------------------------------------------------- /images/icon/github_white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moewhite19/about/95c90aa695190db71ffd4c40712540cb63691e56/images/icon/github_white.png -------------------------------------------------------------------------------- /images/icon/google.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moewhite19/about/95c90aa695190db71ffd4c40712540cb63691e56/images/icon/google.png -------------------------------------------------------------------------------- /images/icon/pan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moewhite19/about/95c90aa695190db71ffd4c40712540cb63691e56/images/icon/pan.png -------------------------------------------------------------------------------- /images/icon/qie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moewhite19/about/95c90aa695190db71ffd4c40712540cb63691e56/images/icon/qie.png -------------------------------------------------------------------------------- /images/icon/qq.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moewhite19/about/95c90aa695190db71ffd4c40712540cb63691e56/images/icon/qq.png -------------------------------------------------------------------------------- /images/icon/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moewhite19/about/95c90aa695190db71ffd4c40712540cb63691e56/images/icon/twitter.png -------------------------------------------------------------------------------- /images/mp/mplayer_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moewhite19/about/95c90aa695190db71ffd4c40712540cb63691e56/images/mp/mplayer_bg.png -------------------------------------------------------------------------------- /images/mp/mplayer_error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moewhite19/about/95c90aa695190db71ffd4c40712540cb63691e56/images/mp/mplayer_error.png -------------------------------------------------------------------------------- /images/null.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moewhite19/about/95c90aa695190db71ffd4c40712540cb63691e56/images/null.jpg -------------------------------------------------------------------------------- /images/pic/ex.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moewhite19/about/95c90aa695190db71ffd4c40712540cb63691e56/images/pic/ex.jpg -------------------------------------------------------------------------------- /images/pic/head.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moewhite19/about/95c90aa695190db71ffd4c40712540cb63691e56/images/pic/head.jpg -------------------------------------------------------------------------------- /images/pic/pic_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moewhite19/about/95c90aa695190db71ffd4c40712540cb63691e56/images/pic/pic_1.jpg -------------------------------------------------------------------------------- /images/pic/pic_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moewhite19/about/95c90aa695190db71ffd4c40712540cb63691e56/images/pic/pic_2.jpg -------------------------------------------------------------------------------- /images/pic/pic_3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moewhite19/about/95c90aa695190db71ffd4c40712540cb63691e56/images/pic/pic_3.jpg -------------------------------------------------------------------------------- /images/pic/pic_4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moewhite19/about/95c90aa695190db71ffd4c40712540cb63691e56/images/pic/pic_4.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | About.依玖梦白 7 | 8 | 9 | 10 | 11 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |

26 | 27 |

28 |

29 |

30 |

31 | 41 |

42 |

43 |

44 |

50 |

51 |

52 |

53 |

54 |

55 |

56 |

57 | 58 | 59 | 60 |

GitHub

61 | 62 | 63 | 64 | 65 | 66 |

哔哩哔哩

67 | 68 | 69 | 70 | 71 | 72 |

WhiteG

73 | 74 | 75 | 80 | 85 | 94 | 95 |

96 |

97 |

依玖梦白

98 |

名为小樱花，意为白罂粟

99 |

100 |

101 |

为世界献上美好祝福

102 |

愿世界祝福我

103 |

104 |

105 |

106 | 107 |

108 |

109 |

110 |

111 |

112 |

113 |

114 |

115 |

116 |

117 |

118 |

神眷之櫻花

119 |

120 |

我总是忍不住回想起那座城市的夜晚

121 |

122 |

灯火燃成的篝火

123 |

我坐在天台上时光短促又漫长

124 |

风从我的耳边流过带来整个世界的声音

125 |

126 |

风中

127 |

128 |

有人弹唱

129 |

130 |

有人舞蹈

131 |

132 |

有人相爱

133 |

134 |

135 |

136 | 137 |

138 | 139 |

140 | 141 |

142 |

144 |
145 |
04.24
146 |
和Sakura去东京天空树，
147 |
世界上最暖和的地方，
148 |
在天空树的顶上。
149 |
150 |
153 |
154 |
04.26
155 |
和Sakura去明治神宫，
156 |
有人在那里举办婚礼。
157 |
158 |
161 |
162 |
04.25
163 |
和Sakura去迪士尼，
164 |
鬼屋很可怕，
165 |
但是有Sakura在，
166 |
所以不可怕。
167 |
168 |
171 |
172 |
173 |
E.N.D
174 |
Sakura
175 |
最好了
176 |
BGM: 最后的旅行 177 |
178 |
179 |
182 |
183 |
184 |
世界很温柔.....
185 |
我很喜欢这样的世界
186 |
但他不喜欢我
187 |
188 |

191 |

192 | 193 |

194 |

195 |

196 |

197 |

198 |

199 |

200 | 201 |

202 |

203 |

Something Of Hobby

204 |

206 | 207 |
208 |
世界好大啊
209 |
原来外面的时间
210 |
是这个这样子啊
211 | 212 |
214 | 215 |
我无所谓喜不喜欢,既然Sakura不喜欢,那就杀掉好了。
216 | 217 |
219 | 220 |
221 |
我们都是小怪兽
222 |
有一天会被正义的奥特曼杀死。
223 | 224 |
226 | 227 |
Sakura&Eriiの小黄鸭
228 | 229 | 230 |
232 | 233 | 234 | 235 | 236 |

282 |

283 |

284 | 285 |

Contact With Me

286 |

287 |

289 | 歌单 290 |
292 | 企鹅 293 |
295 | 私云 296 |
298 | 邮箱 299 |

301 |

302 |

303 |

©2016-2022 Powered by 304 |
Cononico's 305 | 绘枫和畅 | 0936zz | MoeWhite19 依玖梦白
307 | 308 |
时间
309 | 310 |

311 |

312 | 313 |

314 |

315 |

316 |

317 |

318 |

名字

319 |

歌手

320 |

00:00/00:00

321 |

322 |

323 | 324 | 325 | 326 | 327 |

328 | 329 |

330 |

331 |

332 |

333 |

334 |

335 |

336 |

337 |

338 | 342 |

343 |

344 |

345 | 346 |

347 | 350 |

351 |

352 | 353 | 354 | 355 | 356 | 357 | 358 | 359 | 360 | 361 |

歌名	歌手	时长

362 |

363 |

364 | 365 | 366 | 367 | 368 | 369 | 370 | 371 | -------------------------------------------------------------------------------- /js/about.js: -------------------------------------------------------------------------------- 1 | indexs = 0; 2 | indexs02 = 0; 3 | var startTime; 4 | var flags = {}; 5 | 6 | //然并卵的入口 7 | function about_main() { 8 | //加载时间计时开始 9 | startTime = new timer; 10 | //然并卵的检测分辨率 11 | if (w < 500) { 12 | alert('当前屏幕分辨率过低，可能无法显示全部内容'); 13 | } 14 | //测试用用 15 | if (debug) logout('测试'); 16 | //阻止手势 17 | /*document.querySelector('body').addEventListener('touchstart', function (ev) { 18 | event.preventDefault(); 19 | });*/ 20 | loading(); 21 | lastInfo(); 22 | } 23 | 24 | //加载动画 25 | function loading() { 26 | //坑未填 27 | //warp.style.display = "none"; 28 | /*loadiv.style.display = "unset"; 29 | loadh.src = "images/pic/head.jpg"; 30 | loadiv.style.width = "100%"; 31 | loadiv.style.height = "100%"; 32 | loadiv.style.opacity = "1"; 33 | loadh.style.opacity = "0"; 34 | setTimeout("loadh.style.opacity = '1'", 2500);*/ 35 | } 36 | 37 | 38 | //加载完成后运行 39 | function loaddone() { 40 | console.log("网页加载耗时" + startTime.stop() / 1000 + "秒"); 41 | if (w < 750) { 42 | cycle_b(false); 43 | } 44 | addClick() //绑定按键 45 | //player.play(0, 0); //自动播放音乐 46 | } 47 | 48 | //淡入文字 49 | indexs01 = 0; 50 | var box01_p = document.getElementById('box01_text').children; 51 | for (var i = 0; i < box01_p.length; i++) { 52 | box01_p[i].style.opacity = '0'; 53 | } 54 | boxOneTimer = setInterval(boxOne, 2400); 55 | 56 | function boxOne() { 57 | if (indexs != 0) { 58 | //暂无 59 | } else if (indexs01 < box01_p.length) { 60 | box01_p[indexs01].style.opacity = '1'; 61 | indexs01++; 62 | } else { 63 | clearInterval(boxOneTimer); 64 | } 65 | } 66 | 67 | var gitMove = document.getElementById('github_a'); 68 | var weiboMove = document.getElementById('weibo_a'); 69 | var blogMove = document.getElementById('blog_a'); 70 | //第一屏文字加载 71 | var f_btn = document.getElementById("float_btn").children; 72 | var nav_ul = document.getElementById('nav_ul').children; 73 | var wrapBox = document.getElementById("wrapBox"); 74 | var foot = document.getElementById("foot"); 75 | var arrow = document.getElementById("arrow_img"); 76 | var boxs = document.getElementsByClassName("box"); 77 | var process = document.getElementById('bar_container').children; //进度条 78 | var box02_text = document.getElementById('box02_text').children; //第二屏文字 79 | var box02_timer; 80 | 81 | function headclick() { 82 | var ran = RandomNum(-360, 360); 83 | cycle(ran, 300); 84 | setTimeout("cycle(" + ran + ",200);", 2250) 85 | 86 | } 87 | 88 | //气泡旋转 a为角度b为轴距 89 | function cycle(a, b) { 90 | var cycarr = document.getElementsByClassName("cycle_a"); 91 | var aa = a; 92 | if (b == undefined) b = 200; 93 | for (var i = 0; i < cycarr.length; i++) { 94 | aa += 120; 95 | cycarr[i].style.animation = "unset" 96 | cycarr[i].style.transform = "rotate(" + (aa - (aa * 2)) + "deg) translateX(+" + b + "px) rotate(" + aa + "deg)"; 97 | } 98 | } 99 | //旧气泡选择? 100 | function cycle2(a, b) { 101 | var cycarr = document.getElementsByClassName("cycle_a"); 102 | var aa = a; 103 | if (b == undefined) b = 200; 104 | for (var i = 0; i < cycarr.length; i++) { 105 | aa += 120; 106 | cycarr[i].style.animation = "unset" 107 | cycarr[i].style.transform = "rotate(" + (aa - (aa * 2)) + "deg) translateX(+" + b + "px) rotate(" + aa + "deg)"; 108 | } 109 | } 110 | 111 | //气泡变形 112 | var cycle_b_flag = false; 113 | 114 | function cycle_b(b) { 115 | var cyc = byid("cycle_item"); 116 | if (b != undefined) cycle_b_flag = b; 117 | if (cycle_b_flag = !cycle_b_flag) { 118 | 119 | cyc.classList.add("cycle_item_b") 120 | 121 | } else { 122 | cyc.classList.remove("cycle_item_b") 123 | } 124 | } 125 | 126 | //第二屏动画 127 | function boxTow() { 128 | if (indexs != 1) { 129 | //暂无 130 | } else if (indexs02 >= 0 && indexs02 < box02_text.length) { 131 | box02_text[indexs02].style.right = '0px'; 132 | indexs02++; 133 | // console.log(indexs02)r 134 | } else { 135 | clearInterval(box02_timer); 136 | } 137 | } 138 | 139 | //滚动函数 140 | function divMove(overHeight) { 141 | var wrapBox = document.getElementById("wrapBox"); 142 | if (overHeight == 4) { 143 | wrapBox.style.top = (-h * 3 - foot.offsetHeight) + "px"; 144 | } else { 145 | wrapBox.style.top = -indexs * h + "px"; 146 | } 147 | } 148 | 149 | //滚动函数 150 | function btnChange(index, flag, speed) { 151 | var height = window.innerHeight; 152 | var fh = foot.offsetHeight; 153 | for (var n = 0; n < f_btn.length; n++) { 154 | f_btn[n].classList.remove("btn_on") 155 | } 156 | 157 | for (var n = 0; n < nav_ul.length; n++) { 158 | nav_ul[n].classList.remove("nav_li_on") 159 | } 160 | 161 | if (flag) { 162 | if (index <= 0) { 163 | indexs = 0; 164 | f_btn[0].classList.add("btn_on") 165 | nav_ul[0].classList.add("nav_li_on") 166 | divMove(indexs); 167 | } else if (index > 0 && index <= 3) { 168 | f_btn[index].classList.add("btn_on") 169 | nav_ul[index].classList.add("nav_li_on") 170 | divMove(indexs); 171 | } else if (index == 4) { 172 | indexs = 4; 173 | divMove(indexs); 174 | nav_ul[index].classList.add("nav_li_on") 175 | } else { 176 | indexs = 4; 177 | } 178 | } else { 179 | if (index <= 0) { 180 | indexs = 0; 181 | f_btn[0].classList.add("btn_on") 182 | nav_ul[0].classList.add("nav_li_on") 183 | wrapBox.style.top = "0"; 184 | } else if (index > 0 && index <= 3) { 185 | f_btn[index].classList.add("btn_on") 186 | nav_ul[index].classList.add("nav_li_on") 187 | wrapBox.style.top = (-indexs * 100) + "%"; 188 | } else if (index == 4) { 189 | indexs = 4; 190 | wrapBox.style.top = (-height * 3 - fh) + "px"; 191 | nav_ul[index].classList.add("nav_li_on") 192 | } else { 193 | indexs = 4; 194 | } 195 | } 196 | if (indexs == 1 && !flags.box02) { 197 | //第二屏动画 198 | for (var i = 0; i < process.length; i++) { 199 | process[i].className += ' active'; 200 | } 201 | box02_timer = setInterval(boxTow, 1100); 202 | flags.box02 = true; 203 | indexs02 = 0; 204 | /* for(var i = 0; i < box02_text.length; i++) { 205 | box02_text[i].style.right = "-100%"; 206 | }*/ 207 | } else if (indexs == 2) { 208 | setTime_li() 209 | } 210 | if (indexs > 3) { 211 | arrow.style.bottom = "-50px" 212 | } else { 213 | arrow.style.bottom = "50px" 214 | } 215 | } 216 | 217 | //时间轴翻页 218 | var e_li = document.getElementById('timeUl').children; 219 | var li_times = 0; 220 | var left_div = document.getElementById('left_div'); 221 | var right_div = document.getElementById('right_div'); 222 | left_div.onclick = function () { 223 | if (li_times > 0) { 224 | li_times--; 225 | setTime_li(); 226 | } 227 | } 228 | 229 | right_div.onclick = function () { 230 | if (li_times < e_li.length - 2) { 231 | li_times++; 232 | setTime_li(); 233 | } 234 | } 235 | 236 | function setTime_li() { 237 | var ii = document.getElementById('timeUl').children.length 238 | for (var i = 0; i < e_li.length; i++) { 239 | e_li[i].style.width = 100 / e_li.length + "%"; 240 | } 241 | document.getElementById('timeUl').style.width = e_li.length * 40 + "%"; 242 | var i = e_li[0].offsetWidth * li_times; 243 | document.getElementById('timeUl').style.left = 20 - i + 'px'; 244 | } 245 | 246 | //触屏手势事件 247 | window.addEventListener('touchstart', touchStart, false); 248 | window.addEventListener('touchmove', touchMove, false); 249 | window.addEventListener('touchend', touchEnd, false); 250 | var touchO = { 251 | startY: 0, 252 | endY: 0, 253 | oldY: 0, 254 | flag: 0, 255 | startTop: 0, 256 | } 257 | 258 | function touchStart(event) { 259 | if (touchO.flag == 0) { 260 | ; 261 | wrapBox.classList.add("warpBox_tochMoveing"); 262 | touchO.startY = event.touches[0].clientY; 263 | touchO.startTop = -indexs * 100; 264 | touchO.flag = 1; 265 | } 266 | } 267 | 268 | function touchMove(event) { 269 | if (touchO.flag == 1) { 270 | touchO.endY = event.touches[0].clientY; 271 | var movesize = touchO.endY - touchO.startY; 272 | wrapBox.style.top = touchO.startTop + (movesize / h * 100) + "%"; 273 | } 274 | } 275 | 276 | function touchEnd(event) { 277 | if (touchO.flag == 1) { 278 | touchO.flag = 2; 279 | wrapBox.classList.remove("warpBox_tochMoveing"); 280 | if (touchO.oldY == touchO.endY) { 281 | return; 282 | } 283 | touchO.oldY = touchO.endY; 284 | if (touchO.endY - touchO.startY > 100) { 285 | //向上滑动 286 | indexs = indexs - 1; 287 | btnChange(indexs, true, 1); 288 | } else if (touchO.startY - touchO.endY > 100) { 289 | //向下滑动 290 | indexs = indexs + 1; 291 | btnChange(indexs, true, 1); 292 | } else { 293 | btnChange(indexs, true, 1); 294 | } 295 | touchO.flag = -1; 296 | setTimeout("touchO.flag=0", 900); 297 | } 298 | } 299 | 300 | function addClick() { 301 | huam = byid("huam") 302 | //浮动点击事件 303 | for (var i = 0; i < f_btn.length; i++) { 304 | f_btn[i].indexs = i; 305 | f_btn[i].onclick = function () { 306 | var speed = Math.abs(indexs - this.indexs); 307 | indexs = this.indexs; 308 | btnChange(indexs, true, speed); 309 | } 310 | } 311 | 312 | //浮动nav事件 313 | for (var i = 0; i < nav_ul.length; i++) { 314 | nav_ul[i].indexs = i; 315 | nav_ul[i].onclick = function () { 316 | var speed = Math.abs(indexs - this.indexs); 317 | indexs = this.indexs; 318 | btnChange(indexs, true, speed); 319 | } 320 | } 321 | 322 | //箭头点击事件 323 | arrow.onclick = function () { 324 | indexs++ 325 | btnChange(indexs, true, 1); 326 | } 327 | var oB = true; 328 | 329 | //鼠标滑动事件 330 | var scrollFunc = function (e) { 331 | var direct = 0; 332 | e = e || window.event; 333 | if (e.wheelDelta) { //IE/Opera/Chrome 334 | if (oB == true) { 335 | //向下滑动 336 | if (e.wheelDelta >= 120) { 337 | oB = false; 338 | indexs--; 339 | btnChange(indexs, true, 1); 340 | setTimeout(function () { 341 | oB = true; 342 | }, 700); 343 | 344 | } else if (e.wheelDelta <= -120) { 345 | oB = false; 346 | //向上滑动 347 | indexs++; 348 | btnChange(indexs, true, 1); 349 | setTimeout(function () { 350 | oB = true; 351 | }, 700); 352 | } 353 | } 354 | 355 | } else if (e.detail) { //Firefox 356 | if (oB) { 357 | if (e.detail >= 3) { 358 | oB = false; 359 | indexs++; 360 | btnChange(indexs, true, 1); 361 | setTimeout(function () { 362 | oB = true; 363 | }, 700); 364 | } else if (e.detail <= -3) { 365 | oB = false; 366 | indexs--; 367 | btnChange(indexs, true, 1); 368 | setTimeout(function () { 369 | oB = true; 370 | }, 700); 371 | } 372 | } 373 | } 374 | } 375 | 376 | /*注册事件*/ 377 | if (document.addEventListener) { 378 | document.addEventListener('DOMMouseScroll', scrollFunc, false); //W3C 379 | } 380 | window.onmousewheel = document.onmousewheel = scrollFunc; //IE/Opera/Chrome/Safari 381 | 382 | var iB = true; 383 | //监听窗口改变 384 | window.onresize = function () { 385 | //document.getElementsByTagName("html")[0].style.fontSize = document.documentElement.clientWidth / 20 + 'px'; 386 | h = window.innerHeight; 387 | w = window.innerWidth; 388 | if (w / h >= 1920 / 1080) { 389 | iB = true; 390 | } else { 391 | iB = false; 392 | } 393 | divMove(indexs); 394 | setTime_li() 395 | } 396 | } 397 | 398 | /*计时函数 399 | * 用法 400 | * var time=new timer 401 | * time.stop() 402 | */ 403 | function timer() { 404 | var t = new Date(); 405 | var time = t.getTime(); 406 | this.stop = function () { 407 | var t = new Date(); 408 | return t - time; 409 | }; 410 | }; 411 | 412 | about_main() -------------------------------------------------------------------------------- /js/mp/mplayer-list.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 播放列表 3 | * @type {Array} 4 | * 请用数组来定义总列表 5 | * 再用二维数组定义每个列表 6 | * 其中列表里的每首歌需用对象定义 7 | * 请在每个列表中的第一个元素定义列表信息（必须位于第一位） 8 | * 列表信息必须有一个basic属性，值为true 9 | * 还要有一个name属性，值为列表名称 10 | * 可选参数为singer、image，用于为定义的该属性的歌曲调用 11 | * 每首歌必须有name、src、lrc三个属性 12 | * src为歌曲相对于index.html的相对路径或绝对路径 13 | * 可选singer和image属性 14 | * 在每首歌没有定义singer或image时将使用列表的singer或image 15 | * 请确保一定有一个被定义 16 | * 其中name为歌曲名称 17 | * src为歌曲文件路径 18 | * lrc为歌词，请用\n或\r将每行歌词隔开，否则无法识别 19 | * slrc为歌词文件路径可有可无 20 | */ 21 | //获取网易云音乐 22 | function music163(i) { 23 | return "http://music.163.com/song/media/outer/url?id=" + i + ".mp3" 24 | } 25 | var mplayer_song = [ 26 | [ 27 | { 28 | "basic": true, 29 | "name": "Ricardo", 30 | "singer": "某不知名白狼", 31 | "img": "image/pic/head.jpg" 32 | }, 33 | { 34 | "name": "最后的旅行", 35 | "singer": "Rainton桐", 36 | "img": "http://p1.music.126.net/8qhWDWoNejyMcAAwAm2pNA==/17752714742397400.jpg?param=177y177", 37 | "src": music163("423703394"), 38 | "lrc": "[00:00.00]歌词加载中...", 39 | "slrc": "audio/lrc/zuihoudeluxin.lrc" 40 | }, 41 | { 42 | "name": "樱花的短篇（奏(かなで) ）", 43 | "singer": "千陵安浅", 44 | "img": "http://p1.music.126.net/5boOknJ-Oo1Dr0o2IF690g==/16579535835744609.jpg?param=177y177", 45 | "src": music163("41671021"), 46 | "lrc": "[00:00.00]歌词加载中...", 47 | "slrc": "audio/lrc/eyii.lrc" 48 | }, 49 | { 50 | "name": "依伊-致上杉绘梨衣（《龙族》同人）", 51 | "singer": "琢彻", 52 | "img": "http://p1.music.126.net/J-ciggWVRzfg1zch7sBJNQ==/18198016951733246.jpg?param=177y177", 53 | "src": music163("423015999"), 54 | "lrc": "[00:00.00]歌词加载中...", 55 | "slrc": "audio/lrc/eyii.lrc" 56 | } 57 | ], 58 | [ 59 | { 60 | "basic": true, 61 | "name": "M", 62 | "singer": "某不知名白狼", 63 | "img": "image/pic/head.jpg" 64 | }, 65 | { 66 | "name": "Bad Apple!!!", 67 | "singer": "Alstroemeria", 68 | "img": "http://p1.music.126.net/l6J6zceZI5YtkmD6-PMnmw==/888405395266525.jpg?param=117y117", 69 | "src": music163("22645196"), 70 | //"src": "audio/Alstroemeria_Records-Bad_Apple!!.mp3", 71 | "lrc": "", 72 | "slrc": "audio/lrc/Alstroemeria_Records-Bad_Apple!!.lrc" 73 | } 74 | ], 75 | [ 76 | { 77 | "basic": true, 78 | "name": "Lu", 79 | "singer": "某不知名白狼", 80 | "img": "image/pic/head.jpg" 81 | }, 82 | { 83 | "name": "I'm So Happy", 84 | "singer": "中原龍太郎", 85 | "img": "http://p1.music.126.net/cxjF4-0CX9TXMF50zxgxXg==/2426622162526064.jpg?param=177y177", 86 | "src": music163("26123157"), 87 | "lrc": "", 88 | "slrc": "audio/lrc/happy.lrc" 89 | }, 90 | { 91 | "name": "404", 92 | "singer": "-", 93 | "img": "images/404.jpg", 94 | "src": "audio/404.mp3", 95 | "lrc": "" 96 | }, 97 | { 98 | "name": "Undertale", 99 | "singer": "Toby Fox", 100 | "img": "http://p4.music.126.net/oZe-JSuWYAR8zSa29g9g0g==/3254554423361647.jpg?param=177y177", 101 | "src": music163("39227624"), 102 | "lrc": "" 103 | } 104 | ] 105 | ]; -------------------------------------------------------------------------------- /js/mp/mplayer-main.js: -------------------------------------------------------------------------------- 1 | var modeText = ['顺序播放', '单曲循环', '随机播放', '列表循环']; 2 | var detitle = document.title; 3 | var player = new MPlayer({ 4 | // 容器选择器名称 5 | containerSelector: '.mp', 6 | // 播放列表 7 | songList: mplayer_song, 8 | // 专辑图片错误时显示的图片 9 | defaultImg: 'img/mp/mplayer_error.png', 10 | // 自动播放 11 | autoPlay: false, 12 | // 播放模式(0->顺序播放,1->单曲循环,2->随机播放,3->列表循环(默认)) 13 | playMode: 0, 14 | playList: 0, 15 | playSong: 0, 16 | // 当前歌词距离顶部的距离 17 | lrcTopPos: 34, 18 | // 列表模板，用${变量名}$插入模板变量 19 | listFormat: '${name}$${singer}$${time}$', 20 | // 音量滑块改变事件名称 21 | volSlideEventName: 'change', 22 | // 初始音量 23 | defaultVolume: 80, 24 | // 歌词替代标题 25 | outLrc: true 26 | }, function () { 27 | // 绑定事件 28 | this.on('afterInit', function () { 29 | console.log('播放器初始化完成，正在准备播放'); 30 | }).on('beforePlay', function () { 31 | var $this = this; 32 | var song = $this.getCurrentSong(true); 33 | var songName = song.name + ' - ' + song.singer; 34 | console.log('即将播放' + songName + '，return false;可以取消播放'); 35 | loadlrc(this.getCurrentList, this.getCurrentSong); 36 | }).on('timeUpdate', function () { 37 | var $this = this; 38 | var lrc = $this.getLrc(); 39 | //console.log('当前歌词：' + lrc); 40 | //logout(lrc); 41 | if ($this.settings.outLrc && !$this.audio.prop('paused')) { 42 | document.title = lrc == undefined ? detitle : lrc; 43 | } else { 44 | document.title = detitle; 45 | } 46 | }).on('end', function () { 47 | var $this = this; 48 | var song = $this.getCurrentSong(true); 49 | var songName = song.name + ' - ' + song.singer; 50 | console.log(songName + '播放完毕，return false;可以取消播放下一曲'); 51 | }).on('mute', function () { 52 | var status = this.getIsMuted() ? '已静音' : '未静音'; 53 | console.log('当前静音状态：' + status); 54 | }).on('changeMode', function () { 55 | var $this = this; 56 | 57 | var mode = modeText[$this.getPlayMode()]; 58 | $this.dom.container.find('.mp-mode').attr('title', mode); 59 | console.log('播放模式已切换为：' + mode); 60 | }); 61 | }); 62 | //$(document.body).append(player.audio); // 测试用 63 | 64 | setEffects(player); 65 | 66 | function setEffects(player) { 67 | // 滑块 68 | player.dom.volRange.nstSlider({ 69 | "left_grip_selector": ".mp-vol-circle", 70 | "value_changed_callback": function (cause, value) { 71 | player.dom.container.find('.mp-vol-current').width(value + '%'); 72 | player.dom.volRange.trigger('change', [value]); 73 | } 74 | }); 75 | player.dom.container.find('.mp-mode').click(function () { 76 | var dom = $(this); 77 | var mode = player.getPlayMode(); 78 | dom.removeClass('mp-mode-' + mode); 79 | mode = mode == 3 ? 0 : mode + 1; 80 | player.changePlayMode(mode); 81 | dom.addClass('mp-mode-' + mode); 82 | }); 83 | player.dom.container.find('.mp-list-toggle').click(function () { 84 | player.dom.container.find('.mp-list-box').toggleClass('mp-list-show'); 85 | }); 86 | player.dom.container.find('.mp-lrc-toggle').click(function () { 87 | player.dom.container.find('.mp-lrc-box').toggleClass('mp-lrc-show'); 88 | }); 89 | player.dom.container.find('.mp-toggle').click(function () { 90 | player.dom.container.toggleClass('mp-show'); 91 | }); 92 | player.dom.container.find('.mp-lrc-close').click(function () { 93 | player.dom.container.find('.mp-lrc-box').removeClass('mp-lrc-show'); 94 | }); 95 | } 96 | 97 | function loadlrc() { 98 | var list = player.getCurrentList(); 99 | var song = player.getCurrentSong(); 100 | if (player.list[list][song].slrc != undefined) { 101 | getURL(player.list[list][song].slrc, (function (str) { 102 | var list = player.getCurrentList(); 103 | var song = player.getCurrentSong(); 104 | lrc = player._parseLrc(str) 105 | player.list[list][song].lrc = lrc; 106 | player._setLrc(lrc); 107 | console.log(list + " " + song + " 下载歌词 "); 108 | player.list[list][song].slrc = undefined; 109 | }), true); 110 | } 111 | } 112 | /** 113 | * @authors 0936zz (zz5840@qq.com) 114 | * @date 2016-08-14 18:35 115 | */ -------------------------------------------------------------------------------- /js/mp/mplayer.js: -------------------------------------------------------------------------------- 1 | /** 2 | * MPlayer音乐播放器 3 | * @authors 0936zz(zz5840@qq.com) 4 | * 本插件依赖：jQuery 1.6及以上 5 | */ 6 | function MPlayer(settings, callback) { 7 | var $this = this; 8 | init(callback); 9 | bindEvents(); 10 | formatData(); 11 | // 切换播放模式 12 | $this.changePlayMode($this.settings.playMode); 13 | // 循环输出列表标题 14 | var listHTML = ''; 15 | $.each($this.list, function (i) { 16 | listHTML += '

' + $this.list[i].listName + '

'; 17 | }); 18 | $this.dom.listTitle.html(listHTML); 19 | $this._setLrc($this.list[0][0].lrc); 20 | // 输出列表 21 | $this.changeList($this.settings.playList); 22 | // afterInit事件 23 | $this._trigger('afterInit'); 24 | // 自动播放 25 | if ($this.settings.autoPlay) { 26 | $this.play($this.settings.playList, $this.settings.playSong); 27 | } else { 28 | $this._setInfo($this.settings.playList, $this.settings.playSong); 29 | } 30 | /** 31 | * 初始化播放器 32 | */ 33 | function init(callback) { 34 | // 设置默认参数 35 | $this.settings = { 36 | playMode: 3, 37 | playList: 0, 38 | playSong: 0, 39 | autoPlay: false, 40 | lrcTopPos: 0, 41 | defaultVolume: 100 42 | }; 43 | $this.callbacks = { 44 | afterInit: null, 45 | beforePlay: null, 46 | timeUpdate: null, 47 | end: null, 48 | mute: null, 49 | changeMode: null 50 | }; 51 | // 合并设置项 52 | $.extend(true, $this.settings, settings); 53 | // 获取container容器 54 | var con = $($this.settings.containerSelector); 55 | // 创建audio标签 56 | $this.audio = $('

').attr({ 57 | 'data-currentLrc': 0, 58 | 'data-currentSong': 0, 59 | 'data-currentList': 0, 60 | 'data-displayList': 0, 61 | 'data-playMode': 0, 62 | 'preload': 'preload' 63 | }); 64 | // 存储dom方便以后使用 65 | $this.dom = { 66 | container: con, 67 | cover: con.find('.mp-cover'), 68 | name: con.find('.mp-name'), 69 | singer: con.find('.mp-singer'), 70 | currentTime: con.find('.mp-time-current'), 71 | allTime: con.find('.mp-time-all'), 72 | prev: con.find('.mp-prev'), 73 | play: con.find('.mp-pause'), 74 | next: con.find('.mp-next'), 75 | vol: con.find('.mp-vol-img'), 76 | volRange: con.find('.mp-vol-range'), 77 | progress: con.find('.mp-pro-current'), 78 | progressAll: con.find('.mp-pro'), 79 | lrc: con.find('.mp-lrc'), 80 | listTitle: con.find('.mp-list-title'), 81 | list: con.find('.mp-list') 82 | }; 83 | $this.settings.lineHeight = parseInt($this.dom.lrc.css('line-height')); 84 | // 计算列表模板的有效元素 85 | $this.settings.listEleName = $.parseHTML($this.settings.listFormat)[0].nodeName.toLowerCase(); 86 | // 调用绑定事件的回调函数 87 | callback.apply($this); 88 | } 89 | 90 | 91 | /** 92 | * 绑定事件 93 | */ 94 | function bindEvents() { 95 | // // 专辑图片加载失败将使用默认图片 96 | /* jquery-2.2.4.js 以上版本失效 97 | $this.dom.cover.error(function () { 98 | $(this).attr('src',$this.settings.defaultImg); 99 | }); 100 | */ 101 | // 上一首 102 | $this.dom.prev.click(function () { 103 | $this.prev(); 104 | }); 105 | // 下一首 106 | $this.dom.next.click(function () { 107 | $this.next(); 108 | }); 109 | // 播放 or 暂停 110 | $this.dom.play.click(function () { 111 | if ($this.audio.prop('paused')) { 112 | $this.play(); 113 | } else { 114 | $this.pause(); 115 | } 116 | }); 117 | // 改变音量 118 | $this.dom.volRange.on($this.settings.volSlideEventName, function (event, val) { 119 | $this.audio.prop('volume', val / 100); 120 | }); 121 | // 静音 122 | $this.dom.vol.click(function () { 123 | $this.toggleMute(); 124 | }); 125 | // 列表切换 126 | $this.dom.listTitle.on('click', 'li', function () { 127 | // 获取索引 128 | var list = $(this).index(); 129 | $this.changeList(list); 130 | }); 131 | $this.audio.on('canplay', function () { 132 | setTime($this.getDuration(), $this.dom.allTime); 133 | }).on('timeupdate', function () { 134 | var currentTime = $this.getCurrentTime(); 135 | // 修改时间 136 | setTime(currentTime, $this.dom.currentTime); 137 | // 更新进度条 138 | $this.dom.progress.css('width', $this.getPercent() * 100 + '%'); 139 | // 更新歌词 140 | var dataLrc = parseInt($this.audio.attr('data-currentLrc')); 141 | var currentLrc = $this.getLrc(currentTime, false); 142 | // 判断是否需要切换歌词 143 | if (dataLrc != currentLrc) { 144 | // 设置当前歌词 145 | $this.audio.attr('data-currentLrc', currentLrc); 146 | // 删除以前添加的class 147 | $this.dom.lrc.find('.mp-lrc-current').removeClass('mp-lrc-current'); 148 | // 添加class 149 | var position = $this.dom.lrc.find('.mp-lrc-time-' + currentLrc).addClass('mp-lrc-current').position(); 150 | // 计算滚动的高度 151 | var positionTop = position ? position.top : 0; 152 | var top = $this.dom.lrc.scrollTop(); 153 | // 动画滚动 154 | $this.dom.lrc.animate({ 155 | scrollTop: top + positionTop - $this.settings.lrcTopPos 156 | }, 200); 157 | } 158 | // 触发onTimeUpdate事件 159 | $this._trigger('timeUpdate'); 160 | }).on('ended', function () { 161 | // 触发onEnd事件 162 | var flag = $this._trigger('end'); 163 | if (flag !== false) { 164 | next(); 165 | } 166 | }); 167 | // 计算列表模板的有效元素 168 | var eleName = $.parseHTML($this.settings.listFormat)[0].nodeName.toLowerCase(); 169 | $this.dom.list.on('click', eleName, function () { 170 | $this.play(parseInt($this.audio.attr('data-displayList')), $(this).index()); 171 | }); 172 | // 进度条 173 | $this.dom.progressAll.click(function (event) { 174 | var width = $(this).width(); 175 | var offset = Math.min(Math.max(event.offsetX, 0), width); 176 | var percent = offset / width; 177 | $this.setCurrentTime($this.getDuration() * percent); 178 | }); 179 | // 列表点击切换歌曲 180 | $this.dom.list.on('click', $this.settings.listEleName, function () { 181 | $this.play(parseInt($this.audio.attr('data-displayList')), $(this).index()); 182 | }); 183 | // 禁止点击 184 | $this.dom.container.on('mousedown', '.mp-disabled', function () { 185 | return false; 186 | }) 187 | } 188 | 189 | /** 190 | * 格式化数据 191 | */ 192 | function formatData() { 193 | $this.list = []; 194 | var list = $this.settings.songList; 195 | for (var i = 0; i < list.length; i++) { 196 | $this.list[i] = []; 197 | // 寻找列表公用数据 198 | for (j in list[i]) { 199 | if (list[i][j].basic) { 200 | $this.list[i].listName = list[i][j].name || '-'; 201 | $this.list[i].singerName = list[i][j].singer || '-'; 202 | $this.list[i].imgSrc = list[i][j].img || $this.settings.defaultImg; 203 | list[i].splice(j, 1); 204 | break; 205 | } 206 | } 207 | // 添加歌曲 208 | $this.addSong(list[i], i); 209 | } 210 | } 211 | 212 | /** 213 | * 计算正常播放下一曲 214 | */ 215 | function next() { 216 | var mode = parseInt($this.audio.attr('data-playMode')); 217 | var songNum = $this.getSongNum(); 218 | switch (mode) { 219 | case 0: // 顺序 220 | var currentSong = $this.audio.attr('data-currentSong'); 221 | if (currentSong != songNum - 1) { 222 | $this.next(); 223 | } else { 224 | $this.pause(); 225 | } 226 | break; 227 | case 1: // 单曲 228 | $this.play(); 229 | break; 230 | case 2: // 随机 231 | case 3: 232 | default: // 列表 233 | $this.next(); 234 | break; 235 | } 236 | } 237 | 238 | /** 239 | * 设置时间 240 | * @param time {number} 时间，单位秒 241 | * @param ele {jQuery} 元素 242 | */ 243 | function setTime(time, ele) { 244 | var minute = fillByZero(Math.floor(time / 60), 2); 245 | var second = fillByZero(Math.floor(time % 60), 2); 246 | ele.html(minute + ':' + second); 247 | } 248 | 249 | /** 250 | * 用0填充 251 | * @param num 252 | * @param digit 253 | * @returns {string|number} 254 | */ 255 | function fillByZero(num, digit) { 256 | num = String(num); 257 | for (var i = num.length; i < digit; i++) { 258 | num = '0' + num; 259 | } 260 | return num; 261 | } 262 | } 263 | $.extend(MPlayer.prototype, { 264 | /** 265 | * 更换歌词 266 | * @param lrc 267 | * @private 268 | */ 269 | _setLrc: function (lrc) { 270 | var $this = this; 271 | $this.dom.lrc.html('').scrollTop(0); 272 | $.each(lrc, function (index, val) { 273 | $this.dom.lrc.append($('

').addClass('mp-lrc-time-' + index).html(val)); 274 | }); 275 | }, 276 | /** 277 | * 更换播放器的歌曲信息 278 | * @param list 279 | * @param song 280 | * @private 281 | */ 282 | _setInfo: function (list, song) { 283 | var $this = this; 284 | var songInfo = $this.getInfo(list, song); 285 | // 设置当前播放歌曲 286 | $this.audio.attr({ 287 | 'src': songInfo.src, 288 | 'data-currentList': list, 289 | 'data-currentSong': song 290 | }); 291 | // 输出歌名和歌手 292 | $this.dom.name.html(songInfo.name); 293 | $this.dom.singer.html(songInfo.singer); 294 | // 更换封面 295 | $this.dom.cover.attr('src', songInfo.img); 296 | // 更换歌词 297 | $this._setLrc(songInfo.lrc); 298 | // 进度条归零 299 | $this.dom.progress.width(0); 300 | // 列表添加样式 301 | if (list == $this.getDisplayList()) { 302 | $this._setCurrent(song); 303 | } 304 | }, 305 | /** 306 | * 为当前播放歌曲添加class 307 | * @param song 308 | * @private 309 | */ 310 | _setCurrent: function (song) { 311 | var $this = this; 312 | var items = $this.dom.list; 313 | items.find('.mp-list-current').removeClass('mp-list-current'); 314 | items.children().eq(song).addClass('mp-list-current'); 315 | }, 316 | /** 317 | * 解析歌词字符串 318 | * @param lrc 319 | * @returns {Object} 320 | * @private 321 | */ 322 | _parseLrc: function (lrc) { 323 | var reg = /\[(\d{2})(:|:)(\d{2})(.|\.)(\d{2})\]([^\[]+)/g; 324 | var obj = {}; 325 | // 匹配歌词 326 | while (true) { 327 | var result = reg.exec(lrc); 328 | if (!result) { 329 | break; 330 | } 331 | var time = Math.round((parseInt(result[1]) * 60 + parseInt(result[3]) + parseInt(result[5]) / 100) * 1000); 332 | obj[time] = $.trim(result[6]) || ' '; 333 | } 334 | return obj; 335 | }, 336 | /** 337 | * 触发事件 338 | * @param name 339 | * @private 340 | */ 341 | _trigger: function (name) { 342 | var $this = this; 343 | return $this.callbacks[name] && $this.callbacks[name].apply($this); 344 | }, 345 | /** 346 | * 获取随机数 347 | * @param min 348 | * @param max 349 | * @returns {number} 350 | * @private 351 | */ 352 | _rand: function (min, max) { 353 | if (max === undefined) { 354 | max = min; 355 | min = 0; 356 | } 357 | var r = 0; 358 | do { 359 | r = Math.round(Math.random() * max); 360 | } while (r < min); 361 | return r; 362 | }, 363 | /** 364 | * 下一首 365 | */ 366 | next: function () { 367 | var $this = this; 368 | var mode = $this.getPlayMode(); 369 | var songNum = $this.getSongNum(); 370 | switch (mode) { 371 | case 2: // 随机 372 | var song = $this._rand(0, songNum - 1); 373 | $this.play(song); 374 | break; 375 | case 0: // 顺序 376 | case 3: // 列表 377 | case 1: // 单曲 378 | default: 379 | var nextSong = $this.getCurrentSong() + 1; 380 | if (nextSong >= songNum) { 381 | nextSong = 0; 382 | } 383 | $this.play(nextSong); 384 | break; 385 | } 386 | }, 387 | /** 388 | * 上一首 389 | */ 390 | prev: function () { 391 | var $this = this; 392 | var lastSong = $this.getCurrentSong() - 1; 393 | var currentList = $this.getCurrentList(true); 394 | if (lastSong < 0) { 395 | lastSong = currentList.num - 1; 396 | } 397 | $this.play(lastSong); 398 | }, 399 | /** 400 | * 播放 401 | * @param list 可选，详细见下方说明 402 | * @param song 可选，详细见下方说明 403 | * 注：此函数有三种传参形式 404 | * 1. 不传任何参数：代表播放已暂停的歌曲，如果正在播放就什么也不做 405 | * 2. 只传一个参数：代表播放当前列表的第list首歌 406 | * 3. 两个参数都传：代表播放第list个列表的第song首歌 407 | */ 408 | play: function (list, song) { 409 | var $this = this; 410 | if (list === undefined && song === undefined) { 411 | var flag = $this._trigger('beforePlay'); 412 | if (flag === false) { 413 | return false; 414 | } else { 415 | $this.audio.get(0).play(); 416 | $this.dom.play.addClass('mp-play'); 417 | } 418 | } else if (list !== undefined && song === undefined) { 419 | song = list; 420 | list = $this.getCurrentList(); 421 | $this.play(list, song); 422 | } else { 423 | var num = $this.getSongNum(list); 424 | if (song >= num) { 425 | song = num - 1; 426 | } else if (song < 0) { 427 | song = 0; 428 | } 429 | $this._setInfo(list, song); 430 | $this.play(); 431 | } 432 | }, 433 | /** 434 | * 暂停，如果已暂停就什么也不做 435 | */ 436 | pause: function () { 437 | var $this = this; 438 | $this.dom.play.removeClass('mp-play'); 439 | $this.audio.get(0).pause(); 440 | }, 441 | /** 442 | * 获取当前歌曲的总时长 443 | * @returns {number} 444 | */ 445 | getDuration: function () { 446 | return this.audio.prop('duration'); 447 | }, 448 | /** 449 | * 获取正在播放歌曲的当前时间 450 | * @returns {number} 451 | */ 452 | getCurrentTime: function () { 453 | return this.audio.prop('currentTime'); 454 | }, 455 | /** 456 | * 获取当前歌曲已播放的百分比 457 | * @returns {number} 458 | */ 459 | getPercent: function () { 460 | return this.getCurrentTime() / this.getDuration(); 461 | }, 462 | /** 463 | * 设置歌曲正在播放的时间 464 | * @param time {number} 时间，单位秒 465 | */ 466 | setCurrentTime: function (time) { 467 | var $this = this; 468 | time = Math.min(time, $this.getDuration()); 469 | time = Math.max(0, time); 470 | var buffered = $this.audio.get(0).buffered; 471 | var start = buffered.start(0); 472 | var end = buffered.end(0); 473 | time = Math.max(start, Math.min(end, time)); 474 | $this.audio.prop('currentTime', time); 475 | }, 476 | /** 477 | * 向列表最后添加歌曲 478 | * @param data {Array} 歌曲信息列表 479 | * @param list {number} 可选，不传代表当前列表 480 | */ 481 | addSong: function (data, list) { 482 | var $this = this; 483 | list = list !== undefined ? list : $this.getCurrentList(); 484 | if (data instanceof Array) { 485 | for (var i = 0; i < data.length; i++) { 486 | $this.addSong(data[i], list); 487 | } 488 | } else { 489 | var basic = { 490 | lrc: $this._parseLrc(data.lrc || '-'), 491 | name: data.name || '-', 492 | singer: data.singer || $this.list[list].singerName, 493 | src: data.src || '-', 494 | img: data.img || $this.list[list].imgSrc 495 | }; 496 | var song = $.extend({}, data, basic); 497 | $this.list[list].push(song); 498 | // 更新播放列表 499 | if (list == $this.getCurrentList()) { 500 | $this.changeList(list); 501 | } 502 | } 503 | }, 504 | /** 505 | * 获取列表中歌曲的数目 506 | * @param list {number} 可选，不传代表当前列表 507 | * @returns {number} 508 | */ 509 | getSongNum: function (list) { 510 | var $this = this; 511 | list = list !== undefined ? list : $this.getCurrentList(); 512 | return $this.list[list].length; 513 | }, 514 | /** 515 | * 获取当前播放歌曲的信息 516 | * @param info {boolean|} 可选，默认false，将返回歌曲id，填true可返回详细歌曲信息 517 | * @returns {object|int} 518 | */ 519 | getCurrentSong: function (info) { 520 | var $this = this; 521 | info = info !== undefined ? info : false; 522 | if (info) { 523 | return $this.getInfo(); 524 | } else { 525 | return parseInt($this.audio.attr('data-currentSong')); 526 | } 527 | }, 528 | /** 529 | * 获取当前播放列表的信息 530 | * @param info {boolean} 可选，默认false，将返回列表id，填true可返回详细列表信息 531 | * @returns {object|int} 532 | */ 533 | getCurrentList: function (info) { 534 | var $this = this; 535 | info = info !== undefined ? info : false; 536 | if (info) { 537 | return $this.getList($this.getCurrentList()); 538 | } else { 539 | return parseInt($this.audio.attr('data-currentList')); 540 | } 541 | }, 542 | /** 543 | * 获取当前播放列表的信息 544 | * @param info {boolean} 可选，默认false，将返回列表id，填true可返回详细列表信息 545 | * @returns {object|int} 546 | */ 547 | getDisplayList: function (info) { 548 | var $this = this; 549 | info = info !== undefined ? info : false; 550 | if (info) { 551 | return $this.getList($this.getDisplayList()); 552 | } else { 553 | return parseInt($this.audio.attr('data-displayList')); 554 | } 555 | }, 556 | /** 557 | * 返回指定listID的信息 558 | * @param list 559 | * @returns {{name: (string|*), num, songs: *}} 560 | */ 561 | getList: function (list) { 562 | var $this = this; 563 | var listArr = $this.list[list]; 564 | return { 565 | name: listArr.listName, 566 | num: listArr.length, 567 | songs: listArr 568 | }; 569 | }, 570 | /** 571 | * 获取指定id的歌曲信息 572 | * @param list {number} 列表id 可选，不填代表当前列表 573 | * @param song {number} 歌曲id 可选，不填代表当前歌曲 574 | * 注：当只传一个参数时代表获取列表信息，两个都不传或两个都传代表获取歌曲信息 575 | * @returns {object} 576 | */ 577 | getInfo: function (list, song) { 578 | var $this = this; 579 | list = list !== undefined ? list : $this.getCurrentList(); 580 | song = song !== undefined ? song : $this.getCurrentSong(); 581 | return $this.list[list][song]; 582 | }, 583 | /** 584 | * 通过传入的时间返回指定时间的歌词 585 | * @param time {number} 可选，不传代表当前时间，单位秒 586 | * @param info {boolean} 可选，默认true，将返回歌词字符串，填false返回歌词开始时间（单位：毫秒） 587 | */ 588 | getLrc: function (time, info) { 589 | var $this = this; 590 | info = info !== undefined ? info : true; 591 | time = time !== undefined ? time * 1000 : $this.getCurrentTime() * 1000; 592 | var lrcList = $this.getCurrentSong(true)['lrc']; 593 | var lrc, lastIndex = 0; 594 | $.each(lrcList, function (index) { 595 | if (time < index) { 596 | return false; 597 | } 598 | lastIndex = index; 599 | }); 600 | lrc = lastIndex; 601 | return info ? $this.getCurrentSong(true).lrc[lrc] : lrc; 602 | }, 603 | /** 604 | * 更换显示的列表 605 | * @param list {number} 列表id 606 | */ 607 | changeList: function (list) { 608 | var $this = this; 609 | // 设置列表活动类 610 | $this.dom.listTitle.find('.mp-list-title-current').removeClass('mp-list-title-current'); 611 | $this.dom.listTitle.find('.mp-list-title-' + list).addClass('mp-list-title-current'); 612 | // 切换audio标签的显示列表 613 | $this.audio.attr('data-displayList', list); 614 | // 清除播放列表 615 | $this.dom.list.html(''); 616 | // 获取列表模板 617 | var format = $this.settings.listFormat; 618 | // 匹配正则 619 | var reg = /\$\{(\w+)}\$/g; 620 | for (var i = 0; i < $this.list[list].length; i++) { 621 | var content = format; 622 | while (true) { 623 | var result = reg.exec(format); 624 | if (!result) { 625 | break; 626 | } 627 | // 替换模板里的${}$为实际数据 628 | content = content.replace(result[0], $this.list[list][i][result[1]] || '-'); 629 | } 630 | // 输出列表 631 | $this.dom.list.append(content); 632 | } 633 | // 为列表当前播放歌曲添加样式 634 | if (list == $this.getCurrentList()) { 635 | $this._setCurrent($this.getCurrentSong()); 636 | } 637 | }, 638 | /** 639 | * 更换播放模式 640 | * @param mode {number} 641 | */ 642 | changePlayMode: function (mode) { 643 | var $this = this; 644 | mode = Math.max(Math.min(parseInt(mode), 3), 0); 645 | $this.audio.attr('data-playMode', mode); 646 | $this._trigger('changeMode'); 647 | }, 648 | /** 649 | * 获取播放模式(0->顺序播放 1->列表循环 2->单曲循环 3->随机播放) 650 | * @returns {number} 651 | */ 652 | getPlayMode: function () { 653 | return parseInt(this.audio.attr('data-playMode')); 654 | }, 655 | /** 656 | * 获取是否静音 657 | * @returns {boolean} 658 | */ 659 | getIsMuted: function () { 660 | return this.audio.prop('muted'); 661 | }, 662 | /** 663 | * 静音，如果已静音就什么都不做 664 | */ 665 | mute: function () { 666 | var $this = this; 667 | $this.dom.vol.addClass('mp-mute'); 668 | $this.audio.prop('muted', true); 669 | $this._trigger('mute'); 670 | }, 671 | /** 672 | * 取消静音，如果没有静音就什么都不做 673 | */ 674 | cancelMute: function () { 675 | var $this = this; 676 | $this.audio.prop('muted', false); 677 | $this.dom.vol.removeClass('mp-mute'); 678 | $this._trigger('mute'); 679 | }, 680 | /** 681 | * 切换静音状态 682 | */ 683 | toggleMute: function () { 684 | var $this = this; 685 | if ($this.getIsMuted()) { 686 | $this.cancelMute(); 687 | } else { 688 | $this.mute(); 689 | } 690 | }, 691 | /** 692 | * 绑定事件 693 | * @param name string 694 | * @param fun function 695 | * @returns {MPlayer} 696 | */ 697 | on: function (name, fun) { 698 | var $this = this; 699 | $this.callbacks[name] = fun; 700 | return $this; 701 | }, 702 | /** 703 | * 解除事件绑定 704 | * @param name 705 | * @returns {MPlayer} 706 | */ 707 | unBindEvent: function (name) { 708 | var $this = this; 709 | $this.callbacks[name] = null; 710 | return $this; 711 | } 712 | }); -------------------------------------------------------------------------------- /js/project.js: -------------------------------------------------------------------------------- 1 | var h = window.innerHeight; //显示高度 2 | var w = window.innerWidth; //显示宽度 3 | var debug = false; //调试模式 4 | 5 | //解析XML 6 | // function loadXml(str) { 7 | // if(str == null) { 8 | // return null; 9 | // } 10 | // var doc = str; 11 | // try { 12 | // doc = createXMLDOM(); 13 | // doc.async = false; 14 | // doc.loadXML(str); 15 | // } catch(e) { 16 | // doc = $.parseXML(str); 17 | // } 18 | // return doc; 19 | // } 20 | 21 | //统计访问时间 22 | var last; 23 | 24 | function lastInfo() { 25 | var tdate = new Date(); 26 | last = cokie.get("runInfo"); 27 | if (last == null) { 28 | last = { 29 | "day": tdate.toLocaleString(), 30 | "time": tdate.getTime(), 31 | "cont": 1 32 | }; 33 | cokie.set("runInfo", JSON.stringify(last)); 34 | console.log("初次见面，还请多多指教"); 35 | } else { 36 | last = JSON.parse(cokie.get("runInfo")); 37 | console.log("上次访问时间" + last.day); 38 | last.day = tdate.toLocaleString(); 39 | last.time = tdate.getTime(); 40 | if (tdate.getTime() - last.time < 60000) last.cont++; //1分钟之内只统计一次访问次数 41 | console.log("统计访问次数" + last.cont); 42 | cokie.set("runInfo", JSON.stringify(last)); 43 | } 44 | 45 | } 46 | //Cookie 47 | var cokie = { 48 | //写cookies 49 | set: function (name, value) { 50 | var Days = 30; 51 | var exp = new Date(); 52 | exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000); 53 | document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString(); 54 | }, 55 | 56 | //读取cookies 57 | 58 | get: function (name) { 59 | var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)"); 60 | if (arr = document.cookie.match(reg)) return unescape(arr[2]); 61 | else return null; 62 | }, 63 | 64 | //删除cookies 65 | 66 | del: function (name) { 67 | var exp = new Date(); 68 | exp.setTime(exp.getTime() - 1); 69 | var cval = this.del(name); 70 | if (cval != null) document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString(); 71 | } 72 | }; 73 | 74 | //图片预加载 75 | function preLoadImg() { 76 | var img = new Image(); 77 | img.src = "url"; 78 | } 79 | 80 | //随机数 81 | function RandomNum(Min, Max) { 82 | var Range = Max - Min; 83 | var Rand = Math.random(); 84 | var num = Min + Math.round(Rand * Range); 85 | return num; 86 | } 87 | 88 | function byid(s) { 89 | return document.getElementById(s); 90 | } 91 | 92 | 93 | //计算间隔天数 94 | function getDateDiff(st, en) { 95 | var BirthDay = new Date(st); 96 | var today; 97 | if (en != undefined) { 98 | today = new Date(en); 99 | } else { 100 | today = new Date(); 101 | }; 102 | var timeold = (today.getTime() - BirthDay.getTime()); 103 | var sectimeold = timeold / 1000; 104 | var secondsold = Math.floor(sectimeold); 105 | var msPerDay = 24 * 60 * 60 * 1000; 106 | var e_daysold = timeold / msPerDay; 107 | var daysold = Math.floor(e_daysold); 108 | var e_hrsold = (e_daysold - daysold) * 24; 109 | var hrsold = Math.floor(e_hrsold); 110 | var e_minsold = (e_hrsold - hrsold) * 60; 111 | var minsold = Math.floor((e_hrsold - hrsold) * 60); 112 | var seconds = Math.floor((e_minsold - minsold) * 60); 113 | return checkTime(daysold) + "天" + checkTime(hrsold) + "小时" + checkTime(minsold) + "分" + checkTime(seconds) + "秒"; 114 | } 115 | 116 | //更新存活时间 117 | function show_date_time() { 118 | var tm = document.getElementsByName('show_time'); 119 | for (var i = 0; i < tm.length; i++) { 120 | tm[i].innerText = "Sakura & Erii の主页已存活" + getDateDiff(tm[i].title); 121 | } 122 | //window.setTimeout("show_date_time()", 1000); 123 | } 124 | var show_date_timer = setInterval(show_date_time, 1000); 125 | 126 | function checkTime(i) { 127 | if (i < 10) { 128 | i = "0" + i; 129 | } 130 | return i; 131 | } 132 | 133 | //获取URL数据 134 | function urlData(n) { 135 | var sc = window.location.search; 136 | var vr = window.location.search.split('&'); 137 | var v = {}; 138 | if (vr.length > 0) { 139 | for (i in vr) { 140 | var str = vr[i].split('='); 141 | if (str[0] = n) { 142 | return str[1]; 143 | } 144 | } 145 | } 146 | return null; 147 | } 148 | //加载js 149 | function loadScript(url, callback) { 150 | var script = document.createElement("script"); 151 | script.type = "text/javascript"; 152 | if (typeof (callback) != "undefined") { 153 | if (script.readyState) { 154 | script.onreadystatechange = function () { 155 | if (script.readyState == "loaded" || script.readyState == "complete") { 156 | script.onreadystatechange = null; 157 | callback(); 158 | } 159 | }; 160 | } else { 161 | script.onload = function () { 162 | callback(); 163 | }; 164 | } 165 | } 166 | script.src = url; 167 | document.body.appendChild(script); 168 | } 169 | 170 | /*获取URL数据 171 | * url:地址 172 | * fum:加载完成后运行 173 | * bool:为true时同步执行反之异步 174 | */ 175 | function getURL(url, fun, bool) { 176 | var xmlhttp; 177 | if (bool == undefined) bool = true; 178 | if (window.XMLHttpRequest) { 179 | // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 180 | xmlhttp = new XMLHttpRequest(); 181 | } else { 182 | // IE6, IE5 浏览器执行代码 183 | xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 184 | } 185 | xmlhttp.onreadystatechange = function () { 186 | if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 187 | //logout(xmlhttp.responseText); 188 | fun(xmlhttp.responseText); 189 | } else if (xmlhttp.readyState == 4 && xmlhttp.status != 200) { 190 | fun(null, xmlhttp.status); 191 | } 192 | } 193 | xmlhttp.open("GET", url, bool); 194 | xmlhttp.send(); 195 | } -------------------------------------------------------------------------------- /js/zzbaidu.js: -------------------------------------------------------------------------------- 1 | (function(){document.write(unescape('%3Cdiv id="bdcs"%3E%3C/div%3E'));var bdcs = document.createElement('script');bdcs.type = 'text/javascript';bdcs.async = true;bdcs.src = 'http://znsv.baidu.com/customer_search/api/js?sid=17246994957942213322' + '&plate_url=' + encodeURIComponent(window.location.href) + '&t=' + Math.ceil(new Date()/3600000);var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(bdcs, s);})(); 2 | (function() { 3 | var hm = document.createElement("script"); 4 | hm.src = "https://hm.baidu.com/hm.js?5a5f859aa9b407ab0599c5ef09986cbb"; 5 | var s = document.getElementsByTagName("script")[0]; 6 | s.parentNode.insertBefore(hm, s); 7 | })(); 8 | -------------------------------------------------------------------------------- /null/css/style.css: -------------------------------------------------------------------------------- 1 | @import url(http://fonts.googleapis.com/css?family=Finger+Paint); 2 | 3 | body{ 4 | margin: 0; 5 | padding: 0; 6 | overflow:hidden; 7 | } 8 | 9 | .init{ 10 | display: none; 11 | 12 | } 13 | 14 | /* Mozilla based browsers */ 15 | ::-moz-selection { 16 | background-color: #FFA620; 17 | color: #fff; 18 | } 19 | 20 | /* Works in Safari */ 21 | ::selection { 22 | background-color: #FFA620; 23 | color: #fff; 24 | } 25 | 26 | .text-sign .text { 27 | color: #9D4F00; 28 | font-size: 23px; 29 | margin-left: 47px; 30 | margin-top: 50px; 31 | -moz-transform:rotate(-5deg); 32 | -webkit-transform:rotate(-5deg); 33 | -o-transform:rotate(-5deg); 34 | -ms-transform:rotate(-5deg); 35 | } 36 | .webkit .sweat.show{ 37 | top: 90px!important; 38 | } 39 | .sweat.show{ 40 | opacity: 0; 41 | top: 50px; 42 | -webkit-transition: all 1.5s ease-in-out; 43 | -moz-transition: all 1.5s ease-in-out; 44 | -o-transition: all 1.5s ease-in-out; 45 | -ms-transition: all 1.5s ease-in-out; 46 | transition: all 1.5s ease-in-out; 47 | } 48 | 49 | .sweat { 50 | background-image: url("../images/sweat.png"); 51 | background-repeat: no-repeat; 52 | height: 42px; 53 | left: 220px; 54 | opacity: 1; 55 | position: absolute; 56 | 57 | width: 94px; 58 | top: 220px; 59 | } 60 | 61 | .work-sign { 62 | background-image: url("../images/working-sign.png"); 63 | height: 339px; 64 | width: 218px; 65 | position: absolute; 66 | z-index: 300; 67 | top: 0; 68 | right: 20px; 69 | } 70 | .text-sign { 71 | background-image: url("../images/texty-sign.png"); 72 | height: 225px; 73 | width: 250px; 74 | position: absolute; 75 | z-index: 300; 76 | top: -120px; 77 | left: 80px; 78 | font-family: 'Finger Paint', cursive; 79 | } 80 | #indicator{ 81 | background-color: #fff; 82 | border-radius: 5px; 83 | padding: 10px; 84 | margin: auto; 85 | background-image: url(../images/load.gif) ; 86 | background-repeat: no-repeat; 87 | background-position: center; 88 | top: 0; 89 | left: 0; 90 | right: 0; 91 | bottom: 0; 92 | position: absolute; 93 | width: 64px; 94 | height: 64px; 95 | } 96 | 97 | .sky{ 98 | background-image: url(../images/sky-bg.jpg) ; 99 | 100 | background-repeat: repeat-x; 101 | } 102 | 103 | .ground { 104 | background-image: url("../images/ground.png"); 105 | background-repeat: repeat-x; 106 | min-height: 200px; 107 | width: 100%; 108 | top: -190px; 109 | position: relative; 110 | } 111 | .convas{ 112 | background-color: #FFA620; 113 | position: relative; 114 | min-height: 991px; 115 | 116 | } 117 | 118 | .holder { 119 | margin: 0 auto; 120 | position: relative; 121 | width: 900px; 122 | top: -380px; 123 | } 124 | .mountain { 125 | background-image: url("../images/mountain.png"); 126 | background-repeat: repeat-x; 127 | min-height: 172px; 128 | top: -120px; 129 | width: 200%; 130 | left: -60px; 131 | position: relative; 132 | z-index: 0; 133 | } 134 | 135 | 136 | .rocks { 137 | background-image: url("../images/rocks.png"); 138 | height: 455px; 139 | left: -100px; 140 | position: absolute; 141 | width: 791px; 142 | top: 0px; 143 | z-index: 300; 144 | } 145 | 146 | .hole { 147 | background-image: url("../images/hole.png"); 148 | height: 273px; 149 | position: absolute; 150 | top: 80px; 151 | width: 807px; 152 | z-index: 100; 153 | left: 0; 154 | right: 0; 155 | margin: auto; 156 | } 157 | 158 | .worker { 159 | background-image: url("../images/worker.png"); 160 | background-repeat: no-repeat; 161 | height: 189px; 162 | width: 242px; 163 | position: absolute; 164 | left: 190px; 165 | top: 35px; 166 | 167 | } 168 | .webkit.worker{ 169 | left: 190px; 170 | top: 70px; 171 | } 172 | .swing { 173 | 174 | -webkit-transition: all 1.5s ease-in-out; 175 | -moz-transition: all 1.5s ease-in-out; 176 | -o-transition: all 1.5s ease-in-out; 177 | -ms-transition: all 1.5s ease-in-out; 178 | transition: all 1.5s ease-in-out; 179 | -moz-transform:rotate(40deg); 180 | -webkit-transform:rotate(40deg); 181 | -o-transform:rotate(40deg); 182 | -ms-transform:rotate(40deg); 183 | } 184 | .webkit.right{ 185 | top: 460px; 186 | left: 280px; 187 | } 188 | .right { 189 | -moz-transform:rotate(190deg); 190 | -webkit-transform:rotate(190deg); 191 | -o-transform:rotate(190deg); 192 | -ms-transform:rotate(190deg); 193 | left: 330px; 194 | top: 430px; 195 | } 196 | 197 | .ground-bottom .cleaner { 198 | background-color: #FFA620; 199 | bottom: -70px; 200 | height: 300px; 201 | position: absolute; 202 | width: 100%; 203 | } 204 | .ground-bottom { 205 | background-image: url("../images/ground-bottom.png"); 206 | background-repeat: no-repeat; 207 | height: 463px; 208 | left: -297px; 209 | position: absolute; 210 | top: 148px; 211 | width: 160%; 212 | z-index: 200; 213 | } 214 | .clouds { 215 | 216 | 217 | 218 | 219 | height: 300px; 220 | 221 | 222 | background: transparent url(../images/clouds.png) repeat-x; 223 | 224 | } 225 | -------------------------------------------------------------------------------- /null/images/clouds.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moewhite19/about/95c90aa695190db71ffd4c40712540cb63691e56/null/images/clouds.png -------------------------------------------------------------------------------- /null/images/ground-bottom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moewhite19/about/95c90aa695190db71ffd4c40712540cb63691e56/null/images/ground-bottom.png -------------------------------------------------------------------------------- /null/images/ground.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moewhite19/about/95c90aa695190db71ffd4c40712540cb63691e56/null/images/ground.png -------------------------------------------------------------------------------- /null/images/hole.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moewhite19/about/95c90aa695190db71ffd4c40712540cb63691e56/null/images/hole.png -------------------------------------------------------------------------------- /null/images/load.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moewhite19/about/95c90aa695190db71ffd4c40712540cb63691e56/null/images/load.gif -------------------------------------------------------------------------------- /null/images/mountain.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moewhite19/about/95c90aa695190db71ffd4c40712540cb63691e56/null/images/mountain.png -------------------------------------------------------------------------------- /null/images/rocks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moewhite19/about/95c90aa695190db71ffd4c40712540cb63691e56/null/images/rocks.png -------------------------------------------------------------------------------- /null/images/sky-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moewhite19/about/95c90aa695190db71ffd4c40712540cb63691e56/null/images/sky-bg.jpg -------------------------------------------------------------------------------- /null/images/sweat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moewhite19/about/95c90aa695190db71ffd4c40712540cb63691e56/null/images/sweat.png -------------------------------------------------------------------------------- /null/images/texty-sign.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moewhite19/about/95c90aa695190db71ffd4c40712540cb63691e56/null/images/texty-sign.png -------------------------------------------------------------------------------- /null/images/worker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moewhite19/about/95c90aa695190db71ffd4c40712540cb63691e56/null/images/worker.png -------------------------------------------------------------------------------- /null/images/working-sign.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moewhite19/about/95c90aa695190db71ffd4c40712540cb63691e56/null/images/working-sign.png -------------------------------------------------------------------------------- /null/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 建设中 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |

21 |

22 |

23 |

24 |

25 | 26 |

27 |

28 |

29 |

30 |

31 |

32 |

33 |

34 | 网站建设中
35 | We're Working Hard... 36 | 37 |

38 |

39 |

40 |

41 |

42 |

43 |

44 |

45 |

46 |

47 |

48 |

49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /null/js/css_browser_selector.js: -------------------------------------------------------------------------------- 1 | /* 2 | CSS Browser Selector v0.4.0 (Nov 02, 2010) 3 | Rafael Lima (http://rafael.adm.br) 4 | http://rafael.adm.br/css_browser_selector 5 | License: http://creativecommons.org/licenses/by/2.5/ 6 | Contributors: http://rafael.adm.br/css_browser_selector#contributors 7 | */ 8 | function css_browser_selector(u){var ua=u.toLowerCase(),is=function(t){return ua.indexOf(t)>-1},g='gecko',w='webkit',s='safari',o='opera',m='mobile',h=document.documentElement,b=[(!(/opera|webtv/i.test(ua))&&/msie\s(\d)/.test(ua))?('ie ie'+RegExp.$1):is('firefox/2')?g+' ff2':is('firefox/3.5')?g+' ff3 ff3_5':is('firefox/3.6')?g+' ff3 ff3_6':is('firefox/3')?g+' ff3':is('gecko/')?g:is('opera')?o+(/version\/(\d+)/.test(ua)?' '+o+RegExp.$1:(/opera(\s|\/)(\d+)/.test(ua)?' '+o+RegExp.$2:'')):is('konqueror')?'konqueror':is('blackberry')?m+' blackberry':is('android')?m+' android':is('chrome')?w+' chrome':is('iron')?w+' iron':is('applewebkit/')?w+' '+s+(/version\/(\d+)/.test(ua)?' '+s+RegExp.$1:''):is('mozilla/')?g:'',is('j2me')?m+' j2me':is('iphone')?m+' iphone':is('ipod')?m+' ipod':is('ipad')?m+' ipad':is('mac')?'mac':is('darwin')?'mac':is('webtv')?'webtv':is('win')?'win'+(is('windows nt 6.0')?' vista':''):is('freebsd')?'freebsd':(is('x11')||is('linux'))?'linux':'','js']; c = b.join(' '); h.className += ' '+c; return c;}; css_browser_selector(navigator.userAgent); 9 | -------------------------------------------------------------------------------- /null/js/jquery-animate-css-rotate-scale.js: -------------------------------------------------------------------------------- 1 | /*! 2 | /** 3 | * Monkey patch jQuery 1.3.1+ to add support for setting or animating CSS 4 | * scale and rotation independently. 5 | * https://github.com/zachstronaut/jquery-animate-css-rotate-scale 6 | * Released under dual MIT/GPL license just like jQuery. 7 | * 2009-2012 Zachary Johnson www.zachstronaut.com 8 | */ 9 | (function ($) { 10 | // Updated 2010.11.06 11 | // Updated 2012.10.13 - Firefox 16 transform style returns a matrix rather than a string of transform functions. This broke the features of this jQuery patch in Firefox 16. It should be possible to parse the matrix for both scale and rotate (especially when scale is the same for both the X and Y axis), however the matrix does have disadvantages such as using its own units and also 45deg being indistinguishable from 45+360deg. To get around these issues, this patch tracks internally the scale, rotation, and rotation units for any elements that are .scale()'ed, .rotate()'ed, or animated. The major consequences of this are that 1. the scaled/rotated element will blow away any other transform rules applied to the same element (such as skew or translate), and 2. the scaled/rotated element is unaware of any preset scale or rotation initally set by page CSS rules. You will have to explicitly set the starting scale/rotation value. 12 | 13 | function initData($el) { 14 | var _ARS_data = $el.data('_ARS_data'); 15 | if (!_ARS_data) { 16 | _ARS_data = { 17 | rotateUnits: 'deg', 18 | scale: 1, 19 | rotate: 0 20 | }; 21 | 22 | $el.data('_ARS_data', _ARS_data); 23 | } 24 | 25 | return _ARS_data; 26 | } 27 | 28 | function setTransform($el, data) { 29 | $el.css('transform', 'rotate(' + data.rotate + data.rotateUnits + ') scale(' + data.scale + ',' + data.scale + ')'); 30 | } 31 | 32 | $.fn.rotate = function (val) { 33 | var $self = $(this), m, data = initData($self); 34 | 35 | if (typeof val == 'undefined') { 36 | return data.rotate + data.rotateUnits; 37 | } 38 | 39 | m = val.toString().match(/^(-?\d+(\.\d+)?)(.+)?$/); 40 | if (m) { 41 | if (m[3]) { 42 | data.rotateUnits = m[3]; 43 | } 44 | 45 | data.rotate = m[1]; 46 | 47 | setTransform($self, data); 48 | } 49 | 50 | return this; 51 | }; 52 | 53 | // Note that scale is unitless. 54 | $.fn.scale = function (val) { 55 | var $self = $(this), data = initData($self); 56 | 57 | if (typeof val == 'undefined') { 58 | return data.scale; 59 | } 60 | 61 | data.scale = val; 62 | 63 | setTransform($self, data); 64 | 65 | return this; 66 | }; 67 | 68 | // fx.cur() must be monkey patched because otherwise it would always 69 | // return 0 for current rotate and scale values 70 | var curProxied = $.fx.prototype.cur; 71 | $.fx.prototype.cur = function () { 72 | if (this.prop == 'rotate') { 73 | return parseFloat($(this.elem).rotate()); 74 | 75 | } else if (this.prop == 'scale') { 76 | return parseFloat($(this.elem).scale()); 77 | } 78 | 79 | return curProxied.apply(this, arguments); 80 | }; 81 | 82 | $.fx.step.rotate = function (fx) { 83 | var data = initData($(fx.elem)); 84 | $(fx.elem).rotate(fx.now + data.rotateUnits); 85 | }; 86 | 87 | $.fx.step.scale = function (fx) { 88 | $(fx.elem).scale(fx.now); 89 | }; 90 | 91 | /* 92 | 93 | Starting on line 3905 of jquery-1.3.2.js we have this code: 94 | 95 | // We need to compute starting value 96 | if ( unit != "px" ) { 97 | self.style[ name ] = (end || 1) + unit; 98 | start = ((end || 1) / e.cur(true)) * start; 99 | self.style[ name ] = start + unit; 100 | } 101 | 102 | This creates a problem where we cannot give units to our custom animation 103 | because if we do then this code will execute and because self.style[name] 104 | does not exist where name is our custom animation's name then e.cur(true) 105 | will likely return zero and create a divide by zero bug which will set 106 | start to NaN. 107 | 108 | The following monkey patch for animate() gets around this by storing the 109 | units used in the rotation definition and then stripping the units off. 110 | 111 | */ 112 | 113 | var animateProxied = $.fn.animate; 114 | $.fn.animate = function (prop) { 115 | if (typeof prop['rotate'] != 'undefined') { 116 | var $self, data, m = prop['rotate'].toString().match(/^(([+-]=)?(-?\d+(\.\d+)?))(.+)?$/); 117 | if (m && m[5]) { 118 | $self = $(this); 119 | data = initData($self); 120 | data.rotateUnits = m[5]; 121 | } 122 | 123 | prop['rotate'] = m[1]; 124 | } 125 | 126 | return animateProxied.apply(this, arguments); 127 | }; 128 | })(jQuery); 129 | -------------------------------------------------------------------------------- /null/js/jquery.spritely-0.6.1.js: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery spritely 0.6.1 3 | * http://spritely.net/ 4 | * 5 | * Documentation: 6 | * http://spritely.net/documentation/ 7 | * 8 | * Copyright 2010-2011, Peter Chater, Artlogic Media Ltd, http://www.artlogic.net/ 9 | * Dual licensed under the MIT or GPL Version 2 licenses. 10 | * 11 | * Change history: 12 | * Version 0.6.1 13 | * - added some refinements from Gary hussey (http://bossninja.com/). Thanks Gary. 14 | * spritely now correctly clears timeouts/intervals when destroying sprites. 15 | * - added a goToFrame() method so you can set the current frame at any point. 16 | * - fixed the .spStop method where the 'last FPS' value was not being set, and the user specified FPS being ignore when .spStart was called. 17 | * Version 0.6 18 | * - added events to the .sprite() method: on_first_frame, on_last_frame, on_frame: 19 | * $('#sprite').sprite({ 20 | * fps: 9, 21 | * no_of_frames: 24, 22 | * on_first_frame: function(obj) { 23 | * obj.spState(1); // change to state 1 (first row) on frame 1 24 | * }, 25 | * on_last_frame: function(obj) { 26 | * obj.spStop(); // stop the animation on the last frame 27 | * }, 28 | * on_frame: { 29 | * 8: function(obj) { 30 | * obj.spState(2); // change to state 2 (row 2) on frame 8 31 | * }, 32 | * 16: function(obj) { 33 | * obj.spState(3); // change to state 3 (row 3) on frame 16 34 | * } 35 | * } 36 | * }); 37 | * - added start_at_frame: $('#sprite').sprite({fps: 9, no_of_frames: 24, start_at_frame: 8}); 38 | * Version 0.5 39 | * - added a 'destroy()' method which will stop the element's sprite behaviour, without actually removing the element. Example: $('#my_sprite').destroy() 40 | * Version 0.4 41 | * - add up/down for 'pan' method. 42 | * - added 'dir' option for Sprites. This means a Sprite can be played in reverse. 43 | * - removed alert message regarding jQuery.draggable (now uses console.log, if available) 44 | * Version 0.3b 45 | * - added lockTo method for locking sprites to background images. $('#sprite').lockTo('#background, {'left': 380, 'top': -60, 'bg_img_width': 1110}); 46 | * Version 0.2.1 47 | * - animate function will stop cycling after play_frames has completed 48 | * Version 0.2 beta 49 | * - added isDraggable method (requires jquery-ui) $('#sprite').sprite().isDraggable({start: null, stop: function() {alert('Ouch! You dropped me!')}); 50 | * - sprites may be set to play a limited number of frames when instantiated, e.g. $('#sprite').sprite({fps: 9, no_of_frames: 3, play_frames: 30}) 51 | * - sprite speed may be controlled at any point by setting the frames-per-second $('#sprite').fps(20); 52 | * - sprites with multiple rows of frames may have there 'state' changed, e.g. to make the second row of frames 53 | * active, use: $('#sprite').spState(2); - to return to the first row, use $('#sprite').spState(1); 54 | * - background element speed may be controlled at any point with .spSpeed(), e.g. $('#bg1').spSpeed(10) 55 | * - background elements may be set to a depth where 100 is the viewer (up close) and 0 is the horizon, e.g.: 56 | * $('#bg1').pan({fps: 30, speed: 2, dir: 'left', depth: 30}); 57 | * $('#bg2').pan({fps: 30, speed: 3, dir: 'left', depth: 70}); 58 | * relative speed of backgrounds may now be set in a single action with $('#bg1, #bg2').spRelSpeed(20); 59 | * which will make elements closer to the horizon (lower depths) move slower than closer elements (higher depths) 60 | */ 61 | 62 | (function($) { 63 | $._spritely = { 64 | // shared methods and variables used by spritely plugin 65 | animate: function(options) { 66 | var el = $(options.el); 67 | var el_id = el.attr('id'); 68 | if (!$._spritely.instances[el_id]) { 69 | return this; 70 | } 71 | options = $.extend(options, $._spritely.instances[el_id] || {}); 72 | if (options.play_frames && !$._spritely.instances[el_id]['remaining_frames']) { 73 | $._spritely.instances[el_id]['remaining_frames'] = options.play_frames + 1; 74 | } 75 | if (options.type == 'sprite' && options.fps) { 76 | var frames; 77 | var animate = function(el) { 78 | var w = options.width, h = options.height; 79 | if (!frames) { 80 | frames = []; 81 | total = 0 82 | for (var i = 0; i < options.no_of_frames; i ++) { 83 | frames[frames.length] = (0 - total); 84 | total += w; 85 | } 86 | } 87 | if ($._spritely.instances[el_id]['current_frame'] == 0) { 88 | if (options.on_first_frame) { 89 | options.on_first_frame(el); 90 | } 91 | } else if ($._spritely.instances[el_id]['current_frame'] == frames.length - 1) { 92 | if (options.on_last_frame) { 93 | options.on_last_frame(el); 94 | } 95 | } 96 | if (options.on_frame && options.on_frame[$._spritely.instances[el_id]['current_frame']]) { 97 | options.on_frame[$._spritely.instances[el_id]['current_frame']](el); 98 | } 99 | if (options.rewind == true) { 100 | if ($._spritely.instances[el_id]['current_frame'] <= 0) { 101 | $._spritely.instances[el_id]['current_frame'] = frames.length - 1; 102 | } else { 103 | $._spritely.instances[el_id]['current_frame'] = $._spritely.instances[el_id]['current_frame'] - 1; 104 | }; 105 | } else { 106 | if ($._spritely.instances[el_id]['current_frame'] >= frames.length - 1) { 107 | $._spritely.instances[el_id]['current_frame'] = 0; 108 | } else { 109 | $._spritely.instances[el_id]['current_frame'] = $._spritely.instances[el_id]['current_frame'] + 1; 110 | } 111 | } 112 | 113 | var yPos = $._spritely.getBgY(el); 114 | el.css('background-position', frames[$._spritely.instances[el_id]['current_frame']] + 'px ' + yPos); 115 | if (options.bounce && options.bounce[0] > 0 && options.bounce[1] > 0) { 116 | var ud = options.bounce[0]; // up-down 117 | var lr = options.bounce[1]; // left-right 118 | var ms = options.bounce[2]; // milliseconds 119 | el 120 | .animate({top: '+=' + ud + 'px', left: '-=' + lr + 'px'}, ms) 121 | .animate({top: '-=' + ud + 'px', left: '+=' + lr + 'px'}, ms); 122 | } 123 | } 124 | if ($._spritely.instances[el_id]['remaining_frames'] && $._spritely.instances[el_id]['remaining_frames'] > 0) { 125 | $._spritely.instances[el_id]['remaining_frames'] --; 126 | if ($._spritely.instances[el_id]['remaining_frames'] == 0) { 127 | $._spritely.instances[el_id]['remaining_frames'] = -1; 128 | delete $._spritely.instances[el_id]['remaining_frames']; 129 | return; 130 | } else { 131 | animate(el); 132 | } 133 | } else if ($._spritely.instances[el_id]['remaining_frames'] != -1) { 134 | animate(el); 135 | } 136 | } else if (options.type == 'pan') { 137 | if (!$._spritely.instances[el_id]['_stopped']) { 138 | if (options.dir == 'up') { 139 | $._spritely.instances[el_id]['l'] = $._spritely.getBgX(el).replace('px', ''); 140 | $._spritely.instances[el_id]['t'] = ($._spritely.instances[el_id]['t'] - (options.speed || 1)) || 0; 141 | } 142 | else if (options.dir == 'down') { 143 | $._spritely.instances[el_id]['l'] = $._spritely.getBgX(el).replace('px', ''); 144 | $._spritely.instances[el_id]['t'] = ($._spritely.instances[el_id]['t'] + (options.speed || 1)) || 0; 145 | } 146 | else if (options.dir == 'left') { 147 | $._spritely.instances[el_id]['l'] = ($._spritely.instances[el_id]['l'] - (options.speed || 1)) || 0; 148 | $._spritely.instances[el_id]['t'] = $._spritely.getBgY(el).replace('px', ''); 149 | } else { 150 | $._spritely.instances[el_id]['l'] = ($._spritely.instances[el_id]['l'] + (options.speed || 1)) || 0; 151 | $._spritely.instances[el_id]['t'] = $._spritely.getBgY(el).replace('px', ''); 152 | } 153 | 154 | // When assembling the background-position string, care must be taken 155 | // to ensure correct formatting.. 156 | var bg_left = $._spritely.instances[el_id]['l'].toString(); 157 | if (bg_left.indexOf('%') == -1) { 158 | bg_left += 'px '; 159 | } else { bg_left += ' '; } 160 | 161 | var bg_top = $._spritely.instances[el_id]['t'].toString(); 162 | if (bg_top.indexOf('%') == -1) { 163 | bg_top += 'px '; 164 | } else { bg_top += ' '; } 165 | 166 | $(el).css('background-position', bg_left + bg_top); 167 | } 168 | } 169 | $._spritely.instances[el_id]['options'] = options; 170 | $._spritely.instances[el_id]['timeout'] = window.setTimeout(function() { 171 | $._spritely.animate(options); 172 | }, parseInt(1000 / options.fps)); 173 | }, 174 | randomIntBetween: function(lower, higher) { 175 | return parseInt(rand_no = Math.floor((higher - (lower - 1)) * Math.random()) + lower); 176 | }, 177 | getBgY: function(el) { 178 | if ($.browser.msie) { 179 | // fixme - the background-position property does not work 180 | // correctly in IE so we have to hack it here... Not ideal 181 | // especially as $.browser is depricated 182 | var bgY = $(el).css('background-position-y') || '0'; 183 | } else { 184 | var bgY = ($(el).css('background-position') || ' ').split(' ')[1]; 185 | } 186 | return bgY; 187 | }, 188 | getBgX: function(el) { 189 | if ($.browser.msie) { 190 | // see note, above 191 | var bgX = $(el).css('background-position-x') || '0'; 192 | } else { 193 | var bgX = ($(el).css('background-position') || ' ').split(' ')[0]; 194 | } 195 | return bgX; 196 | }, 197 | get_rel_pos: function(pos, w) { 198 | // return the position of an item relative to a background 199 | // image of width given by w 200 | var r = pos; 201 | if (pos < 0) { 202 | while (r < 0) { 203 | r += w; 204 | } 205 | } else { 206 | while (r > w) { 207 | r -= w; 208 | } 209 | } 210 | return r; 211 | } 212 | }; 213 | $.fn.extend({ 214 | spritely: function(options) { 215 | var options = $.extend({ 216 | type: 'sprite', 217 | do_once: false, 218 | width: null, 219 | height: null, 220 | fps: 12, 221 | no_of_frames: 2, 222 | stop_after: null 223 | }, options || {}); 224 | var el_id = $(this).attr('id'); 225 | if (!$._spritely.instances) { 226 | $._spritely.instances = {}; 227 | } 228 | if (!$._spritely.instances[el_id]) { 229 | if (options.start_at_frame) { 230 | $._spritely.instances[el_id] = {current_frame: options.start_at_frame - 1}; 231 | } else { 232 | $._spritely.instances[el_id] = {current_frame: -1}; 233 | } 234 | } 235 | $._spritely.instances[el_id]['type'] = options.type; 236 | $._spritely.instances[el_id]['depth'] = options.depth; 237 | options.el = this; 238 | options.width = options.width || $(this).width() || 100; 239 | options.height = options.height || $(this).height() || 100; 240 | var get_rate = function() { 241 | return parseInt(1000 / options.fps); 242 | } 243 | if (!options.do_once) { 244 | window.setTimeout(function() { 245 | $._spritely.animate(options); 246 | }, get_rate(options.fps)); 247 | } else { 248 | $._spritely.animate(options); 249 | } 250 | return this; // so we can chain events 251 | }, 252 | sprite: function(options) { 253 | var options = $.extend({ 254 | type: 'sprite', 255 | bounce: [0, 0, 1000] // up-down, left-right, milliseconds 256 | }, options || {}); 257 | return $(this).spritely(options); 258 | }, 259 | pan: function(options) { 260 | var options = $.extend({ 261 | type: 'pan', 262 | dir: 'left', 263 | continuous: true, 264 | speed: 1 // 1 pixel per frame 265 | }, options || {}); 266 | return $(this).spritely(options); 267 | }, 268 | flyToTap: function(options) { 269 | var options = $.extend({ 270 | el_to_move: null, 271 | type: 'moveToTap', 272 | ms: 1000, // milliseconds 273 | do_once: true 274 | }, options || {}); 275 | if (options.el_to_move) { 276 | $(options.el_to_move).active(); 277 | } 278 | if ($._spritely.activeSprite) { 279 | if (window.Touch) { // iphone method see http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone/9 or http://www.nimblekit.com/tutorials.html for clues... 280 | $(this)[0].ontouchstart = function(e) { 281 | var el_to_move = $._spritely.activeSprite; 282 | var touch = e.touches[0]; 283 | var t = touch.pageY - (el_to_move.height() / 2); 284 | var l = touch.pageX - (el_to_move.width() / 2); 285 | el_to_move.animate({ 286 | top: t + 'px', 287 | left: l + 'px' 288 | }, 1000); 289 | }; 290 | } else { 291 | $(this).click(function(e) { 292 | var el_to_move = $._spritely.activeSprite; 293 | $(el_to_move).stop(true); 294 | var w = el_to_move.width(); 295 | var h = el_to_move.height(); 296 | var l = e.pageX - (w / 2); 297 | var t = e.pageY - (h / 2); 298 | el_to_move.animate({ 299 | top: t + 'px', 300 | left: l + 'px' 301 | }, 1000); 302 | }); 303 | } 304 | } 305 | return this; 306 | }, 307 | // isDraggable requires jQuery ui 308 | isDraggable: function(options) { 309 | if ((!$(this).draggable)) { 310 | //console.log('To use the isDraggable method you need to load jquery-ui.js'); 311 | return this; 312 | } 313 | var options = $.extend({ 314 | type: 'isDraggable', 315 | start: null, 316 | stop: null, 317 | drag: null 318 | }, options || {}); 319 | var el_id = $(this).attr('id'); 320 | if (!$._spritely.instances[el_id]) { 321 | return this; 322 | } 323 | $._spritely.instances[el_id].isDraggableOptions = options; 324 | $(this).draggable({ 325 | start: function() { 326 | var el_id = $(this).attr('id'); 327 | $._spritely.instances[el_id].stop_random = true; 328 | $(this).stop(true); 329 | if ($._spritely.instances[el_id].isDraggableOptions.start) { 330 | $._spritely.instances[el_id].isDraggableOptions.start(this); 331 | } 332 | }, 333 | drag: options.drag, 334 | stop: function() { 335 | var el_id = $(this).attr('id'); 336 | $._spritely.instances[el_id].stop_random = false; 337 | if ($._spritely.instances[el_id].isDraggableOptions.stop) { 338 | $._spritely.instances[el_id].isDraggableOptions.stop(this); 339 | } 340 | } 341 | }); 342 | return this; 343 | }, 344 | active: function() { 345 | // the active sprite 346 | $._spritely.activeSprite = this; 347 | return this; 348 | }, 349 | activeOnClick: function() { 350 | // make this the active script if clicked... 351 | var el = $(this); 352 | if (window.Touch) { // iphone method see http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone/9 or http://www.nimblekit.com/tutorials.html for clues... 353 | el[0].ontouchstart = function(e) { 354 | $._spritely.activeSprite = el; 355 | }; 356 | } else { 357 | el.click(function(e) { 358 | $._spritely.activeSprite = el; 359 | }); 360 | } 361 | return this; 362 | }, 363 | spRandom: function(options) { 364 | var options = $.extend({ 365 | top: 50, 366 | left: 50, 367 | right: 290, 368 | bottom: 320, 369 | speed: 4000, 370 | pause: 0 371 | }, options || {}); 372 | var el_id = $(this).attr('id'); 373 | if (!$._spritely.instances[el_id]) { 374 | return this; 375 | } 376 | if (!$._spritely.instances[el_id].stop_random) { 377 | var r = $._spritely.randomIntBetween; 378 | var t = r(options.top, options.bottom); 379 | var l = r(options.left, options.right); 380 | $('#' + el_id).animate({ 381 | top: t + 'px', 382 | left: l + 'px' 383 | }, options.speed) 384 | } 385 | window.setTimeout(function() { 386 | $('#' + el_id).spRandom(options); 387 | }, options.speed + options.pause) 388 | return this; 389 | }, 390 | makeAbsolute: function() { 391 | // remove an element from its current position in the DOM and 392 | // position it absolutely, appended to the body tag. 393 | return this.each(function() { 394 | var el = $(this); 395 | var pos = el.position(); 396 | el.css({position: "absolute", marginLeft: 0, marginTop: 0, top: pos.top, left: pos.left }) 397 | .remove() 398 | .appendTo("body"); 399 | }); 400 | 401 | }, 402 | spSet: function(prop_name, prop_value) { 403 | var el_id = $(this).attr('id'); 404 | $._spritely.instances[el_id][prop_name] = prop_value; 405 | return this; 406 | }, 407 | spGet: function(prop_name, prop_value) { 408 | var el_id = $(this).attr('id'); 409 | return $._spritely.instances[el_id][prop_name]; 410 | }, 411 | spStop: function(bool) { 412 | $(this).each(function() { 413 | var el_id = $(this).attr('id'); 414 | if ($._spritely.instances[el_id]['options']['fps']) { 415 | $._spritely.instances[el_id]['_last_fps'] = $._spritely.instances[el_id]['options']['fps']; 416 | } 417 | $._spritely.instances[el_id]['_stopped'] = true; 418 | $._spritely.instances[el_id]['_stopped_f1'] = bool; 419 | if ($._spritely.instances[el_id]['type'] == 'sprite') { 420 | $(this).spSet('fps', 0); 421 | } 422 | if (bool) { 423 | // set background image position to 0 424 | var bp_top = $._spritely.getBgY($(this)); 425 | $(this).css('background-position', '0 ' + bp_top); 426 | } 427 | }); 428 | return this; 429 | }, 430 | spStart: function() { 431 | $(this).each(function() { 432 | var el_id = $(this).attr('id'); 433 | var fps = $._spritely.instances[el_id]['_last_fps'] || 12; 434 | if ($._spritely.instances[el_id]['type'] == 'sprite') { 435 | $(this).spSet('fps', fps); 436 | } 437 | $._spritely.instances[el_id]['_stopped'] = false; 438 | }); 439 | return this; 440 | }, 441 | spToggle: function() { 442 | var el_id = $(this).attr('id'); 443 | var stopped = $._spritely.instances[el_id]['_stopped'] || false; 444 | var stopped_f1 = $._spritely.instances[el_id]['_stopped_f1'] || false; 445 | if (stopped) { 446 | $(this).spStart(); 447 | } else { 448 | $(this).spStop(stopped_f1); 449 | } 450 | return this; 451 | }, 452 | fps: function(fps) { 453 | $(this).each(function() { 454 | $(this).spSet('fps', fps); 455 | }); 456 | return this; 457 | }, 458 | goToFrame: function(n) { 459 | var el_id = $(this).attr('id'); 460 | if ($._spritely.instances && $._spritely.instances[el_id]) { 461 | $._spritely.instances[el_id]['current_frame'] = n - 1; 462 | } 463 | return this; 464 | }, 465 | spSpeed: function(speed) { 466 | $(this).each(function() { 467 | $(this).spSet('speed', speed); 468 | }); 469 | return this; 470 | }, 471 | spRelSpeed: function(speed) { 472 | $(this).each(function() { 473 | var rel_depth = $(this).spGet('depth') / 100; 474 | $(this).spSet('speed', speed * rel_depth); 475 | }); 476 | return this; 477 | }, 478 | spChangeDir: function(dir) { 479 | $(this).each(function() { 480 | $(this).spSet('dir', dir); 481 | }); 482 | return this; 483 | }, 484 | spState: function(n) { 485 | $(this).each(function() { 486 | // change state of a sprite, where state is the vertical 487 | // position of the background image (e.g. frames row) 488 | var yPos = ((n - 1) * $(this).height()) + 'px'; 489 | var xPos = $._spritely.getBgX($(this)); 490 | var bp = xPos + ' -' + yPos; 491 | $(this).css('background-position', bp); 492 | }); 493 | return this; 494 | }, 495 | lockTo: function(el, options) { 496 | $(this).each(function() { 497 | var el_id = $(this).attr('id'); 498 | if (!$._spritely.instances[el_id]) { 499 | return this; 500 | } 501 | $._spritely.instances[el_id]['locked_el'] = $(this); 502 | $._spritely.instances[el_id]['lock_to'] = $(el); 503 | $._spritely.instances[el_id]['lock_to_options'] = options; 504 | $._spritely.instances[el_id]['interval'] = window.setInterval(function() { 505 | if ($._spritely.instances[el_id]['lock_to']) { 506 | var locked_el = $._spritely.instances[el_id]['locked_el']; 507 | var locked_to_el = $._spritely.instances[el_id]['lock_to']; 508 | var locked_to_options = $._spritely.instances[el_id]['lock_to_options']; 509 | var locked_to_el_w = locked_to_options.bg_img_width; 510 | var locked_to_el_h = locked_to_el.height(); 511 | var locked_to_el_y = $._spritely.getBgY(locked_to_el); 512 | var locked_to_el_x = $._spritely.getBgX(locked_to_el); 513 | var el_l = (parseInt(locked_to_el_x) + parseInt(locked_to_options['left'])); 514 | var el_t = (parseInt(locked_to_el_y) + parseInt(locked_to_options['top'])); 515 | el_l = $._spritely.get_rel_pos(el_l, locked_to_el_w); 516 | $(locked_el).css({ 517 | 'top': el_t + 'px', 518 | 'left': el_l + 'px' 519 | }); 520 | } 521 | }, options.interval || 20); 522 | }); 523 | return this; 524 | }, 525 | destroy: function() { 526 | var el = $(this); 527 | var el_id = $(this).attr('id'); 528 | if ($._spritely.instances[el_id] && $._spritely.instances[el_id]['timeout']){ 529 | window.clearInterval($._spritely.instances[el_id]['timeout']); 530 | } 531 | if ($._spritely.instances[el_id] && $._spritely.instances[el_id]['interval']) { 532 | window.clearInterval($._spritely.instances[el_id]['interval']); 533 | } 534 | delete $._spritely.instances[el_id] 535 | return this; 536 | } 537 | }) 538 | })(jQuery); 539 | // Stop IE6 re-loading background images continuously 540 | try { 541 | document.execCommand("BackgroundImageCache", false, true); 542 | } catch(err) {} -------------------------------------------------------------------------------- /null/js/plax.js: -------------------------------------------------------------------------------- 1 | /* Plax version 1.3.1 */ 2 | 3 | /* 4 | Copyright (c) 2011 Cameron McEfee 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining 7 | a copy of this software and associated documentation files (the 8 | "Software"), to deal in the Software without restriction, including 9 | without limitation the rights to use, copy, modify, merge, publish, 10 | distribute, sublicense, and/or sell copies of the Software, and to 11 | permit persons to whom the Software is furnished to do so, subject to 12 | the following conditions: 13 | 14 | The above copyright notice and this permission notice shall be 15 | included in all copies or substantial portions of the Software. 16 | 17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 18 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 19 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 20 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 21 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 22 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 23 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 24 | */ 25 | 26 | (function ($) { 27 | 28 | var maxfps = 25, 29 | delay = 1 / maxfps * 1000, 30 | lastRender = new Date().getTime(), 31 | layers = [], 32 | plaxActivityTarget = $(window), 33 | motionEnabled = false, 34 | motionMax = 1, 35 | motionAllowance = .05, 36 | movementCycles = 0, 37 | motionLowPassFilter= 0.05, 38 | motionLastX = 1, 39 | motionLastY = 1, 40 | motionData = { 41 | "xArray" : [0,0,0,0,0], 42 | "yArray" : [0,0,0,0,0], 43 | "xMotion" : 0, 44 | "yMotion" : 0 45 | } 46 | 47 | // Public Methods 48 | $.fn.plaxify = function (params){ 49 | 50 | return this.each(function () { 51 | var layerExistsAt = -1 52 | var layer = { 53 | "xRange": $(this).data('xrange') || 0, 54 | "yRange": $(this).data('yrange') || 0, 55 | "invert": $(this).data('invert') || false, 56 | "background": $(this).data('background') || false 57 | } 58 | 59 | for (var i=0;i= 0){ 106 | layers.splice(layerExistsAt,1,layer) 107 | } else { 108 | layers.push(layer) 109 | } 110 | 111 | }) 112 | } 113 | 114 | 115 | // Get minimum value of an array 116 | // 117 | // arr - array to be tested 118 | // 119 | // returns the smallest value in the array 120 | 121 | function getMin(arr){ 122 | return Math.min.apply({}, arr) 123 | } 124 | 125 | 126 | // Get maximum value of an array 127 | // 128 | // arr - array to be tested 129 | // 130 | // returns the largest value in the array 131 | 132 | function getMax(arr){ 133 | return Math.max.apply({}, arr) 134 | } 135 | 136 | 137 | // Determine if the device has an accelerometer 138 | // 139 | // returns true if the browser has window.DeviceMotionEvent (mobile) 140 | 141 | function moveable(){ 142 | return window.DeviceMotionEvent != undefined 143 | } 144 | 145 | 146 | // Determine if the device is actually moving. If it is, enable motion based parallaxing. 147 | // Otherwise, use the mouse to parallax 148 | // 149 | // Parameters 150 | // 151 | // e - devicemotion event 152 | // 153 | // returns nothing 154 | 155 | function detectMotion(e){ 156 | if (new Date().getTime() < lastRender + delay) return 157 | 158 | if(moveable()){ 159 | var accel= e.accelerationIncludingGravity, 160 | x = accel.x, 161 | y = accel.y 162 | 163 | x = (x * motionLowPassFilter) + (motionLastX * (1.0 - motionLowPassFilter)); 164 | y = (y * motionLowPassFilter) + (motionLastY * (1.0 - motionLowPassFilter)); 165 | 166 | motionLastX = x; 167 | motionLastY = y; 168 | 169 | if(motionData.xArray.length >= 5){ 170 | motionData.xArray.shift() 171 | } 172 | if(motionData.yArray.length >= 5){ 173 | motionData.yArray.shift() 174 | } 175 | motionData.xArray.push(x) 176 | motionData.yArray.push(y) 177 | 178 | motionData.xMotion = Math.round((getMax(motionData.xArray) - getMin(motionData.xArray))*1000)/1000 179 | motionData.yMotion = Math.round((getMax(motionData.yArray) - getMin(motionData.yArray))*1000)/1000 180 | 181 | if((motionData.xMotion > 1.5 || motionData.yMotion > 1.5)) { 182 | if(motionMax!=10){ 183 | motionMax = 10 184 | } 185 | } 186 | 187 | // test for sustained motion 188 | if(motionData.xMotion > motionAllowance || motionData.yMotion > motionAllowance){ 189 | movementCycles++; 190 | } else { 191 | movementCycles = 0; 192 | } 193 | 194 | if(movementCycles >= 5){ 195 | motionEnabled = true 196 | $(document).unbind('mousemove.plax') 197 | //window.ondevicemotion = function(e){plaxifier(e)} 198 | 199 | $(window).bind('devicemotion', plaxifier(e)) 200 | } else { 201 | motionEnabled = false 202 | $(window).unbind('devicemotion') 203 | $(document).bind('mousemove.plax', function (e) { 204 | plaxifier(e) 205 | }) 206 | } 207 | } 208 | } 209 | 210 | 211 | // Move the elements in the `layers` array within their ranges, 212 | // based on mouse or motion input 213 | // 214 | // Parameters 215 | // 216 | // e - mousemove or devicemotion event 217 | // 218 | // returns nothing 219 | 220 | function plaxifier(e) { 221 | if (new Date().getTime() < lastRender + delay) return 222 | lastRender = new Date().getTime() 223 | var leftOffset = (plaxActivityTarget.offset() != null) ? plaxActivityTarget.offset().left : 0, 224 | topOffset = (plaxActivityTarget.offset() != null) ? plaxActivityTarget.offset().top : 0, 225 | x = e.pageX-leftOffset, 226 | y = e.pageY-topOffset 227 | if ( 228 | x < 0 || x > plaxActivityTarget.width() || 229 | y < 0 || y > plaxActivityTarget.height() 230 | ) return 231 | 232 | 233 | if(motionEnabled == true){ 234 | // portrait(%2==0) or landscape 235 | var i = window.orientation ? (window.orientation + 180) % 360 / 90 : 2, 236 | accel= e.accelerationIncludingGravity, 237 | tmp_x = i%2==0 ? -accel.x : accel.y, 238 | tmp_y = i%2==0 ? accel.y : accel.x 239 | // facing up(>=2) or down 240 | x = i>=2 ? tmp_x : -tmp_x 241 | y = i>=2 ? tmp_y : -tmp_y 242 | 243 | // change value from a range of -x to x => 0 to 1 244 | x = (x+motionMax)/2 245 | y = (y+motionMax)/2 246 | 247 | // keep values within range 248 | if(x < 0 ){ 249 | x = 0 250 | } else if( x > motionMax ) { 251 | x = motionMax 252 | } 253 | 254 | if(y < 0 ){ 255 | y = 0 256 | } else if( y > motionMax ) { 257 | y = motionMax 258 | } 259 | } 260 | 261 | var hRatio = x/((motionEnabled == true) ? motionMax : plaxActivityTarget.width()), 262 | vRatio = y/((motionEnabled == true) ? motionMax : plaxActivityTarget.height()), 263 | layer, i 264 | 265 | for (i = layers.length; i--;) { 266 | layer = layers[i] 267 | newX = layer.startX + layer.inversionFactor*(layer.xRange*hRatio) 268 | newY = layer.startY + layer.inversionFactor*(layer.yRange*vRatio) 269 | if(layer.background) { 270 | layer.obj.css('background-position', newX+'px '+newY+'px') 271 | } else { 272 | layer.obj 273 | .css('left', newX) 274 | .css('top', newY) 275 | } 276 | } 277 | } 278 | 279 | $.plax = { 280 | 281 | // Begin parallaxing 282 | // 283 | // Parameters 284 | // 285 | // opts - options for plax 286 | // activityTarget - optional; plax will only work within the bounds of this element, if supplied. 287 | // 288 | // Examples 289 | // 290 | // $.plax.enable({ "activityTarget": $('#myPlaxDiv')}) 291 | // # plax only happens when the mouse is over #myPlaxDiv 292 | // 293 | // returns nothing 294 | enable: function(opts){ 295 | $(document).bind('mousemove.plax', function (e) { 296 | if(opts){ 297 | plaxActivityTarget = opts.activityTarget || $(window) 298 | } 299 | plaxifier(e) 300 | }) 301 | 302 | if(moveable()){ 303 | window.ondevicemotion = function(e){detectMotion(e)} 304 | } 305 | 306 | }, 307 | 308 | // Stop parallaxing 309 | // 310 | // Examples 311 | // 312 | // $.plax.disable() 313 | // # plax no longer runs 314 | // 315 | // returns nothing 316 | disable: function(){ 317 | $(document).unbind('mousemove.plax') 318 | window.ondevicemotion = undefined 319 | } 320 | } 321 | 322 | if (typeof ender !== 'undefined') { 323 | $.ender($.fn, true) 324 | } 325 | 326 | })(function () { 327 | return typeof jQuery !== 'undefined' ? jQuery : ender 328 | }()) 329 | -------------------------------------------------------------------------------- /null/js/preloader.js: -------------------------------------------------------------------------------- 1 | (function($) { 2 | var imgList = []; 3 | $.extend({ 4 | preload: function(imgArr, option) { 5 | var setting = $.extend({ 6 | init: function(loaded, total) {}, 7 | loaded: function(img, loaded, total) {}, 8 | loaded_all: function(loaded, total) {} 9 | }, option); 10 | var total = imgArr.length; 11 | var loaded = 0; 12 | 13 | setting.init(0, total); 14 | for(var i in imgArr) { 15 | imgList.push($("") 16 | .attr("src", imgArr[i]) 17 | .load(function() { 18 | loaded++; 19 | setting.loaded(this, loaded, total); 20 | if(loaded == total) { 21 | setting.loaded_all(loaded, total); 22 | } 23 | }) 24 | ); 25 | } 26 | 27 | } 28 | }); 29 | })(jQuery); -------------------------------------------------------------------------------- /null/js/script.js: -------------------------------------------------------------------------------- 1 | var slider; 2 | var images = [ 3 | "images/ground.png", 4 | "images/clouds.png", 5 | "images/ground-bottom.png", 6 | "images/hole.png", 7 | "images/mountain.png", 8 | "images/rocks.png", 9 | "images/sky-bg.jpg", 10 | "images/sweat.png", 11 | "images/texty-sign.png", 12 | "images/worker.png", 13 | "images/working-sign.png" 14 | ]; 15 | 16 | var index = 0; 17 | var transitionSpeed = 500; 18 | var imageIntervals = 5000; 19 | 20 | var startIntervals; 21 | var intervalSetTime; 22 | var contentOpen = false; 23 | 24 | $(document).ready(function() { 25 | 26 | 27 | 28 | 29 | 30 | 31 | $(function() { 32 | 33 | $.preload(images, { 34 | init: function(loaded, total) { 35 | 36 | }, 37 | 38 | loaded_all: function(loaded, total) { 39 | 40 | 41 | $('#indicator').fadeOut('slow', function() { 42 | 43 | function swing(){ 44 | if($('html').hasClass('ie')){ 45 | if(!$('.swing').hasClass('down')){ 46 | 47 | $('.swing').animate({rotate:'190deg', left: 330, 48 | top: 430},1500,function(){ 49 | $('.swing').toggleClass('down'); 50 | }); 51 | }else{ 52 | 53 | $('.swing').animate({rotate:'40deg', left: 190, 54 | top: 35},1500,function(){ 55 | $('.swing').toggleClass('down'); 56 | }); 57 | 58 | }}else{ 59 | $('.swing').toggleClass('right'); 60 | } 61 | 62 | 63 | $('.sweat').toggleClass('show'); 64 | 65 | setTimeout(swing, 1500); 66 | } 67 | swing(); 68 | 69 | 70 | $('#clouds').pan({ 71 | fps: 30, 72 | speed: 1.8, 73 | dir: 'left', 74 | depth: 300 75 | }); 76 | 77 | 78 | 79 | $('.init').fadeIn(function(){ 80 | $(this).removeClass('init'); 81 | 82 | 83 | setTimeout(function(){ 84 | 85 | $('.mountain').plaxify({ 86 | "xRange":20, 87 | "yRange":0 88 | }) ; 89 | 90 | 91 | 92 | $.plax.enable(); 93 | 94 | 95 | 96 | 97 | 98 | },500) 99 | 100 | 101 | 102 | 103 | }) 104 | 105 | 106 | 107 | 108 | }); 109 | } 110 | }); 111 | }); 112 | 113 | 114 | 115 | }) 116 | --------------------------------------------------------------------------------

依玖梦白

名为小樱花，意为白罂粟

神眷之櫻花

04.24

04.26

04.25

E.N.D

世界很温柔.....

我很喜欢这样的世界

但他不喜欢我

Something Of Hobby

世界好大啊

原来外面的时间

是这个这样子啊

我无所谓喜不喜欢,既然Sakura不喜欢,那就杀掉好了。

我们都是小怪兽

有一天会被正义的奥特曼杀死。

Sakura&Eriiの小黄鸭

Contact With Me

©2016-2022 Powered by 304 | Cononico's 305 | 绘枫和畅 | 0936zz | MoeWhite19 依玖梦白 307 | 308 | 时间 309 | 310 |

©2016-2022 Powered by 304 |
Cononico's 305 | 绘枫和畅 | 0936zz | MoeWhite19 依玖梦白
307 | 308 |
时间
309 | 310 |