II.〆石Zi° 发表于 2020-7-31 10:50:14

【小鹿乱撞 - 永彬Ryan.B/狄迪D-DAY】你的小鹿为谁乱撞

本帖最后由 II.〆石Zi° 于 2020-8-1 16:53 编辑 <br /><br /><style>
.bga{
width: 100%;
height: 100%;
}

.bga{
margin: 0;
display:flex;
justify-content:center;
align-items:center;
background-image: radial-gradient(pink, #FF8888);
}

.heart{
width: 60px;
height: 60px;
background-color: tomato;
position: relative;
animation:beat .6s infinite ease-in;
}
.heart:before, .heart:after{
content:"";
position: absolute;
width: 60px; height: 60px;
background-color: tomato;
border-radius: 50%;
}
.heart:before{
left: 30px;
}

.heart:after{
top: -30px;
}

@keyframes beat{
0%{
    transform:scale(1) rotate(-45deg);
}

40%{
    transform:scale(1) rotate(-45deg);
}

55%{
    transform:scale(1.3) rotate(-30deg);
}

70%{
    transform:scale(1) rotate(-45deg);
}

85%{
    transform:scale(1.3) rotate(-60deg);
}

100%{
    transform:scale(1) rotate(-45deg);
}
}
</style>

<div class="bga" style="height: 600px; width:400px;left: 180px; top: 0px; position: relative;">
<div class="heart"></div>         
<div style="height:40px;left: 20px; top: 15px; position:absolute;"><img width="40" height="40" src="http://www.ii23.cn/data/attachment/forum/201911/18/032129ntica8e7883rt3q3.png
" border="0"></div>
<div style="height:35px;left: 65px; top: 22px; position:absolute;">&nbsp;<font face="微软雅黑"><b><font size="4"><font color="RoyalBlue">II.〆石Zi°音乐</font></font></b></font></div>
<div style="left: 40px; top: 460px; 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 2px 2px 0 rgba(0,0,121,.14),0 3px 1px -2px rgba(0,0,121,.2),0 1px 5px 0 rgba(0,0,121,.12);/* 边框颜色等 */
      border-radius: 5px;}/* 边框圆角 */

      .aplayer span{cursor:default!important}
      .aplayer{height:30px;width:320px; background-color: rgba(200,200,200,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:18px; font-size: 16px; color:#ffffFF; width:20px;height:20px; border:2px solid #ffffFF; border-radius: 16px; position:absolute;bottom:4px; left:4px;} /* 按钮圈大小、颜色、位置，按钮字体大小、颜色 */

      .aplayer-lrc-content,.aplayer .aplayer-hide{display:none}
      .aplayer-icon-play:before{content:'\25b6'}
      .aplayer-icon-pause:before{content:'\2016'} /* 设置按钮键 */

      .aplayer-bar-wrap{height:2px; width:210px;background: RoyalBlue;position:absolute;left:32px;bottom:15px; }/* 进度条长度、位置及未播放段颜色 */
      .aplayer-bar{-webkit-transition:all .5s ease;transition:all .5s ease}
      .aplayer-played{position:absolute;left:0px;bottom:-1px; background: #EA0000;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 #EA0000; border-radius:50%;background: #EA0000;cursor:pointer!important;}/* 进度球大小及颜色 */

      .aplayer-time{position:absolute;right:3px;bottom:8px;height:17px;color: #ffffff;font-size:10px}/* 时间 */

      .aplayer-lrc{display:none;position:absolute; left:0px; top:-50px; height:60px; width: 200; text-align:center;overflow:hidden;margin:-10px 0 10px; filter:Alpha(opacity=0);BACKGROUND:transparent}/* 歌词区域大小，位置调整 */
      .aplayer .aplayer-lrc p{font-size:14px;color: #ffffff;line-height:20px;padding:0;margin:0;-webkit-transition:all .5s ease-out;transition:all .5s ease-out;opacity:0.5} /* 歌词字体、颜色及大小，未播放歌词透明度 */
      .aplayer-lrc p.aplayer-lrc-current{font-weight:bold;font-size:17px;color: red;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">
------------------------------------------------------------------------------
小鹿乱撞--永彬Ryan.B/狄迪D-DAY
I’m feeling good
I’m feeling good
I’m feeling good
I’m feeling good
啊 你还没睡
啊 问我想谁
啊 你的套路被我看透
但我只想和你醉
啊 今天约会
啊 看见你腿
啊 不是我太肮脏 是这画面太美
啊 Baby你就如此的美
啊 今晚让我无法疲惫
啊 不要让我等太久Baby
你看起来很美
I’m feeling good
I’m feeling good
I’m feeling good
I’m feeling good
这感觉就像在
撞撞 小鹿乱撞
撞撞 小鹿乱撞
撞撞 小鹿乱撞
撞撞 小鹿乱撞
you make me drunk I say
you make me drunk I say
you make me drunk I pretty sure
你是美酒姑娘中的拉菲
把你摇晃在我的酒杯散发伊甸园里的香味
无法抵抗你的完美我也想要和你醉
Canyou hear my heart bea
taye boom boom boom boom
can you be my baby
aye woo woo woo woo
I know I know
在你心里一定认为我们非常的般配
我想你做我女朋友我想和你约会
I’m feeling good
I’m feeling good
I’m feeling good
I’m feeling good
I’m feeling good
I’m feeling good
这感觉就像在
撞撞 小鹿乱撞
撞撞 小鹿乱撞
撞撞 小鹿乱撞
撞撞 小鹿乱撞
I’m feeling good
我的小鹿它在乱撞
这感觉就像在
I’m feeling good
你的小鹿也在乱撞
这感觉就像在
I’m feeling good
这感觉就像在
I’m feeling good
撞撞 小鹿乱撞
这感觉就像在
---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: 'https://music.163.com/song/media/outer/url?id=864100958.mp3',
                        pic: ''
                }
        });
        ap3.init();
</script>
</div>

<div style="height:20px;left: 10px; top: 70px; position:absolute;"><table ><tr>http://www.ii23.cn/data/attachment/forum/202007/31/121819g2ytcyz33huu5psx.gifhttp://www.ii23.cn/data/attachment/forum/202007/31/121819g2ytcyz33huu5psx.gifhttp://www.ii23.cn/data/attachment/forum/202007/31/121819g2ytcyz33huu5psx.gifhttp://www.ii23.cn/data/attachment/forum/202007/31/121819g2ytcyz33huu5psx.gifhttp://www.ii23.cn/data/attachment/forum/202007/31/121819g2ytcyz33huu5psx.gifhttp://www.ii23.cn/data/attachment/forum/202007/31/121819g2ytcyz33huu5psx.gifhttp://www.ii23.cn/data/attachment/forum/202007/31/121819g2ytcyz33huu5psx.gifhttp://www.ii23.cn/data/attachment/forum/202007/31/121819g2ytcyz33huu5psx.gifhttp://www.ii23.cn/data/attachment/forum/202007/31/121819g2ytcyz33huu5psx.gifhttp://www.ii23.cn/data/attachment/forum/202007/31/121819g2ytcyz33huu5psx.gifhttp://www.ii23.cn/data/attachment/forum/202007/31/121819g2ytcyz33huu5psx.gifhttp://www.ii23.cn/data/attachment/forum/202007/31/121819g2ytcyz33huu5psx.gifhttp://www.ii23.cn/data/attachment/forum/202007/31/121819g2ytcyz33huu5psx.gifhttp://www.ii23.cn/data/attachment/forum/202007/31/121819g2ytcyz33huu5psx.gifhttp://www.ii23.cn/data/attachment/forum/202007/31/121819g2ytcyz33huu5psx.gifhttp://www.ii23.cn/data/attachment/forum/202007/31/121819g2ytcyz33huu5psx.gifhttp://www.ii23.cn/data/attachment/forum/202007/31/121819g2ytcyz33huu5psx.gifhttp://www.ii23.cn/data/attachment/forum/202007/31/121819g2ytcyz33huu5psx.gifhttp://www.ii23.cn/data/attachment/forum/202007/31/121819g2ytcyz33huu5psx.gif</tr></table></div>

<div style="height:120px;left: 140px; top: 220px; position:absolute;"><table ><tr>http://www.ii23.cn/data/attachment/forum/202008/01/114320umajaa6jaazhay3i.gif</tr></table></div>

<div style="height:35px;left: 10px; bottom: 20px; position:absolute;"><table ><tr>http://www.ii23.cn/data/attachment/forum/202007/31/224423hpdjopxtzhdeooeh.gifhttp://www.ii23.cn/data/attachment/forum/202007/31/224423hpdjopxtzhdeooeh.gifhttp://www.ii23.cn/data/attachment/forum/202007/31/224423hpdjopxtzhdeooeh.gifhttp://www.ii23.cn/data/attachment/forum/202007/31/224423hpdjopxtzhdeooeh.gifhttp://www.ii23.cn/data/attachment/forum/202007/31/224423hpdjopxtzhdeooeh.gifhttp://www.ii23.cn/data/attachment/forum/202007/31/224423hpdjopxtzhdeooeh.gifhttp://www.ii23.cn/data/attachment/forum/202007/31/224423hpdjopxtzhdeooeh.gifhttp://www.ii23.cn/data/attachment/forum/202007/31/224423hpdjopxtzhdeooeh.gif</tr></table></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>

II.〆石Zi° 发表于 2020-7-31 12:29:11

本帖最后由 II.〆石Zi° 于 2020-8-6 16:40 编辑

<style>
.bga{
width: 100%;
height: 100%;
}

.bga{
margin: 0;
display:flex;
justify-content:center;
align-items:center;
background-image: radial-gradient(pink, #FF8888);
}

.heart{
width: 60px;
height: 60px;
background-color: tomato;
position: relative;
animation:beat .6s infinite ease-in;
}
.heart:before, .heart:after{
content:"";
position: absolute;
width: 60px; height: 60px;
background-color: tomato;
border-radius: 50%;
}
.heart:before{
left: 30px;
}

.heart:after{
top: -30px;
}

@keyframes beat{
0%{
    transform:scale(1) rotate(-45deg);
}

40%{
    transform:scale(1) rotate(-45deg);
}

55%{
    transform:scale(1.3) rotate(-30deg);
}

70%{
    transform:scale(1) rotate(-45deg);
}

85%{
    transform:scale(1.3) rotate(-60deg);
}

100%{
    transform:scale(1) rotate(-45deg);
}
}
</style>

<div class="bga" style="height: 600px; width:400px;left: 180px; top: 0px; position: relative;">
<div class="heart"></div>         
<div style="height:40px;left: 20px; top: 15px; position:absolute;"><img width="40" height="40" src="http://www.ii23.cn/data/attachment/forum/201911/18/032129ntica8e7883rt3q3.png
" border="0"></div>
<div style="height:35px;left: 65px; top: 22px; position:absolute;">&nbsp;<font face="微软雅黑"><b><font size="4"><font color="RoyalBlue">II.〆石Zi°音乐</font></font></b></font></div>
<div style="left: 40px; top: 460px; 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 2px 2px 0 rgba(0,0,121,.14),0 3px 1px -2px rgba(0,0,121,.2),0 1px 5px 0 rgba(0,0,121,.12);/* 边框颜色等 */
      border-radius: 5px;}/* 边框圆角 */

      .aplayer span{cursor:default!important}
      .aplayer{height:30px;width:320px; background-color: rgba(200,200,200,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:18px; font-size: 16px; color:#ffffFF; width:20px;height:20px; border:2px solid #ffffFF; border-radius: 16px; position:absolute;bottom:4px; left:4px;} /* 按钮圈大小、颜色、位置，按钮字体大小、颜色 */

      .aplayer-lrc-content,.aplayer .aplayer-hide{display:none}
      .aplayer-icon-play:before{content:'\25b6'}
      .aplayer-icon-pause:before{content:'\2016'} /* 设置按钮键 */

      .aplayer-bar-wrap{height:2px; width:210px;background: RoyalBlue;position:absolute;left:32px;bottom:15px; }/* 进度条长度、位置及未播放段颜色 */
      .aplayer-bar{-webkit-transition:all .5s ease;transition:all .5s ease}
      .aplayer-played{position:absolute;left:0px;bottom:-1px; background: #EA0000;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 #EA0000; border-radius:50%;background: #EA0000;cursor:pointer!important;}/* 进度球大小及颜色 */

      .aplayer-time{position:absolute;right:3px;bottom:8px;height:17px;color: #ffffff;font-size:10px}/* 时间 */

      .aplayer-lrc{display:none;position:absolute; left:0px; top:-50px; height:60px; width: 200; text-align:center;overflow:hidden;margin:-10px 0 10px; filter:Alpha(opacity=0);BACKGROUND:transparent}/* 歌词区域大小，位置调整 */
      .aplayer .aplayer-lrc p{font-size:14px;color: #ffffff;line-height:20px;padding:0;margin:0;-webkit-transition:all .5s ease-out;transition:all .5s ease-out;opacity:0.5} /* 歌词字体、颜色及大小，未播放歌词透明度 */
      .aplayer-lrc p.aplayer-lrc-current{font-weight:bold;font-size:17px;color: red;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">
------------------------------------------------------------------------------
小鹿乱撞--永彬Ryan.B/狄迪D-DAY
I’m feeling good
I’m feeling good
I’m feeling good
I’m feeling good
啊 你还没睡
啊 问我想谁
啊 你的套路被我看透
但我只想和你醉
啊 今天约会
啊 看见你腿
啊 不是我太肮脏 是这画面太美
啊 Baby你就如此的美
啊 今晚让我无法疲惫
啊 不要让我等太久Baby
你看起来很美
I’m feeling good
I’m feeling good
I’m feeling good
I’m feeling good
这感觉就像在
撞撞 小鹿乱撞
撞撞 小鹿乱撞
撞撞 小鹿乱撞
撞撞 小鹿乱撞
you make me drunk I say
you make me drunk I say
you make me drunk I pretty sure
你是美酒姑娘中的拉菲
把你摇晃在我的酒杯散发伊甸园里的香味
无法抵抗你的完美我也想要和你醉
Canyou hear my heart bea
taye boom boom boom boom
can you be my baby
aye woo woo woo woo
I know I know
在你心里一定认为我们非常的般配
我想你做我女朋友我想和你约会
I’m feeling good
I’m feeling good
I’m feeling good
I’m feeling good
I’m feeling good
I’m feeling good
这感觉就像在
撞撞 小鹿乱撞
撞撞 小鹿乱撞
撞撞 小鹿乱撞
撞撞 小鹿乱撞
I’m feeling good
我的小鹿它在乱撞
这感觉就像在
I’m feeling good
你的小鹿也在乱撞
这感觉就像在
I’m feeling good
这感觉就像在
I’m feeling good
撞撞 小鹿乱撞
这感觉就像在
---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: 'https://music.163.com/song/media/outer/url?id=864100958.mp3',
                        pic: ''
                }
        });
        ap3.init();
</script>
</div>

<div style="height:20px;left: 10px; top: 70px; position:absolute;"><table ><tr>http://www.ii23.cn/data/attachment/forum/202007/31/121819g2ytcyz33huu5psx.gifhttp://www.ii23.cn/data/attachment/forum/202007/31/121819g2ytcyz33huu5psx.gifhttp://www.ii23.cn/data/attachment/forum/202007/31/121819g2ytcyz33huu5psx.gifhttp://www.ii23.cn/data/attachment/forum/202007/31/121819g2ytcyz33huu5psx.gifhttp://www.ii23.cn/data/attachment/forum/202007/31/121819g2ytcyz33huu5psx.gifhttp://www.ii23.cn/data/attachment/forum/202007/31/121819g2ytcyz33huu5psx.gifhttp://www.ii23.cn/data/attachment/forum/202007/31/121819g2ytcyz33huu5psx.gifhttp://www.ii23.cn/data/attachment/forum/202007/31/121819g2ytcyz33huu5psx.gifhttp://www.ii23.cn/data/attachment/forum/202007/31/121819g2ytcyz33huu5psx.gifhttp://www.ii23.cn/data/attachment/forum/202007/31/121819g2ytcyz33huu5psx.gifhttp://www.ii23.cn/data/attachment/forum/202007/31/121819g2ytcyz33huu5psx.gifhttp://www.ii23.cn/data/attachment/forum/202007/31/121819g2ytcyz33huu5psx.gifhttp://www.ii23.cn/data/attachment/forum/202007/31/121819g2ytcyz33huu5psx.gifhttp://www.ii23.cn/data/attachment/forum/202007/31/121819g2ytcyz33huu5psx.gifhttp://www.ii23.cn/data/attachment/forum/202007/31/121819g2ytcyz33huu5psx.gifhttp://www.ii23.cn/data/attachment/forum/202007/31/121819g2ytcyz33huu5psx.gifhttp://www.ii23.cn/data/attachment/forum/202007/31/121819g2ytcyz33huu5psx.gifhttp://www.ii23.cn/data/attachment/forum/202007/31/121819g2ytcyz33huu5psx.gifhttp://www.ii23.cn/data/attachment/forum/202007/31/121819g2ytcyz33huu5psx.gif</tr></table></div>

<div style="height:120px;left: 140px; top: 220px; position:absolute;"><table ><tr>http://www.ii23.cn/data/attachment/forum/202008/01/114320umajaa6jaazhay3i.gif</tr></table></div>

<div style="height:35px;left: 10px; bottom: 20px; position:absolute;"><table ><tr>http://www.ii23.cn/data/attachment/forum/202007/31/224423hpdjopxtzhdeooeh.gifhttp://www.ii23.cn/data/attachment/forum/202007/31/224423hpdjopxtzhdeooeh.gifhttp://www.ii23.cn/data/attachment/forum/202007/31/224423hpdjopxtzhdeooeh.gifhttp://www.ii23.cn/data/attachment/forum/202007/31/224423hpdjopxtzhdeooeh.gifhttp://www.ii23.cn/data/attachment/forum/202007/31/224423hpdjopxtzhdeooeh.gifhttp://www.ii23.cn/data/attachment/forum/202007/31/224423hpdjopxtzhdeooeh.gifhttp://www.ii23.cn/data/attachment/forum/202007/31/224423hpdjopxtzhdeooeh.gifhttp://www.ii23.cn/data/attachment/forum/202007/31/224423hpdjopxtzhdeooeh.gif</tr></table></div>
</div>

片片枫叶情 发表于 2020-7-31 14:04:24

一群小猪在奔跑。

淡淡清茶 发表于 2020-7-31 14:19:03

以前也是个会
小鹿乱撞的女生
可是后来小鹿长大了
走路贼稳（好听辛苦了 ）







无魂回归 发表于 2020-7-31 18:01:18

谢谢楼主分享代码，方便喜欢的朋友用了

艼芗 发表于 2020-7-31 19:01:26

跳动的小红心，哈哈，可是为什么是小猪{:2_256:}

雨后の阳光 发表于 2020-7-31 19:30:02

石头锅锅的帖子总是那么独特

II.〆石Zi° 发表于 2020-7-31 19:42:24

艼芗 发表于 2020-7-31 19:01
跳动的小红心，哈哈，可是为什么是小猪

小鹿变笨了

煙ル 发表于 2020-7-31 22:53:39

嗯，哥这是犯相思病了，鉴定完事。{:2_260:}

彩虹密码 发表于 2020-8-1 07:43:36

小巧精致的帖子，感谢分享代码，我收藏了

Оο.1秒ヽo 发表于 2020-8-1 10:37:19

这颗小心为谁乱撞{:73_591:}

艼芗 发表于 2020-8-1 11:57:05

哈哈，换成小鹿了，挺好，更契合歌曲主题了
奔跑的小鹿 ，跳跃的红心，贴子因动画而更加生动了

凝。 发表于 2020-8-1 21:41:42

难得，第一次看你粉色的帖，噗~~

II.〆小杰° 发表于 2020-8-2 20:00:54

外文歌喜欢这节奏感

II.〆浅笑° 发表于 2020-8-2 21:46:23

想乱撞也木呢个心了

落烟泪沫 发表于 2020-8-4 02:18:13


帖做得好看

II.〆石Zi° 发表于 2020-8-6 23:20:18

落烟泪沫 发表于 2020-8-4 02:18
帖做得好看

{:73_600:}谢谢欣赏，嘿嘿

II.〆石Zi° 发表于 2020-8-6 23:22:48

雨后の阳光 发表于 2020-7-31 19:30
石头锅锅的帖子总是那么独特

是啊，这种帖子看得我小鹿乱撞

II.〆石Zi° 发表于 2020-8-6 23:24:01

艼芗 发表于 2020-8-1 11:57
哈哈，换成小鹿了，挺好，更契合歌曲主题了
奔跑的小鹿 ，跳跃的红心，贴子因动画而更加生动了

是乱撞的小鹿好不{:73_604:}

夏星星 发表于 2020-8-7 17:34:33

支持精美巨著
页: [1]
查看完整版本: 【小鹿乱撞 - 永彬Ryan.B/狄迪D-DAY】你的小鹿为谁乱撞