【醉美人--安子&九妹】提前祝你生日快乐！@栀夏°
本帖最后由 II.〆石Zi° 于 2020-9-4 20:35 编辑 <br /><br /><div style="width:1200px;height: 600px; left: -300px; top: -50px; position: relative;"><img width="1200" src="http://www.ii23.cn/data/attachment/forum/202009/04/193238oxckhhye7evygpeh.jpg">
<div style="width:1200px;height: 1px; background:#ffffff;left: 0px; top: 635px; position: absolute;"></div>
<div style="width:280px;right: 60px; top: 120px; position:absolute;opacity:1;"><img width="280" height="350"src="http://www.ii23.cn/data/attachment/forum/202008/28/214957rm80eikl3joaip30.gif
" border="0"></div>
<div style="left: 290px; top: 260px; position:absolute;">
<title>II23休闲社区II.〆石Zi°特制音乐播放器，歌词同步，颜色风格可调</title>
<style>
@font-face{format("svg");
font-weight:400;font-style:normal}
.aplayer-narrow .aplayer-info{display:none}
.aplayer-withlrc.aplayer .aplayer-info{margin-left:0px;height:0px}
.aplayer-withlrc.aplayer .aplayer-lrc{display:block;}
.aplayer{
font-family: Arial,Helvetica,sans-serif;
margin: 0px;
box-shadow: 0 0px 0px 0 rgba(0,0,121,.14),0 0px 0px -0px rgba(0,0,121,.2),0 0px 0px 0 rgba(0,0,121,.12);/* 边框颜色等 */
border-radius: 10px;}/* 边框圆角 */
.aplayer span{cursor:default!important}
.aplayer{height:22px;width:270px; background-color: rgba(0,0,0,0.1);}/* 播放器区域的大小、颜色 、颜色中的参数a可调整透明度*/
.aplayer :before,
.aplayer :before{font-family:aplayer-fontello;font-style:normal;font-weight:400;display:inline-block;text-decoration:inherit;text-align:center;font-variant:normal;text-transform:none; line-height:16px; font-size: 14px; color:#ffffFF; width:17px;height:17px; border:1px solid #ffffFF; border-radius: 16px; position:absolute;bottom:2px; left:8px;} /* 按钮圈大小、颜色、位置，按钮字体大小、颜色 */
.aplayer-lrc-content,.aplayer .aplayer-hide{display:none}
.aplayer-icon-play:before{content:'\25b6'}
.aplayer-icon-pause:before{content:'\2016'} /* 设置按钮键 */
.aplayer-bar-wrap{height:1px; width:150px;background: rgba(200,0,0,0.9);position:absolute;left:32px;bottom:10px; }/* 进度条长度、位置及未播放段颜色 */
.aplayer-bar{-webkit-transition:all .5s ease;transition:all .5s ease}
.aplayer-played{position:absolute;left:0px;bottom:-2px; background:rgba(245,155,219,1);height:5px}/* 进度条已播放段颜色 */
.aplayer-thumb:hover{background: #FFFF00;}
.aplayer-thumb{position:absolute;top:2px;right:5px;margin-top:-3px;margin-right:-10px;height:6px;width:6px;border:1px solid rgba(250,0,0,0.9); border-radius:50%;background: rgba(245,155,219,1);cursor:pointer!important;}/* 进度球大小及颜色 */
.aplayer-time{position:absolute;right:6px;bottom:3px;height:17px;color: #ffffff;font-size:10px}/* 时间 */
.aplayer-lrc{display:none;height:20px; width: 250; position:absolute; top:-0px; text-align:center;overflow:hidden;margin:-10px 0 10px; filter:Alpha(opacity=0);BACKGROUND:transparent}/* 歌词区域大小，位置调整 */
.aplayer .aplayer-lrc p{font-size:14px;color: rgba(245,155,219,1);line-height:20px;padding:0;margin:0;-webkit-transition:all .5s ease-out;transition:all .5s ease-out;opacity:0.8} /* 歌词字体、颜色及大小，未播放歌词透明度 */
.aplayer-lrc p.aplayer-lrc-current{font-size:20px;font-weight:bold;color: rgba(245,155,219,1);opacity:1}/* 正播放歌词透明度 */
.aplayer-lrc .aplayer-lrc-contents{width:100%;-webkit-transition:all .5s ease-out;transition:all .5s ease-out}
.demo {
margin: 0px auto;
align:center;
}
.demo p {
padding: 10px 0;
opacity: 1;
}
</style>
<div class="demo">
<p><strong></strong></p>
<div id="player3" class="aplayer">
<pre class="aplayer-lrc-content">
醉美人--安子&九妹
小城故里岁月草木深
在百花深处遇见了你
风前月下觅得窈窕路
却不见当年佳人美如玉
轻声叹水向东流几时休
落花飞絮到江南岸
人归来是何年 独望月难全
而你嫣然一笑风雨城
为你洒下诗篇三百年
转身与你若如初见
美人花落地再生根许了谁家门
酒醒在何处念着你
岁月如梦 昨日无可留
此情悠悠 落在心头
一醉方休 江山多温柔
故地重游何人在等候
轻声叹水向东流几时休
落花飞絮到江南岸
人归来是何年 独望月难全
而你嫣然一笑风雨城
为你洒下诗篇三百年
转身与你若如初见
美人花落地再生根许了谁家门
酒醒在何处念着你
轻声叹水向东流几时休
落花飞絮到江南岸
人归来是何年 独望月难全
而你嫣然一笑风雨城
为你洒下诗篇三百年
转身与你若如初见
美人花落地再生根许了谁家门
酒醒在何处念着你
美人花落地再生根许了谁家门
酒醒在何处念着你
醉美人-安子与九妹
——End——
------------------------------------------------------------------------
</pre>
</div>
</div>
<script>
function APlayer(e)
{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"),narrow:!1,autoplay:!1,showlrc:!1};for(var t in a)a.hasOwnProperty(t)&&!e.hasOwnProperty(t)&&(e=a);this.option=e}
APlayer.prototype.init=function(){function e(e)
{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").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}
if(this.element=this.option.element,this.music=this.option.music,this.option.showlrc)
{this.lrcTime=[],this.lrcLine=[];for(var l=this.element.getElementsByClassName("aplayer-lrc-content").innerHTML,s=l.split(/\n/),n=/\[(\d{2}):(\d{2})\.(\d{2})]/,r=/](.*)$/,o=0;o<s.length;o++)
{var d=n.exec(s),c=r.exec(s);d&&c&&(this.lrcTime.push(60*parseInt(d)+parseInt(d)+parseInt(d)/100),this.lrcLine.push(c))}}
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"),o=0;o<this.lrcLine.length;o++)u+="<p>"+this.lrcLine+"</p>";this.lrcContents.innerHTML=u,this.lrcIndex=0,this.lrcContents.getElementsByTagName("p").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").innerHTML=m.secondToTime(m.audio.duration))}),this.audio.addEventListener("loadedmetadata",function(){m.element.getElementsByClassName("aplayer-author").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").innerHTML="歌曲链接失效"}),this.playButton=this.element.getElementsByClassName("aplayer-play"),this.pauseButton=this.element.getElementsByClassName("aplayer-pause"),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"),this.loadedBar=this.element.getElementsByClassName("aplayer-loaded"),this.thumb=this.element.getElementsByClassName("aplayer-thumb"),this.bar=this.element.getElementsByClassName("aplayer-bar");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").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");var y=this.element.getElementsByClassName("aplayer-volume-bar"),h=m.element.getElementsByClassName("aplayer-time").getElementsByTagName("i"),v=35;this.element.getElementsByClassName("aplayer-volume-bar-wrap").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").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.style=100*a+"%"},APlayer.prototype.updateLrc=function(e){if(e||(e=this.audio.currentTime),e<this.lrcTime||e>=this.lrcTime)for(var a=0;a<this.lrcTime.length;a++)e>=this.lrcTime&&(!this.lrcTime||e<this.lrcTime)&&(this.lrcIndex=a,this.lrcContents.style.transform="translateY("+20*-this.lrcIndex+"px)",this.lrcContents.getElementsByClassName("aplayer-lrc-current").classList.remove("aplayer-lrc-current"),this.lrcContents.getElementsByTagName("p").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)};
</script>
<script>
var ap3 = new APlayer({
element: document.getElementById('player3'),//样式1
narrow: false,
autoplay: true,
showlrc: true,
music: {
title: '',
author: '',
url: 'http://music.163.com/song/media/outer/url?id=407759202.mp3',
pic: ''
}
});
ap3.init();
</script>
</div>
</div>
<style>
.a_t{display:none!important}
.a_mu{display:none!important}
.scbar_txt_td{display:none!important}
.scbar_type_td{display:none!important}
.scbar_btn_td{display:none!important}
.scbar_hot_td{display:none!important}
//.pgs{display:none!important}
#wechat_float_qrcode{display:none!important}
.scrolltopa{display:none!important}
#scrolltop{display:none!important}
.returnlist{display:none!important}
.pstatus{display:none!important}
.tshare{display:none!important}
.a_pt, .a_pb{display:none!important}
</style> 同祝@栀夏°生日快乐 帖子漂亮，歌曲好听，借贴祝夏夏生日快乐 有心的祝福借帖也祝栀夏开心每一天 祝亲爱滴夏夏生日快乐，永远幸福，事事顺心！越来越漂亮。 出差在外，赶早来收贴了～
帖子好漂亮，赶紧收好票，去凤凰古城嗨，啦啦啦
借贴祝栀夏生日快乐！开心每一天。 楼主帖子做的漂亮，
栀夏°生日快乐。 帖子好漂亮
迟到的祝福送给夏夏
希望开心每一天
幸福每一秒
生日快乐
....... 票价怎么贵啊
祝：栀夏°生日快乐！ 柔情百转的一曲啊~ 祝栀夏°生日快乐~ 好奇门票为啥不是888.88而是888.68呢
祝栀夏生日快乐
图片的景色不错 帖漂亮
祝栀夏生日快乐愿快乐与您常伴
随心而遇 发表于 2020-9-6 15:39
好奇门票为啥不是888.88而是888.68呢
祝栀夏生日快乐
就是为了引起你好奇的{:73_593:} 这是苗族的姑娘吗？祝生日快乐。
页:
[1]