js实现伪音乐盒

 

支持快进

 

 

<div class="music-part">
<div class="box-bg"></div>
<div class="border-box"></div>
<div class="xc-video">
<div class="v-box">
<a href="javascript:;" title="" data-src="//adl.duoyi.com/sc111/cf/video/cg/arena.mp4"><img src="//adl.duoyi.com/sc111/cf/video/cg/arena.jpg" alt=""><span class="v-arrow"></span></a>
</div>
<p class="v-name">超凡竞技场宣传视频<i></i></p>
</div>
<div class="theme-music">
<div class="music-other">
<strong class="music-tit">《永恒魔法》</strong>
<div class="music-lrc">
<div class="lrc_box">
<div class="musicLrc">
<ul class="png24"><li class="">《永恒魔法》</li><li>演唱：许鹤缤</li><li>词：李卫强</li><li>曲：冯云飞</li><li>谁能灭灼热之痛</li><li>谁能平情海翻涌</li><li>就在平凡平淡平常平静之中</li><li>特立独行</li><li>前路总坎坷不平</li><li>星空指引我冲锋</li><li>就在半醉半醒半雨半晴之间</li><li>唯我独雄</li><li>我是英雄 超凡战纪中</li><li>任嘲声汹涌冷眼如冰</li><li>Fight 印在我掌中</li><li>潇洒驰骋不论成功</li><li>我是英雄 超凡战纪中</li><li>造一方天地同乐共生</li><li class="">Fight 印在我心中</li><li class="">勇者无敌 笑傲苍穹</li><li class="">前路总坎坷不平</li><li class="">星空指引我冲锋</li><li class="">就在半醉半醒半雨半晴之间</li><li class="on">唯我独雄</li><li>我是英雄 超凡战纪中</li><li>任嘲声汹涌冷眼如冰</li><li>Fight 印在我掌中</li><li>潇洒驰骋不论成功</li><li>我是英雄 超凡战纪中</li><li>造一方天地同乐共生</li><li>Fight 印在我心中</li><li>勇者无敌 笑傲苍穹</li><li>刀锋，划破长空</li><li>斧声，石破天惊</li><li>用刀光剑影刻无敌战功</li><li>我是英雄 超凡战纪中</li><li>任嘲声汹涌冷眼如冰</li><li>Fight 印在我掌中</li><li>潇洒驰骋不论成功</li><li>我是英雄 超凡战纪中</li><li>造一方天地同庆共生</li><li>Fight 印在我心中</li><li>勇者无敌笑傲苍穹</li><li>我是英雄</li></ul>
</div>
</div>
</div>
</div>
<div class="music-control music-control3 jp-state-playing">
<div class="seek-pan">
<div class="seek-bar" style="width: 100%;">
<span class="play-bar" style="width: 55.0915%;"></span>
</div>
</div>
<div class="play-time"><span class="currtime">02:18</span>/<span class="duratime">04:12</span></div>
<div class="play-pan">
<span title="播放" class="play" data-track="主题曲MP3" style="display: none;"></span>
<span title="暂停" class="pause" style="display: block;"></span>
</div>
</div>
</div>
<div class="theme-video">
<div class="v-box">
<a href="javascript:;" title="" data-src="//adl.duoyi.com/sc111/yh/video/mv/2.mp4"><img src="//image.duoyi.com/cf/web02/img/index/theme-mv.jpg" alt=""><span class="v-arrow"></span></a>
</div>
<p class="v-name">《永恒魔法》新主题曲MV<i></i></p>
</div>
</div>