我是一只历经沧桑的老狮

带说明的悬浮音乐播放器效果

不需要插件,直接在 footer.php 文件的 之前放入以下代码就可以了,一个简单的实现方法。效果见本博客!

<style type="text/css">
#BGMusic p{position:fixed;bottom:32px;right:20px;border:1px dashed;padding:0px 
 5px;cursor:pointer;background:rgba(255,255,255,0.5);box-shadow:0 0 5px;border-radius:10px;}
 #BGMusic p2{width:60px;height:50px;position:fixed;bottom:50px;right:25px;opacity:0;}
 #BGM{position: fixed; right: -11px; bottom: 60px; list-style: none; border-top-left-radius: 15px; 
 border-top-right-radius: 15px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; 
 border: 1px dashed; padding-right: 15px; box-shadow: 0px 0px 5px; padding-left: 5px; padding-top: 
 6px;background: rgba(255,255,255,0.5);padding:5px;}
 #BGM p1{position:absolute; left:-150px;width:250px;background:rgba(255,255,255,0.7);border-
 radius:15px;box-shadow:0 0 5px;border:1px dashed;text-align:left;z-index:1500;padding:5px;}
 </style>
 <script>
function LC(){document.getElementById("BGM").style.display="";}
    function LCh(){document.getElementById("BGM").style.display="none";}
    function tent(){document.getElementById("WhenLittle10thLostRose").style.display="";}
    function tenth(){document.getElementById("WhenLittle10thLostRose").style.display="none";}
    function Bmt(){document.getElementById("ABlackManSaveWhiteGirl").style.display="";}
    function Bmh(){document.getElementById("ABlackManSaveWhiteGirl").style.display="none";}
</script>
<div id="BGMusic" >
<p onmouseover="LC()" onmouseout="LCh()">music on</p>
<p2  onmouseover="LC()">The River</p2>
<div id="BGM" onmouseover="LC()" onmouseout="LCh()" style="display:none;">
<li onmouseover="tent()" onmouseout="tenth()"><iframe frameborder="no" border="0" marginwidth="0" 
marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?
type=2&id=442319&auto=0&height=66"></iframe></li>
<p1 id="WhenLittle10thLostRose"  onmouseover="tent()" onmouseout="tenth()" 
style="display:none;bottom: 90px;">      《天空之城》是由日本著名导演宫崎骏于 20 世纪 80 年代创作并上映的一部
经典动画作品,这部作品不仅取得了票房上的巨大成功,同时,不管在影片所折射出的深刻内涵还是作品的社会影响力上    
影片都获得相当大的成就。</br>
</br>
 </p1>
 </div>
 </div>
    


说明,由于本人对代码是一窍不懂,靠的是利用百度搜代码然后东拼西凑而成,对代码实现的原理和二次改修是完全不会,所以如果在使用本代码的过程中如果出现了什么问题我也是爱莫能助,还清自行解决。

本站未注明转载的文章均为原创,转载请注明来源,谢谢!

添加新评论