ii23休闲社区

 找回密码
 注册(建议使用中文昵称)

QQ登录

只需一步,快速开始

扫一扫,访问微社区

新手发帖教学·轻松玩论坛积分、等级、阅读权限说明社区担保,交易无忧
查看: 765|回复: 19

[华语流行] 【梦在丽江-阿西古浪】iPhone XR 代码手机送“彩虹密码”,听说你喜欢这首歌。

[复制链接]
 成长值: 63498

签到天数: 2316 天

[LV.Master]伴坛终老

獨噯丶婼詩
幸福:10071℃
发表于 2019-8-7 22:50:44 | 显示全部楼层 |阅读模式
本帖最后由 II.〆石Zi° 于 2019-8-21 01:45 编辑

4G

梦在丽江

作曲:胡晓流

填词/演唱:阿西古浪

特制音乐播放器(透明,歌词同步)

[offset:0]
[00:00.18]梦在丽江
[00:10.00]填词/演唱:阿西古浪
[00:20.00]曲:胡晓流
[00:30.10]合声:马斌/马强/祝生
[00:30.20]录音:方雄
[00:30.30]后期:深圳索亚文化传播有限公司
[00:30.39]在梦一样的丽江
[00:36.93]我遇见了梦一样的姑娘
[00:43.95]她的眼睛是那么明亮
[00:50.82]总在我梦中徜徉
[00:57.28]在梦一样的丽江
[01:03.51]我弄丢了梦一样的姑娘
[01:10.38]你就是一首多情的诗啊
[01:16.80]在我记忆的海洋里荡漾
[01:27.24]我的梦一直在丽江
[01:33.92]一直追寻的你啊就像梦一样
[01:40.41]我的姑娘留在了丽江
[01:47.16]一直等待的你啊就像梦一样
[02:23.50]在梦一样的丽江
[02:30.26]我遇见了梦一样的姑娘
[02:37.12]她的眼睛是那么明亮
[02:44.04]总在我梦中徜徉
[02:50.42]在梦一样的丽江
[02:56.80]我弄丢了梦一样的姑娘
[03:03.67]你就是一首多情的诗啊
[03:10.39]在我记忆的海洋里荡漾
[03:20.21]我的梦一直在丽江
[03:27.09]一直追寻的你啊就像梦一样
[03:33.63]我的姑娘留在了丽江
[03:40.43]一直等待的你啊就像梦一样
[03:50.30]我的梦一直在丽江
[03:57.20]一直追寻的你啊就像梦一样
[04:03.68]我的心啊留在了丽江
[04:10.36]永远等待的你啊回到我身旁
单曲循环太久,正在超级快充 1%

☺正在识别人脸

评分

参与人数 8威望 +3 金钱 +33 魅力 +1 收起 理由
随心而遇 + 2 竖屏加分
片片枫叶情 + 3 + 20 + 1 爱生活、爱ii23!
栀夏° + 2
雪千寻 + 2 我来过~我喜欢
II.〆菁儿° + 1 这效果,绝了
輪茴、誰等誰 + 2
彩虹密码 + 2
陌花雨 + 2

查看全部评分

 成长值: 63498

签到天数: 2316 天

[LV.Master]伴坛终老

獨噯丶婼詩
幸福:10071℃
发表于 2019-8-7 22:52:03 | 显示全部楼层
本帖最后由 II.〆石Zi° 于 2019-8-15 17:49 编辑

本帖仅 头像、指纹 为图片,其他均为代码制作,喜欢的拿走。记得加分!!!!

