还记得第一次接触可以自定义代码的博客是新浪和QQ空间。
不过现在都已经被禁了。
突然发现博客园还是这么朴实,业界良心。好吧,重温下小时候逃课上网的感觉。
一、开通JS权限
要想实现很多自己喜欢的效果,js是必不可少的。
点击设置>定制代码,需要邮件申请,ok,我们发送邮件,等待可爱的管理员们给我们审核开通。
二、自定义音乐
高中时候用新浪博客和QQ空间的时候,宁可什么模块都没有,也要加个播放器,和自己喜欢的音乐,来彰显与众不同的逼格。
首先自己写了个播放音乐的jquery插件,非常简陋(工作中涉及不到前端的东西,没有规范的学习过),见附件。
simplemusic api:
参数名 | 类型 | 取值 | 说明 |
loop | boolean | 可选,true,false | 是否循环播放 |
autoplay | boolean | 可选,true,false | 是否自动播放 |
urls | array | string,string | 播放地址列表 |
使用方法:
$(function(){ $(".audioplay").simplemusic({ autoplay:true, urls:["http://m1.music.126.net/gpi8Adr_-pfCuP7ZXk_F2w==/2926899953898363.mp3"] }); });
插件代码:
(function($){ /* simpler music player */ var _playstatus = false; var _palyInterval; var n=0; $.fn.simplemusic=function(settings){ $(this).css({"width":"44px","height":"44px","position":"fixed","top":"10px","right":"10px","cursor":"pointer","background":"url(http://images.cnblogs.com/cnblogs_com/luochengqiuse/705731/o_music_note_big.png)"}).bind("click",function(){ if(_playstatus){ pause(this); }else{ play(this); } }); var audio = document.createElement("audio"); $(audio).attr("id","audioPlayer").css("display","none").prependTo(this); if(settings.loop==true){ $(audio).attr("loop","loop");} if(settings.urls && settings.urls instanceof Array){ for(var i in settings.urls){ var source = document.createElement("source"); $(source).attr("src",settings.urls[i]).appendTo($(audio)); } } if(settings.autoplay == true){$(this).click();} }; function play(e){ _palyInterval = setInterval(function(){ startRotate(e); },10); $("#audioPlayer")[0].play(); _playstatus=true; } function pause(){ $("#audioPlayer")[0].pause(); clearInterval(_palyInterval); _playstatus=false; } function startRotate(e){ n=n+1; e.style.transform="rotate(" + n + "deg)"; e.style.webkitTransform="rotate(" + n + "deg)"; e.style.OTransform="rotate(" + n + "deg)"; e.style.MozTransform="rotate(" + n + "deg)"; if (n==360){n=0} } })(jQuery);
我已经把插件上传到了自己的文件中,可以直接链接使用:
然后加入到我们的自定义代码里:
效果如下:
好了。到这里,音乐已经可以播放了。