TypechoJoeTheme

老狮的梦

统计
登录
用户名
密码
/
注册
用户名
邮箱

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

2019-03-28
/
1 评论
/
742 阅读
/
正在检测是否收录...
03/28

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

<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>
    


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

美化html代码
朗读
赞(0)
版权属于:

老狮的梦

本文链接:

https://laolion.com/archives/286.html(转载时请注明本文出处及文章链接)

评论 (1)
  1. 冬烛之焰 作者
    MacOS · Google Chrome

    哈哈,又学到一招,谢谢博主的无私分享

    2020-09-22 回复

人生倒计时

今日已经过去小时
这周已经过去
本月已经过去
今年已经过去个月