欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Web前端:博客美化:四、网易云音乐单曲播放器

程序员文章站 2022-06-10 21:19:59
1、页面定制CSS代码 2、博客侧边栏公告(支持HTML代码)(支持JS代码) 3、设置网易云外链 打开网易云音乐网站,网页版的 找自己喜欢的音乐活着歌单 博客园不支持iframe,选择flash插件 自己选择是否自动播放,由于我选的曲子很。。。有活力,所以我是不自动播放的。 之后复制代码覆盖这里: ......

1、页面定制css代码

/*3、音乐播放器*/
.content-wrap {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}
/* menu button */
.menu-button {
    position: fixed;
    top: 30px;
    right: 15px;
    z-index: 1000;
    padding: 0 !important;
    margin: 0 !important;
    width: 45px;
    height: 35px;
    border: none;
    font-size: 1.5em;
    color: #373a47;
    background: transparent;
    cursor: pointer;
    border: none;
    outline: none;
}
/* 图片旋转*/
@-webkit-keyframes rotation{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}
/* 图片旋转样式*/
.menu-rotation{
    -webkit-transform: rotate(360deg);
    animation: rotation 3s linear infinite;
    -moz-animation: rotation 3s linear infinite;
    -webkit-animation: rotation 3s linear infinite;
    -o-animation: rotation 3s linear infinite;
}
/* 图片旋转样式*/
.menu-button img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
}
.menu-button:hover {
    opacity: 0.8;
}
/* menu */
.menu-wrap {
    position: fixed;
    z-index: 999;
    /* background: #ebedf4; */
    -webkit-transition: width 0.3s, height 0.3s;
    transition: width 0.3s, height 0.3s;
    width: 0;
    height: 0;
    font-size: 1.5em;
    top: 0;
    right: 0;
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
}
/* 屏幕适应*/
@media screen and (max-width: 50em) {
    .menu-button {
        margin: 0.25em;
    }
    .menu-wrap {
        /*bottom: 0.25em;
        left: 0.25em;*/
    }
}
/* shown menu */
.show-menu .menu-wrap {
    width: 340px;
    height: 100px;
    -webkit-animation: anim-jelly 0.8s linear forwards;
    animation: anim-jelly 0.8s linear forwards;
}

2、博客侧边栏公告(支持html代码)(支持js代码)

<!--网易云播放器样式-->
<div class="menu-wrap">
<embed src="//music.163.com/style/swf/widget.swf?sid=1344690371&type=2&auto=0&width=320&height=66" width="340" height="86"  allownetworking="all"></embed>
</div>

<button class="menu-button" id="open-button" onclick="togglemenu();"><img id="img_music" class="menu-rotation" src="http://images.cnblogs.com/cnblogs_com/cang12138/1219437/o_o_play.png"></button>
<div class="content-wrap"></div>

<script language="javascript" type="text/javascript">
    var openbtn = document.getelementbyid( 'open-button' ),
    isopen = false;

    function togglemenu() {
        if( isopen ) {
            $("body").removeclass("show-menu");
        }
        else {
            $("body").addclass("show-menu");
        }
        isopen = !isopen;
    }
    $(document).click(function (e) {
        var e = e || window.event; //浏览器兼容性 
        var elem = e.target || e.srcelement; 
        if( isopen && elem.id != "img_music") {
            $("body").removeclass("show-menu");
            isopen = !isopen;
        }
    })
</script>
<!--网易云播放器样式end-->

3、设置网易云外链

打开网易云音乐网站,网页版的
找自己喜欢的音乐活着歌单
Web前端:博客美化:四、网易云音乐单曲播放器
博客园不支持iframe,选择flash插件
Web前端:博客美化:四、网易云音乐单曲播放器
自己选择是否自动播放,由于我选的曲子很。。。有活力,所以我是不自动播放的。
之后复制代码覆盖这里:
Web前端:博客美化:四、网易云音乐单曲播放器

以上。


参考:https://www.cnblogs.com/cang12138/p/7381601.html#_label2