【渔家傲.忆端午-罗中旭】祝各位端午安康
本帖最后由 II.〆石Zi° 于 2020-6-27 14:22 编辑 <br /><br /><style type="text/css">.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}
img{
border:0;
}
.content{
position: relative;
width: 1210px;
height: 450px;
left: -280px;
top: -100px;
background: #6f0b02
}
.content3{
position: absolute;
overflow:hidden;
background: #6f0b02
}
.bg-index{
position: absolute;
overflow:hidden;
background: url("http://www.ii23.cn/data/attachment/forum/202006/27/071728h6e1e6e2ce6q424l.png") no-repeat;
}
.r-bg-index{
position: absolute;top:-3px;
overflow:hidden;
width: 405px;
height: 382px;
background: url("http://www.ii23.cn/data/attachment/forum/202006/26/154338p5pkn5xqqca6x3rp.png") no-repeat;
}
.l-bg-index{
position: absolute;top:-3px;
overflow:hidden;
width: 405px;
height: 382px;
background: url("http://www.ii23.cn/data/attachment/forum/202006/26/154328wl6655i4l738iwuw.png") no-repeat;
}
.sounda{
position: absolute;}
</style>
<div class="content">
<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;"> II.〆石Zi°音乐</div>
<div style="height:35px;right: 65px; bottom: 5px; position:absolute;"> II.〆石Zi°祝各位端午节：健康平安</div>
<div style="height:35px;right: 465px; bottom: 5px; position:absolute;"> 电脑版，360极速模式</div>
<div class="sounda" style="left: 50px; top: 390px; 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:32px;width:290px; 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: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:190px;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:-220px; height:120px; width: 250; 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.4} /* 歌词字体、颜色及大小，未播放歌词透明度 */
.aplayer-lrc p.aplayer-lrc-current{font-weight:bold;color:RoyalBlue;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>
</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)};
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=34922020.mp3',
pic: ''
}
});
ap3.init();
</script>
<div class="bg-index" style="position: absolute; left: 361px; top: 22px; width:810px;height:382px;">
<div style="position: absolute; left: 200px; top: 82px; width:150px;height:382px;">
<p>
浣溪沙·端午 苏轼<br><br>
轻汗微微透碧纨<br>
明朝端午浴芳兰<br>
流香涨腻满晴川<br>
彩线轻缠红玉臂<br>
小符斜挂绿云鬟<br>
佳人相见一千年<br>
</p>
</div>
<div>
<marqueewidth="400"height="400" direction="left" behavior="slide" scrollamount="2" loop="1">
<div class="l-bg-index" style="left: -360px;position:absolute;"></div>
</marquee>
<marquee width="405"height="400" direction="right" behavior="slide" scrollamount="2" loop="1">
<div class="r-bg-index" style="left: -45px;position:absolute;"></div><div class="content3" style="width:500px;height:382px;left: -10px; top: 0px; position:absolute;"></div>
</marquee>
</div>
</div>
本帖最后由 淡淡清茶 于 2020-6-26 22:52 编辑
http://www.ii23.cn/data/attachment/album/202006/25/135452ucq5lkqexffikk0j.gif音乐好听贴子很美祝端午安康
祝大家端午节快乐！ 欣赏精美的制作，同祝大家端午安康 祝大家端午节安康 端午节快乐！ 帖子很漂亮 祝朋友们端午节安康 祝大家端午节安康 你这个代码有问题啊，手机，电脑全部加不了分，也高亮不了。 Оο.1秒ヽo 发表于 2020-6-26 07:48
你这个代码有问题啊，手机，电脑全部加不了分，也高亮不了。
换了另外一种效果
不如原来的
算了，为了你们加分加亮
页:
[1]