说明:目前只是一款DEMO不过不影响使用,欢迎各位大(基)佬们使用。有什么意见或者反馈记得在文章下面留言。


DEMO截图:

6362777431651540491912400.png


DEMO代码:

引入样式库:

<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

--CSS样式代码:

<style type="text/css">
        .dyplayer {
            width: 310px;
            height: 431px;
            margin: 0 auto;
            position: relative;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.3);
            position: fixed;
            bottom: 30px;
        }

            .dyplayer.off {
                left: -310px;
            }

                .dyplayer.off .dyplayer-switch {
                    position: fixed;
                    top: initial;
                    right: initial;
                    bottom: 100px;
                    left: 0px;
                }

            .dyplayer.on {
                left: 0px;
            }

                .dyplayer.on .dyplayer-switch {
                    position: absolute;
                    top: 10px;
                    right: -32px;
                    bottom: initial;
                    left: initial;
                }



            .dyplayer * {
                padding: 0;
                margin: 0;
                border: 0;
                font-size: 12px;
            }


        .dyplayer-main {
            margin-left: -10px;
            margin-top: -10px;
        }



        #player {
            margin: 0px;
        }

        .dyplayer-switch {
            width: 30px;
            height: 80px;
            border-top-right-radius: 3px;
            border-bottom-right-radius: 3px;
            box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.3);
            background: rgba(188, 178, 190, 0.298039);
            text-align: center;
        }

            .dyplayer-switch:hover {
                cursor: pointer;
            }

            .dyplayer-switch i {
                margin-top: 30px;
                font-size: 18px;
            }

            .dyplayer-switch .fa-angle-left {
                color: #ee2830;
            }

            .dyplayer-switch .fa-angle-right {
                color: #0094ff;
            }
    </style>

HTML代码:

<div class="dyplayer off">
        <div class="dyplayer-main">
            <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=450 src="https://music.163.com/outchain/player?type=0&id=445186027&auto=1&height=430"></iframe>
        </div>
        <div data-switch="off" class="dyplayer-switch">
            <i class="fa fa-angle-left"></i>
        </div>
    </div>

JS代码库:

<script src="http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>

JS代码:

<script type="text/javascript">
        var $dyplayer = $('.dyplayer');
        var $dyplayerSwitch = $(".dyplayer-switch");
        var $dyplayerSwitchIcon = $(".dyplayer-switch>i");
        $dyplayerSwitch.on('click', function () {
            var switchStatus = $dyplayerSwitch.attr('data-switch');
            if (switchStatus == "on") {
                switchStatus = "off";
                $dyplayer.removeClass('on').addClass('off');
                $dyplayerSwitchIcon.removeClass('fa-angle-left').addClass('fa-angle-right');
            } else {
                switchStatus = "on";
                $dyplayer.removeClass('off').addClass('on');
                $dyplayerSwitchIcon.removeClass('fa-angle-right').addClass('fa-angle-left');
            }
            $dyplayerSwitch.attr('data-switch', switchStatus);
        });
    </script>


完整DEMO代码:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>德意网易云音乐播放器框架</title>
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style type="text/css">
        .dyplayer {
            width: 310px;
            height: 431px;
            margin: 0 auto;
            position: relative;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.3);
            position: fixed;
            bottom: 30px;
        }

            .dyplayer.off {
                left: -310px;
            }

                .dyplayer.off .dyplayer-switch {
                    position: fixed;
                    top: initial;
                    right: initial;
                    bottom: 100px;
                    left: 0px;
                }

            .dyplayer.on {
                left: 0px;
            }

                .dyplayer.on .dyplayer-switch {
                    position: absolute;
                    top: 10px;
                    right: -32px;
                    bottom: initial;
                    left: initial;
                }

            .dyplayer * {
                padding: 0;
                margin: 0;
                border: 0;
                font-size: 12px;
            }

        .dyplayer-main {
            margin-left: -10px;
            margin-top: -10px;
        }

        #player {
            margin: 0px;
        }

        .dyplayer-switch {
            width: 30px;
            height: 80px;
            border-top-right-radius: 3px;
            border-bottom-right-radius: 3px;
            box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.3);
            background: rgba(188, 178, 190, 0.298039);
            text-align: center;
        }

            .dyplayer-switch:hover {
                cursor: pointer;
            }

            .dyplayer-switch i {
                margin-top: 30px;
                font-size: 18px;
            }

            .dyplayer-switch .fa-angle-left {
                color: #ee2830;
            }

            .dyplayer-switch .fa-angle-right {
                color: #0094ff;
            }
    </style>
</head>
<body>
    <div class="dyplayer off">
        <div>
            <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=450 src="https://music.163.com/outchain/player?type=0&id=445186027&auto=1&height=430"></iframe>
        </div>
        <div data-switch="off">
            <i class="fa fa-angle-left"></i>
        </div>
    </div>

    <script src="http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        var $dyplayer = $('.dyplayer');
        var $dyplayerSwitch = $(".dyplayer-switch");
        var $dyplayerSwitchIcon = $(".dyplayer-switch>i");
        $dyplayerSwitch.on('click', function () {
            var switchStatus = $dyplayerSwitch.attr('data-switch');
            if (switchStatus == "on") {
                switchStatus = "off";
                $dyplayer.removeClass('on').addClass('off');
                $dyplayerSwitchIcon.removeClass('fa-angle-left').addClass('fa-angle-right');
            } else {
                switchStatus = "on";
                $dyplayer.removeClass('off').addClass('on');
                $dyplayerSwitchIcon.removeClass('fa-angle-right').addClass('fa-angle-left');
            }
            $dyplayerSwitch.attr('data-switch', switchStatus);
        });
    </script>
</body>
</html>


使用说明:把代码中的iframe更换成你在网易云音乐生成的代码就可以使用了,目前只支持310*430的宽高

6362777466224983673654583.png