900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 网页中引入网易云音乐 贴边隐藏

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

时间:2021-01-19 18:12:33

相关推荐

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

不废话,直接上代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xml:lang="en" xmlns="/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="/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="/outchain/player?type=0&id=815573174&auto=0&height=430"></iframe>

显示效果

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

优点:可以适用大部分的博客,如网易、新浪博客等

缺点:无法自己调整插件的高度、宽度

<object width="330" height="450" data="/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表示打开网页的时候自动播放。

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。