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

不废话，直接上代码

<!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=450src="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.用 iframe 标签实现第一种:无播放列表 1 <iframeframeborder="0"border="1" 2 marginwidth=&q ...
在网页中嵌入网易云音乐
用 iframe 标签实现有播放列表: <iframe frameborder="0" border="1" marginwidth="0&q ...
静态博客网页中的网易云音乐播放器
见我的博客 https://blog.wyue.site/2020/04/12/1/ 转载前请联系我,联系方式请见我博客 https://blog.wyue.site/ 一直想做个博客中的音乐播放器, ...
python3爬取网易云歌单数据清洗_网页抓取网易云音乐及评论数据分析
网页抓取网易云音乐及评论数据分析游贤成都理工大学信息科学与技术学院 [摘要] 摘要:为了分析网易云音乐中哪些歌曲是热门歌曲,哪些歌曲的评论最多,从而了解到人们对于不同音乐类型的喜爱程度,采用成 ...
每天定时打开某个网页_纯技术分享，不借助任何工具下载网页中的视频、音乐等~...
有好软件就要与大家分享,我是阿喵,阿喵每天会定时推送出安卓手机.苹果手机.电脑相关.学习等优质软件,如果各位觉得软件不错,点击右下角"在看"!必看:点击查看左下角最近公众号改版,文 ...
CentOS7中安装网易云音乐
CentOS 7中安装网易云音乐中一直没有一个像样的音乐播放器,网易云音乐与深度科技团队在半年前就启动了"网易云音乐7版",但是只提供了Ubuntu(14.04&16.0 ...
网易云音乐IPO隐藏的问题，不只是财报数据
在12月2日世界对称日这一天,网易云音乐正式登陆香港上市.让人意外的是,在敲钟仪式结束之后,网易云音乐就遭到了众多媒体的唱衰,网络上质疑之音此起彼伏,首日以股价破发收官. 汹涌舆潮的背后,根源当然是招 ...
怎么在html上放音乐,教你如何在网页中直接播放MP3音乐
很多网页中都插有Flash播放代码,这不仅是为了页面元素的多样化,更是为了内容体现的需要.很多时候,我们会遇到这样的问题:根据需要使用 Flash的script来读取不同的音频源或者视频源,那么如何实 ...
在应用开发中，网易云音乐如何兼顾质量和效益
在应用开发中,质量和效益是非常关键的因素.网易云音乐作为用户人数突破4亿,成就移动音乐传奇的应用,是如何在开发中兼顾质量和效益的?网易云音乐Android负责人梁建将为您解读. 框架赋能典型的开发框 ...

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

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

网页中引入网易云音乐，贴边隐藏相关推荐

最新文章

热门文章