下面代码与主楼略有区别。



  1. <script>
  2. var timer=null;//电脑时间获取与显示
  3.     function displayClock(num){//num是传入的startClock中的动态值
  4.       if(num<10){
  5.         return "0"+num;
  6.       }
  7.       else{
  8.         return num;
  9.       }
  10.     }
  11.     //停止计时
  12.     function stopClock(){
  13.       clearTimeout(timer);
  14.     }
  15.     //开始计时
  16.     function startClock(){
  17.       var time =new Date();
  18.       var hours=displayClock(time.getHours())+":";
  19.       var minutes=displayClock(time.getMinutes());
  20.       //显示时间
  21.       show1.innerHTML=hours+minutes;//在id为show的块区域显示
  22.       timer=setTimeout("startClock()",1000);//延时器
  23.     }
  24.   </script>
  25. <style type="text/css">
  26.   #show1{
  27.     font-size: 10px;
  28.     color:#ffffff;
  29.     text-align:center;
  30.   }

  31. /* 手机外框线 */
  32. .div_1{
  33. width: 428px;
  34. height: 766px;
  35. background: #005757;
  36. border-radius: 30px 30px 30px 30px;
  37. }
  38. .div_2{
  39. width: 424px;
  40. height: 762px;
  41. background: #ECFFFF;
  42. border-radius: 30px 30px 30px 30px;
  43. }
  44. .div_3{
  45. width: 318px;
  46. height: 766px;
  47. background: #005757;
  48. border-radius: 30px 30px 30px 30px;
  49. }
  50. .div_4{
  51. width: 314px;
  52. height: 762px;
  53. background: #00CACA;
  54. border-radius: 30px 30px 30px 30px;
  55. }
  56. /* 主屏框及背景(仿人脸识别效果) */
  57. .div_5{
  58. width: 308px;
  59. height: 758px;
  60. background: url('http://www.ii23.cn/data/attachment/forum/201908/08/100652nnrc1c3l1sron7nz.jpg');
  61. border-radius: 30px 30px 30px 30px;
  62. }

  63. .div_a{
  64. width: 420px;
  65. height: 758px;
  66. background: #00CACA;
  67. border-radius: 30px 30px 30px 30px;
  68. }
  69. .div_b{
  70. width: 310px;
  71. height: 758px;
  72. background: #4DFFFF;
  73. border-radius: 30px 30px 30px 30px;
  74. text-align: center;
  75. }
  76. /* 主镜头区域 */
  77. .div_c1{
  78. width:40px;
  79. height:40px;
  80. border-radius:100%;
  81. border:2px solid #000000;
  82. }
  83. .div_c2{
  84. width:4px;
  85. height:4px;
  86. background: #000000;
  87. border-radius: 50%;
  88. text-align: center;
  89. }
  90. .div_c3{
  91. width:10px;
  92. height:10px;
  93. border-radius:50%;
  94. background: #ffffff;
  95. }
  96. .div_c4{
  97. width:40px;
  98. height:40px;
  99. border-radius:50%;
  100. background: #000000;
  101. }
  102. /* 指纹锁圈 */.div_c5{
  103. width:46px;
  104. height:46px;
  105. border-radius:100%;
  106. border:2px solid #ffffff;
  107. }
  108. /* 前置摄像头 */
  109. .div_c6{
  110. width:7px;
  111. height:7px;
  112. border-radius:50%;
  113. background: #6C6C6C;
  114. }
  115. /* 听筒区域 */
  116. .div_d{
  117. width: 120px;
  118. height: 15px;
  119. background: #000000;
  120. border-radius: 0px 0px 30px 30px;
  121. }

  122. /* 旋转头像 */
  123. *{
  124. margin: 0px;
  125. padding: 0px;
  126. }
  127. .div_h{
  128. width:160px;
  129. height:160px;
  130. border-radius:100%;
  131. border:2px solid #ecffff;
  132. margin:100px auto;
  133. animation:rotate 20s linear infinite;
  134. }
  135. @keyframes rotate{
  136. from{
  137. transform:rotate(0deg);
  138. }
  139. to{
  140. transform:rotate(-360deg);
  141. }
  142. }
  143. /* 电池 */
  144. .circlex{
  145. width:2px;
  146. height:4px;
  147. background: #ffffff;
  148.   text-align: center;
  149. }
  150. .circley{
  151. width:20px;
  152. height:8px;
  153. background: #000000;
  154. border:1px solid #ffffff;
  155.   text-align: center;
  156. }
  157. .circlez{
  158. width:2px;
  159. height:8px;
  160. background: #EA0000;
  161.   text-align: center;
  162. }
  163. /* 充电状态 */
  164. .LeftTriangle1{
  165.      width: 0;
  166.      height: 0;
  167.      border-width: 0px 4px 3px 0px;
  168.      border-color: #ffffff transparent;
  169.      border-style: solid;
  170.    }
  171. .RightTriangle2{
  172.      width: 0;
  173.      height: 0;
  174.      border-width: 3px 0px 0px 4px;
  175.      border-color: #ffffff transparent;
  176.      border-style: solid;
  177.   }
  178. /* wifi标志 */
  179. .circle1{
  180.     width: 10px;
  181.     height: 5px;
  182.     border: 1px solid #ffffff;
  183.     border-radius: 30% 30% 0 0/100% 100% 0 0;
  184.     border-bottom: none;
  185. }
  186. .circle2{
  187.     width: 8px;
  188.     height: 4px;
  189.     border: 1px solid #ffffff;
  190.     border-radius: 30% 30% 0 0/100% 100% 0 0;
  191.     border-bottom: none;
  192. }
  193. .circle3{
  194.     width: 6px;
  195.     height: 3px;
  196.     border: 1px solid #ffffff;
  197.     border-radius: 30% 30% 0 0/100% 100% 0 0;
  198.     border-bottom: none;
  199. }
  200. .circle4{
  201. width:3px;
  202. height:3px;
  203. background: #ffffff;
  204. border-radius: 50%;
  205. text-align: center;
  206. }
  207. /* 4G信号 */
  208. .circlea{
  209. width:2px;
  210. height:10px;
  211. background: #ffffff;
  212.   text-align: center;
  213. }
  214. .circleb{
  215. width:2px;
  216. height:8px;
  217. background: #ffffff;
  218. text-align: center;
  219. }
  220. .circlec{
  221. width:2px;
  222. height:6px;
  223. background: #ffffff;
  224. text-align: center;
  225. }
  226. .circled{
  227. width:2px;
  228. height:4px;
  229. background: #ffffff;
  230. text-align: center;
  231. }
  232. .circlee{
  233. width:2px;
  234. height:2px;
  235. background: #ffffff;
  236. text-align: center;
  237. }

  238. </style>

  239. <p></p><div align="center"><div class="div_1" style="left: 0px; top: 0px; position: relative;">
  240. <div class="div_2" style="left: 2px; top: 2px; position: absolute;">
  241. <div class="div_a" style="left: 2px; top: 2px; position: absolute;">

  242. <div class="div_c1" style="left: 20px; top: 30px; position: absolute;">
  243. <div class="div_c4">
  244. </div></div>
  245. <div class="div_c2" style="left: 40px; top: 79px; position: absolute;"></div>
  246. <div class="div_c3" style="left: 38px; top: 90px; position: absolute;"></div>

  247. <div class="div_3" style="top: -4px; right: -4px; position: absolute;">
  248. <div class="div_4" style="top: 1px; right: 2px; position: absolute;">
  249. <div class="div_b" style="top: 1px; right: 2px; position: absolute;">
  250. <div class="div_5" style="top: 1px; right: 1px; position: absolute;">

  251. <div class="div_d" style="top: 0px; right: 95px; position: absolute;">
  252. <div style="background: rgb(108,108,108); left: 40px; top: 5px; width: 40px; height: 5px; position: absolute; border-radius: 2px 2px 2px 2px; ">
  253. </div>
  254. <div class="div_c6" style="top: 4px; right: 20px; position: absolute;"></div>
  255. </div>

  256. <div id="show1" style="left: 10px; top: 0px; width: 100px; position: absolute;" ><body></body>
  257. </div>

  258. <div class="circlex" style="top: 7px; right: 20px; position: absolute;"></div>
  259. <div class="circley" style="top: 4px; right: 22px; position: absolute;">
  260. <div class="circlez" style="top: 0px; left: 0px; position: absolute;"></div>
  261. <div class="LeftTriangle1" style="top: 1px; left: 8px; position: absolute;"></div>
  262. <div class="RightTriangle2" style="top: 3px; left: 4px; position: absolute;"></div>

  263. </div>

  264. <div class="circle1" style="top: 4px; right: 51px; position: absolute;"></div>
  265. <div class="circle2" style="top: 6px; right: 52px; position: absolute;"></div>
  266. <div class="circle3" style="top: 8px; right: 53px; position: absolute;"></div>
  267. <div class="circle4" style="top: 11px; right: 55px; position: absolute;"></div>

  268. <div class="circlea" style="top: 2px; right: 70px; position: absolute;"></div>
  269. <div class="circleb" style="top: 4px; right: 73px; position: absolute;"></div>
  270. <div class="circlec" style="top: 6px; right: 76px; position: absolute;"></div>
  271. <div class="circled" style="top: 8px; right: 79px; position: absolute;"></div>
  272. <div class="circlee" style="top: 10px; right: 82px; position: absolute;"></div>
  273. <div style="top: -3px; right: 82px; position: absolute;"> <font size="1px" color="white" face="Mingliu">4G</font> </div>

  274. <div style="left: 90px; top: 50px; position: absolute;">
  275. <p><strong><font color="#00e3e3" size="4">
  276. 梦在丽江</font></strong></p><p><font color="#00caca">作曲:胡晓流
  277. </font></p><p><font color="#00caca">填词/演唱:阿西古浪</font>
  278. </p></div>

  279. <div class="div_h" style="left: 75px; top: 45px; position: absolute;">
  280. <img width="160" height="160" style="border-radius: 80px;" src="http://www.ii23.cn/data/attachment/forum/201908/07/224518kzhb989hvg55g809.jpg" border="0">
  281. </div>


  282. <div style="position:absolute; top: 740px; left:-50px; ">
  283. <meta charset="utf-8">
  284. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  285. <title>特制音乐播放器(透明,歌词同步)</title>
  286. <style>
  287. @font-face{format("svg");
  288.         font-weight:400;font-style:normal}
  289.         //.aplayer-narrow{width:306px;height:50px}//
  290.         .aplayer-narrow .aplayer-info{display:none}
  291.         .aplayer-withlrc.aplayer-narrow{width:306px;height:0px}
  292.         //.aplayer-withlrc.aplayer//
  293.         .aplayer-withlrc.aplayer .aplayer-info{margin-left:0px;height:0px}
  294.         .aplayer-withlrc.aplayer .aplayer-lrc{display:block;}
  295.         .aplayer{
  296.         font-family: Arial,Helvetica,sans-serif;
  297.         margin: 2px;
  298.         -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
  299.         box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
  300.         -webkit-border-radius: 2px;
  301.         border-radius: 10px;
  302.         overflow: hidden;
  303.         -webkit-user-select: none;
  304.         -moz-user-select: none;
  305.         -ms-user-select: none;
  306.         user-select: none;
  307.         background-color: #FBFBFB;
  308. }

  309.         .aplayer [class*=" aplayer-icon-"]:before,
  310.         .aplayer [class^=aplayer-icon-]:before{font-family:aplayer-fontello;font-style:normal;font-weight:400;display:inline-block;text-decoration:inherit;width:1em;text-align:center;font-variant:normal;text-transform:none;line-height:1em; font-size: 10px; font-color:#4DFFFF;bottom:2px;left:3px; position:absolute; width:12px;height:12px;border:2px solid #d0d0d0;border-radius: 10px;
  311. } //按钮位置和大小end//
  312.         .aplayer [class*=" aplayer-icon-"]:before,
  313.         .aplayer [class^=aplayer-icon-]:before{font-family:aplayer-fontello;font-style:normal;font-weight:400;display:inline-block;text-decoration:inherit;width:1em;text-align:center;font-variant:normal;text-transform:none;line-height:1em;font-color:#4DFFFF;position:absolute;top:2px; left:2px;}
  314.         .aplayer .aplayer-lrc-content,.aplayer .aplayer-pic .aplayer-hide{display:none}
  315.         .aplayer .aplayer-icon-weibo:before{content:'\25b6'}
  316.         .aplayer .aplayer-icon-play:before{content:'\25b6'}
  317.         .aplayer .aplayer-icon-pause:before{content:'\23f8'}
  318.         .aplayer .aplayer-icon-to-start:before{content:'\23ef'}//设置按钮键

  319.         .aplayer span{cursor:default!important}
  320.         .aplayer{position:absolute;top: 0px; left:0px; height:52px;width:290px;filter:Alpha(opacity=0);BACKGROUND:transparent;}//播放器区域的大小//

  321.         .aplayer .aplayer-info .aplayer-controller
  322.         .aplayer-bar-wrap{margin:0 120px 0 5px}
  323.         .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar{position:absolute;height:2px; top:42px;left:22px;width:180px;background:#cdcdcd;cursor:pointer!important}//进度条长度及位置//
  324.         .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded{position:absolute;left:0;top:0;bottom:0;background:#aaa;height:2px;-webkit-transition:all .5s ease;transition:all .5s ease}.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played{position:absolute;left:0;top:0;bottom:0;background:#b7daff;height:2px}
  325.         .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb{position:absolute;top:0;right:5px;margin-top:-4px;margin-right:-10px;height:8px;width:8px;border:1px solid #b7daff;-webkit-border-radius:50%;border-radius:50%;background:#fff;cursor:pointer!important;border:0px}
  326.         .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb:hover{background:#b7daff}
  327.         .aplayer .aplayer-info .aplayer-controller .aplayer-time{position:absolute;right:0;bottom:0px;height:17px;color:#4DFFFF;font-size:11px}//时间//
  328.         .aplayer .aplayer-info .aplayer-controller .aplayer-time i{color:#666;font-size:15px}
  329.         .aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap{display:inline-block;margin-left:7px;cursor:pointer!important}
  330.         .aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap:hover .aplayer-volume-bar-wrap{display:block}.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap{display:none;position:absolute;bottom:17px;right:-5px;width:25px;height:40px;z-index:99}
  331.         .aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar{position:absolute;bottom:0;right:10px;width:5px;height:35px;background:#aaa}
  332.         .aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar .aplayer-volume{position:absolute;bottom:0;right:0;width:5px;background:#b7daff}
  333.         .aplayer .aplayer-lrc{display:none;position:absolute; left:50px; top:10px; height:40px; width: 200; text-align:center;overflow:hidden;margin:-10px 0 10px;filter:Alpha(opacity=0);BACKGROUND:transparent}//歌词区域//
  334.         .aplayer .aplayer-lrc:after,.aplayer .aplayer-lrc:before{position:absolute;z-index:1;display:block;overflow:hidden;content:' ';width:100%}
  335.         .aplayer .aplayer-lrc:before{top:0;height:10%;background:-webkit-linear-gradient(top,#fff 0,rgba(255,255,255,0) 100%);
  336. //background:-webkit-gradient(linear,left top,left bottom,from(white),to(rgba(255,255,255,0)));//
  337. //background:linear-gradient(to bottom,#fff 0,rgba(255,255,255,0) 100%);//
  338. filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0 )}
  339.         .aplayer .aplayer-lrc:after{bottom:0;height:33%;
  340. //background:-webkit-linear-gradient(bottom,#fff 0,rgba(255,255,255,0) 100%);//
  341. //background:-webkit-gradient(linear,left bottom,left top,from(white),to(rgba(255,255,255,0)));//
  342. //background:linear-gradient(to top,#fff 0,rgba(255,255,255,0) 100%);//
  343. filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0 )}
  344.         .aplayer .aplayer-lrc p{font-size:12px;color: #00CACA;line-height:20px;padding:0;margin:0;-webkit-transition:all .5s ease-out;transition:all .5s ease-out;opacity:.4}
  345.         .aplayer .aplayer-lrc p.aplayer-lrc-current{opacity:1}
  346.         .aplayer .aplayer-lrc .aplayer-lrc-contents{width:100%;-webkit-transition:all .5s ease-out;transition:all .5s ease-out}
  347. .demo {
  348.     width: 290px; height: 52px;
  349.     margin: 0px auto;
  350.     border-radius: 10px;
  351.     align:center;
  352.     position: relative;
  353. }
  354. .demo p {
  355.     padding: 10px 0;
  356.     position: relative;
  357.     left: 0px;
  358.     opacity: 0.5;
  359. }
  360. </style>

  361. <div class="demo" position:relative;top: 0px; left:0px; height:52px;>
  362. <p><strong></strong></p>
  363. <div id="player3" class="aplayer" style="top:-240px;left:55px; position:absolute;">
  364. <pre class="aplayer-lrc-content">
  365. [offset:0]
  366. [00:00.18]梦在丽江
  367. [00:10.00]填词/演唱:阿西古浪
  368. [00:20.00]曲:胡晓流
  369. [00:30.10]合声:马斌/马强/祝生
  370. [00:30.20]录音:方雄
  371. [00:30.30]后期:深圳索亚文化传播有限公司
  372. [00:30.39]在梦一样的丽江
  373. [00:36.93]我遇见了梦一样的姑娘
  374. [00:43.95]她的眼睛是那么明亮
  375. [00:50.82]总在我梦中徜徉
  376. [00:57.28]在梦一样的丽江
  377. [01:03.51]我弄丢了梦一样的姑娘
  378. [01:10.38]你就是一首多情的诗啊
  379. [01:16.80]在我记忆的海洋里荡漾
  380. [01:27.24]我的梦一直在丽江
  381. [01:33.92]一直追寻的你啊就像梦一样
  382. [01:40.41]我的姑娘留在了丽江
  383. [01:47.16]一直等待的你啊就像梦一样
  384. [02:23.50]在梦一样的丽江
  385. [02:30.26]我遇见了梦一样的姑娘
  386. [02:37.12]她的眼睛是那么明亮
  387. [02:44.04]总在我梦中徜徉
  388. [02:50.42]在梦一样的丽江
  389. [02:56.80]我弄丢了梦一样的姑娘
  390. [03:03.67]你就是一首多情的诗啊
  391. [03:10.39]在我记忆的海洋里荡漾
  392. [03:20.21]我的梦一直在丽江
  393. [03:27.09]一直追寻的你啊就像梦一样
  394. [03:33.63]我的姑娘留在了丽江
  395. [03:40.43]一直等待的你啊就像梦一样
  396. [03:50.30]我的梦一直在丽江
  397. [03:57.20]一直追寻的你啊就像梦一样
  398. [04:03.68]我的心啊留在了丽江
  399. [04:10.36]永远等待的你啊回到我身旁
  400. </pre>

  401. </div></div>

  402. <script>
  403. function APlayer(e)
  404. {if(!("music"in e&&"title"in e.music&&"author"in e.music&&"url"in e.music&&"pic"in e.music))throw"APlayer Error: Music, music.title, music.author, music.url, music.pic are required in options";if(null===e.element)throw"APlayer Error: element option null";this.isMobile=navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i),this.isMobile&&(e.autoplay=!1);var a={element:document.getElementsByClassName("aplayer")[0],narrow:!1,autoplay:!1,showlrc:!1};for(var t in a)a.hasOwnProperty(t)&&!e.hasOwnProperty(t)&&(e[t]=a[t]);this.option=e}

  405. APlayer.prototype.init=function(){function e(e)
  406. {var a=e||window.event,i=(a.clientX-t(m.bar))/p;i=i>0?i:0,i=1>i?i:1,m.updateBar.call(m,"played",i,"width"),m.option.showlrc&&m.updateLrc.call(m,parseFloat(m.playedBar.style.width)/100*m.audio.duration),m.element.getElementsByClassName("aplayer-ptime")[0].innerHTML=m.secondToTime(i*m.audio.duration)}function a(){document.removeEventListener("mouseup",a),document.removeEventListener("mousemove",e),m.audio.currentTime=parseFloat(m.playedBar.style.width)/100*m.audio.duration,m.play()}function t(e){for(var a,t=e.offsetLeft,i=e.offsetParent;null!==i;)t+=i.offsetLeft,i=i.offsetParent;return a=document.body.scrollLeft+document.documentElement.scrollLeft,t-a}function i(e){for(var a,t=e.offsetTop,i=e.offsetParent;null!==i;)t+=i.offsetTop,i=i.offsetParent;return a=document.body.scrollTop+document.documentElement.scrollTop,t-a}

  407. if(this.element=this.option.element,this.music=this.option.music,this.option.showlrc)
  408. {this.lrcTime=[],this.lrcLine=[];for(var l=this.element.getElementsByClassName("aplayer-lrc-content")[0].innerHTML,s=l.split(/\n/),n=/\[(\d{2}):(\d{2})\.(\d{2})]/,r=/](.*)$/,o=0;o<s.length;o++)
  409. {var d=n.exec(s[o]),c=r.exec(s[o]);d&&c&&(this.lrcTime.push(60*parseInt(d[1])+parseInt(d[2])+parseInt(d[3])/100),this.lrcLine.push(c[1]))}}

  410. if(this.element.innerHTML='<div class="aplayer-pic"><img src="'+this.music.pic+'"><div class="aplayer-button aplayer-pause aplayer-hide"><i class="demo-icon aplayer-icon-pause"></i></div><div class="aplayer-button aplayer-play"><i class="demo-icon aplayer-icon-play"></i></div></div><div class="aplayer-info"><div class="aplayer-music"><span class="aplayer-title">'+this.music.title+'</span><span class="aplayer-author">努力加载中,好累啊</span></div><div class="aplayer-lrc"><div class="aplayer-lrc-contents" style="transform: translateY(0);"></div></div><div class="aplayer-controller"><div class="aplayer-bar-wrap"><div class="aplayer-bar"><div class="aplayer-loaded" style="width: 0"></div><div class="aplayer-played" style="width: 0"><span class="aplayer-thumb"></span></div></div></div><div class="aplayer-time"><span class="aplayer-ptime">00:00</span> / <span class="aplayer-dtime">(o゚▽゚)</span><div class="aplayer-volume-wrap"><i class="demo-icon aplayer-icon-volume-down"></i><div class="aplayer-volume-bar-wrap"><div class="aplayer-volume-bar"><div class="aplayer-volume" style="height: 80%"></div></div></div></div></div></div></div>',this.option.showlrc){this.element.classList.add("aplayer-withlrc");var u="";for(this.lrcContents=this.element.getElementsByClassName("aplayer-lrc-contents")[0],o=0;o<this.lrcLine.length;o++)u+="<p>"+this.lrcLine[o]+"</p>";this.lrcContents.innerHTML=u,this.lrcIndex=0,this.lrcContents.getElementsByTagName("p")[0].classList.add("aplayer-lrc-current")}this.option.narrow&&this.element.classList.add("aplayer-narrow"),this.audio=document.createElement("audio"),this.audio.src=this.music.url,this.audio.loop=!0,this.audio.preload="metadata";var m=this;this.audio.addEventListener("durationchange",function(){1!==m.audio.duration&&(m.element.getElementsByClassName("aplayer-dtime")[0].innerHTML=m.secondToTime(m.audio.duration))}),this.audio.addEventListener("loadedmetadata",function(){m.element.getElementsByClassName("aplayer-author")[0].innerHTML=m.music.author,m.loadedTime=setInterval(function(){var e=m.audio.buffered.end(m.audio.buffered.length-1)/m.audio.duration;m.updateBar.call(m,"loaded",e,"width"),1===e&&clearInterval(m.loadedTime)},500)}),this.audio.addEventListener("error",function(){m.element.getElementsByClassName("aplayer-author")[0].innerHTML="----- 歌曲链接失效"}),this.playButton=this.element.getElementsByClassName("aplayer-play")[0],this.pauseButton=this.element.getElementsByClassName("aplayer-pause")[0],this.playButton.addEventListener("click",function(){m.play.call(m)}),this.pauseButton.addEventListener("click",function(){m.pause.call(m)}),this.playedBar=this.element.getElementsByClassName("aplayer-played")[0],this.loadedBar=this.element.getElementsByClassName("aplayer-loaded")[0],this.thumb=this.element.getElementsByClassName("aplayer-thumb")[0],this.bar=this.element.getElementsByClassName("aplayer-bar")[0];var p;this.bar.addEventListener("click",function(e){var a=e||window.event;p=m.bar.clientWidth;var i=(a.clientX-t(m.bar))/p;m.updateBar.call(m,"played",i,"width"),m.element.getElementsByClassName("aplayer-ptime")[0].innerHTML=m.secondToTime(i*m.audio.duration),m.audio.currentTime=parseFloat(m.playedBar.style.width)/100*m.audio.duration}),this.thumb.addEventListener("mousedown",function(){p=m.bar.clientWidth,clearInterval(m.playedTime),document.addEventListener("mousemove",e),document.addEventListener("mouseup",a)}),this.audio.volume=.8,this.volumeBar=this.element.getElementsByClassName("aplayer-volume")[0];var y=this.element.getElementsByClassName("aplayer-volume-bar")[0],h=m.element.getElementsByClassName("aplayer-time")[0].getElementsByTagName("i")[0],v=35;this.element.getElementsByClassName("aplayer-volume-bar-wrap")[0].addEventListener("click",function(e){var a=e||window.event,t=(v-a.clientY+i(y))/v;t=t>0?t:0,t=1>t?t:1,m.updateBar.call(m,"volume",t,"height"),m.audio.volume=t,m.audio.muted&&(m.audio.muted=!1),1===t?h.className="demo-icon aplayer-icon-volume-up":h.className="demo-icon aplayer-icon-volume-down"}),h.addEventListener("click",function(){m.audio.muted?(m.audio.muted=!1,h.className=1===m.audio.volume?"demo-icon aplayer-icon-volume-up":"demo-icon aplayer-icon-volume-down",m.updateBar.call(m,"volume",m.audio.volume,"height")):(m.audio.muted=!0,h.className="demo-icon aplayer-icon-volume-off",m.updateBar.call(m,"volume",0,"height"))}),this.option.autoplay&&this.play()},APlayer.prototype.play=function(){this.playButton.classList.add("aplayer-hide"),this.pauseButton.classList.remove("aplayer-hide"),this.audio.play();var e=this;this.playedTime=setInterval(function(){e.updateBar.call(e,"played",e.audio.currentTime/e.audio.duration,"width"),e.option.showlrc&&e.updateLrc.call(e),e.element.getElementsByClassName("aplayer-ptime")[0].innerHTML=e.secondToTime(e.audio.currentTime)},100)},APlayer.prototype.pause=function(){this.pauseButton.classList.add("aplayer-hide"),this.playButton.classList.remove("aplayer-hide"),this.audio.pause(),clearInterval(this.playedTime)},APlayer.prototype.updateBar=function(e,a,t){a=a>0?a:0,a=1>a?a:1,this[e+"Bar"].style[t]=100*a+"%"},APlayer.prototype.updateLrc=function(e){if(e||(e=this.audio.currentTime),e<this.lrcTime[this.lrcIndex]||e>=this.lrcTime[this.lrcIndex+1])for(var a=0;a<this.lrcTime.length;a++)e>=this.lrcTime[a]&&(!this.lrcTime[a+1]||e<this.lrcTime[a+1])&&(this.lrcIndex=a,this.lrcContents.style.transform="translateY("+20*-this.lrcIndex+"px)",this.lrcContents.getElementsByClassName("aplayer-lrc-current")[0].classList.remove("aplayer-lrc-current"),this.lrcContents.getElementsByTagName("p")[a].classList.add("aplayer-lrc-current"))},APlayer.prototype.secondToTime=function(e){var a=function(e){return 10>e?"0"+e:""+e},t=parseInt(e/60),i=parseInt(e-60*t);return a(t)+":"+a(i)};
  411. </script>
  412. <script>
  413.         var ap3 = new APlayer({
  414.                 element: document.getElementById('player3'),//样式1
  415.                 narrow: false,
  416.                 autoplay: true,
  417.                 showlrc: true,
  418.                 music: {
  419.                         title: '',
  420.                         author: '',
  421.               url: 'http://fs.open.kugou.com/4bce7b696df18ac5cf71eacf8ef81857/5d53f1a1/G157/M05/06/11/3Q0DAFzZQ6SAFm6PAELgfi8Tj78302.mp3',
  422.                         pic: ''
  423.                 }
  424.         });
  425.         ap3.init();
  426. </script>

  427. </div>

  428. <div style="left: 50px; top: 600px; position: absolute;">单曲循环太久,正在超级快充 1%</div>

  429. <div class="div_c5" style="left: 126px; top: 650px; position: absolute;">
  430. <img width="46" height="46" style="border-radius: 23px;" src="http://www.ii23.cn/data/attachment/forum/201908/08/085853cqmftjq7o2yqb7am.jpg" border="0"> </div>

  431. <div style="left: 108px; top: 715px; position: absolute;"><p>☺正在识别人脸</p></div>

  432. <div style="background: rgb(255, 255, 255); left: 125px; top: 745px; width: 70px; height: 5px; position: absolute; border-radius: 2px 2px 2px 2px; ">
  433. </div>


  434. </div></div></div></div></div></div></div></div>
复制代码

回复

使用道具 举报

 成长值: 36052

签到天数: 1445 天

[LV.10]以坛为家III

单身中……
帮我摆脱单身吧
发表于 2019-8-7 22:53:36 | 显示全部楼层
听说沙发是留给客人坐的,你11111111把座位占了,我还得坐板凳。

评分

参与人数 1金钱 +2 收起 理由
II.〆石Zi° + 2 ~~~

查看全部评分

回复

使用道具 举报

 成长值: 12800

签到天数: 1689 天

[LV.Master]伴坛终老

单身中……
帮我摆脱单身吧
发表于 2019-8-8 05:58:05 | 显示全部楼层
本帖最后由 彩虹密码 于 2019-8-8 07:34 编辑

感谢石子老师把这首个做成帖子送我,我非常喜欢这首歌,每天都听,
曲调优美,淡淡的忧伤,歌词讲述了一个故事,姑娘丢在丽江,梦也留在丽江,舒发了歌者深深的情怀

评分

参与人数 1金钱 +2 收起 理由
II.〆石Zi° + 2 ~~~

查看全部评分

回复

使用道具 举报

 成长值: 16464

签到天数: 651 天

[LV.9]以坛为家II

輪茴、莪等珎
幸福:1651℃
发表于 2019-8-8 08:14:02 | 显示全部楼层
记得第一次听阿西古浪是那首 :   亲爱的你  我是爱人

他的声音很能打动人
再听这首梦在丽江
那熟悉的旋律
只想静静的听


这手机做的比我的手机高级了哈
嘿嘿
做的非常好,代码俺拿去了
这里再说一声   “谢谢”

评分

参与人数 1金钱 +2 收起 理由
II.〆石Zi° + 2 ~~~

查看全部评分

回复

使用道具 举报

 成长值: 20023

签到天数: 1722 天

[LV.Master]伴坛终老

单身中……
帮我摆脱单身吧
发表于 2019-8-8 08:26:16 | 显示全部楼层
有点懒散的声音呢感觉
好听,彩虹收贴开心哦

评分

参与人数 2金钱 +3 收起 理由
II.〆石Zi° + 1 欢迎访问ii23休闲社区,祝您玩得愉快!
彩虹密码 + 2

查看全部评分

回复

使用道具 举报

 成长值: 48064

签到天数: 2277 天

[LV.Master]伴坛终老

单身中……
帮我摆脱单身吧
梦是丢不了的。闭上眼即浮现。。。

评分

参与人数 1金钱 +2 收起 理由
II.〆石Zi° + 2 ~~~

查看全部评分

回复

使用道具 举报

 成长值: 810

签到天数: 129 天

[LV.7]常住居民III

单身中……
帮我摆脱单身吧
发表于 2019-8-8 12:38:47 | 显示全部楼层
这个手机更大气上档次哈,还是竖屏的,加分带走了,
彩虹收贴开森昂。

评分

参与人数 2金钱 +4 收起 理由
II.〆石Zi° + 2 ~~~~
彩虹密码 + 2

查看全部评分

回复

使用道具 举报

 成长值: 51404

签到天数: 2522 天

[LV.Master]伴坛终老

訡詩
幸福:9067℃
发表于 2019-8-8 13:18:18 | 显示全部楼层
不介意你弄个6SP的过来。

评分

参与人数 1金钱 +2 收起 理由
II.〆石Zi° + 2 ~~~

查看全部评分

回复

使用道具 举报

 成长值: 27840

签到天数: 799 天

[LV.10]以坛为家III

一骑绝尘
幸福:922℃
发表于 2019-8-8 15:27:27 | 显示全部楼层
这个手机很漂亮,做工很精良,细节很到位。

评分

参与人数 1金钱 +2 收起 理由
II.〆石Zi° + 2 ~~~

查看全部评分

回复

使用道具 举报

 成长值: 5225

签到天数: 2277 天

[LV.Master]伴坛终老

单身中……
帮我摆脱单身吧
发表于 2019-8-9 10:21:32 | 显示全部楼层
这个手机大气,喜欢,谢谢分享

评分

参与人数 1金钱 +2 收起 理由
II.〆石Zi° + 2 ~~~

查看全部评分

回复

使用道具 举报

 成长值: 12672

签到天数: 2497 天

[LV.Master]伴坛终老

单身中……
帮我摆脱单身吧
发表于 2019-8-9 11:10:16 | 显示全部楼层
竖屏给好评
蹭歌不多说了

评分

参与人数 1金钱 +1 收起 理由
II.〆石Zi° + 1 ~~~

查看全部评分

回复

使用道具 举报

 成长值: 63498

签到天数: 2316 天

[LV.Master]伴坛终老

獨噯丶婼詩
幸福:10071℃
发表于 2019-8-10 09:55:20 | 显示全部楼层
一氺柔澜 发表于 2019-8-8 15:27
这个手机很漂亮,做工很精良,细节很到位。

时间、信号、wifi、电池容量都加了。全代码编制。

评分

参与人数 1金钱 +2 收起 理由
彩虹密码 + 2

查看全部评分

回复

使用道具 举报

 成长值: 12672

签到天数: 2497 天

[LV.Master]伴坛终老

单身中……
帮我摆脱单身吧
发表于 2019-8-10 12:00:52 | 显示全部楼层
II.〆石Zi° 发表于 2019-8-10 09:55
时间、信号、wifi、电池容量都加了。全代码编制。

差个运营商图标
回复

使用道具 举报

 成长值: 63498

签到天数: 2316 天

[LV.Master]伴坛终老

獨噯丶婼詩
幸福:10071℃
发表于 2019-8-10 12:29:00 | 显示全部楼层

没看到过真机,xr的网上图片都不显示运营商。

评分

参与人数 1金钱 +2 收起 理由
彩虹密码 + 2

查看全部评分

回复

使用道具 举报

 成长值: 12672

签到天数: 2497 天

[LV.Master]伴坛终老

单身中……
帮我摆脱单身吧
发表于 2019-8-10 14:57:58 | 显示全部楼层
II.〆石Zi° 发表于 2019-8-10 12:29
没看到过真机,xr的网上图片都不显示运营商。

买一个看看不就得了
回复

使用道具 举报

 成长值: 63498

签到天数: 2316 天

[LV.Master]伴坛终老

獨噯丶婼詩
幸福:10071℃
发表于 2019-8-11 09:36:37 | 显示全部楼层
II.〆菁儿° 发表于 2019-8-8 08:26
有点懒散的声音呢感觉
好听,彩虹收贴开心哦

同步歌词、透明的播放器搞定了。

评分

参与人数 1金钱 +2 收起 理由
彩虹密码 + 2

查看全部评分

回复

使用道具 举报

 成长值: 38408

签到天数: 1525 天

[LV.Master]伴坛终老

单身中……
帮我摆脱单身吧
发表于 2019-8-14 22:20:17 | 显示全部楼层
瞅着呢些码就头大

评分

参与人数 1金钱 +1 收起 理由
II.〆石Zi° + 1 请勿回复过时老旧帖。

查看全部评分

回复

使用道具 举报

 成长值: 38408

签到天数: 1525 天

[LV.Master]伴坛终老

单身中……
帮我摆脱单身吧
发表于 2019-8-14 22:21:03 | 显示全部楼层
不过,石头哥把脸晒一晒来,看看能识别不
回复

使用道具 举报

 成长值: 63498

签到天数: 2316 天

[LV.Master]伴坛终老

獨噯丶婼詩
幸福:10071℃
发表于 7 天前 | 显示全部楼层
栀夏° 发表于 2019-8-8 12:38
这个手机更大气上档次哈,还是竖屏的,加分带走了,
彩虹收贴开森昂。

把代码更新全了,并加了说明解释文字。

比较成功的是:手机左上角时间的显示,以及透明、歌词同步播放器的制作。

其他代码就比较简单,CSS+定位。

评分

参与人数 1金钱 +2 收起 理由
栀夏° + 2 哈哈,原来又更新了,那我再去存一下

查看全部评分

回复

使用道具 举报

本版积分规则

小黑屋|手机版|Archiver|广告合作|ii23休闲社区 ( 闽ICP备09017971号  
会员言论仅代表个人观点,所有内容由网友自由发布,如侵害你的权益,请联系我们在24小时协助您处理完毕。

GMT+8, 2019-8-23 16:55 , Processed in 0.118884 second(s), 92 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表