900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > Web前端:博客美化:四 网易云音乐单曲播放器

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

时间:2018-11-27 09:53:56

相关推荐

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

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="///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="/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、设置网易云外链

打开网易云音乐网站,网页版的

找自己喜欢的音乐活着歌单

博客园不支持iframe,选择flash插件

自己选择是否自动播放,由于我选的曲子很。。。有活力,所以我是不自动播放的。

之后复制代码覆盖这里:

以上。

参考:/cang12138/p/7381601.html#_label2

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