网页中引入网易云音乐，贴边隐藏

最新推荐文章于 2022-11-18 16:49:58 发布

皮卡战记

最新推荐文章于 2022-11-18 16:49:58 发布

阅读量2.7k

点赞数 1

分类专栏： html 文章标签：网易云音乐 HTML

本文链接：https://blog.csdn.net/itchuangyi/article/details/85217967

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

不废话，直接上代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <title>网易云音乐</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="../../static/jsonFormater/jquery-1.7.2.min.js" type="text/javascript"></script>

    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        #music-163 {
            z-index: 10;
            width: 330px;
            height: 450px;
            position: fixed;
            left: -330px;
            top: 100px;
        }

        #music-163 span {
            width: 50px;
            height: 50px;
            background-color: #aeabc1;
            position: absolute;
            left: 330px;
            top: 0;
            border-radius: 2px;
        }
    </style>

    <script type="text/javascript">
        $(function () {
            var mDiv = $('#music-163');
            mDiv.mouseover(function () {
                startMove(0);
            });
            mDiv.mouseout(function () {
                startMove(-330);
            });
        });
        var timer = null;
        function startMove(target) {
            clearInterval(timer);
            var mDiv = $('#music-163');
            timer = setInterval(function () {
                // 越靠近目标值速度越小
                var speed = (target - mDiv.offset().left) / 20;
                //向右移动速度为正数，向左为负数,将speed取整,显示不完全
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                if (mDiv.offset().left === target) {
                    clearInterval(timer);
                } else {
                    mDiv.css('left',mDiv.offset().left + speed + "px")
                }
            }, 10)
        }
    </script>
</head>
<body>

<div id="music-163">
    <object width="330" height="450"
            data="http://music.163.com/style/swf/widget.swf?sid=2232237850&type=0&auto=0&width=310&height=430"
            type="application/x-shockwave-flash"></object>
    <span id="music">
        <img height="100%" width="100%" src="../../static/home/images/avatar.jpg" alt=""/>
    </span>
</div>
</body>
</html>

网易云插件有两种引入方式

第一种 iframe方式引入

优点：可以自己调整插件的高度、宽度
缺点：很多博客网站不支持嵌入iframe

<iframe frameborder="no" border="0" marginwidth="0"
        marginheight="0" width=330 height=450
        src="http://music.163.com/outchain/player?type=0&id=815573174&auto=0&height=430">
</iframe>

显示效果
在这里插入图片描述

第二种，浏览器需要安装Flash插件

优点：可以适用大部分的博客，如网易、新浪博客等
缺点：无法自己调整插件的高度、宽度

<object width="330" height="450" data="http://music.163.com/style/swf/widget.swf?sid=815573174&type=0&auto=0&width=310&height=430" type="application/x-shockwave-flash">
</object>

显示效果
在这里插入图片描述

参数设置：

type : 类型（0：单曲、2：歌单）
id/sid：歌曲id
auto：0/1
0 表示打开网页的时候不自动播放；
1表示打开网页的时候自动播放。

欢迎关注公众号：【皮卡战记】

在这里插入图片描述

皮卡战记

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
网页中引入网易云音乐，贴边隐藏

不废话，直接上代码&amp;lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&amp;gt;&amp;lt;html xml:lang=&quot;en&quot; xmlns=&quot;http://www.w3
复制链接

扫一扫