DIV CSS 佈局教程網

 　　HTML5作品，經測試，效果確定不錯，遺憾的是只支持谷歌和蘋果等以webkit核心的浏覽器，網友體驗的時候請使用谷歌等浏覽器來運行，不然的話無法看到效果，不說了，看效果吧

　　復制代碼

　　代碼如下:

　　主要部分代碼如下：

　　function ZzxMusic(){

　　var aa={};

　　//模塊設置

　　var setting = {

　　newSong:{'target':'newSong','type':'1','firstCount':6,'Count':5},

　　songCharts:{'target':'newSong','type':'1','firstCount':2,'Count':4},

　　singer:{'target':'newSong','type':'1','firstCount':8,'Count':7},

　　radioStation:{'target':'newSong','type':'1','firstCount':9,'Count':2}

　　};

　　//默認加載模塊

　　aa.newSong = new Zzx(setting.newSong);

　　//模塊初始化

　　$(".menu_tagList").children("li").bind('click',function(){

　　for(var i in setting){

　　if($(this).attr("id")==i){

　　if(typeof aa[i]==='undefined'){

　　aa[i] = new Zzx(setting[i]);

　　}else{

　　aa[i].init();

　　}

　　}

　　}

　　$(".menu_hover").removeClass("menu_hover");

　　$(this).addClass("menu_hover");

　　})

　　}

　　//實例化控制台

　　var myControl = new Control({

　　audio : document.getElementById("myMusic"), //播放器

　　playModeNode : $("#modeButton"), //模式選擇按鈕

　　playBtn : $("#playButton"), //主控按鈕

　　playTitle : $("#musicTitle"), //歌曲TITLE容器

　　singerHead : $("#singerHead"), //歌曲插圖容器

　　progressWrap : $("#progressWrap"), //歌曲進度條容器

　　progress : $("#progress"), //歌曲進度條

　　oWinObj : $("#oWindow"), //警告窗容器

　　allTimeNode : $("#totleTime"), //當前時間容器

　　currentTimeNode : $("#currentTime") //當前時間容器

　　});

　　ZzxMusic();