HugerMuicJS实现部分

#HugerMusic

$(document)

$(document)指的是当前文档，就是你当前看到的整个网页

$.html()

get the html contents of the first element in the set of matched elements or set the HTML contents of every matched elements

###　$.animate()

$( "#clickme" ).click(function() {
  $( "#book" ).animate({
    opacity: 0.25,
    left: "+=50",
    height: "toggle"
  }, 5000, function() {
    // Animation complete.
  });
});

animate 里面的后一个function里面的内容是animate动画执行完成之后执行的内容

animate

什么时候把动画设置为true呢
当下一行代码动画正在执行的时候就还可以把动画设置为true

jquery.getJSON()

与ajax获取数据的方式近似

var flickerAPI = "https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
  $.getJSON( flickerAPI, {
    tags: "mount rainier",
    tagmode: "any",
    format: "json"
  })

html拼接代码

html += '<li data-channel-id = '+ channel.channel_id +' data-channel-name '+ channel.name +'>'

上面的代码是错误代码，需要留意空格

html += '<li data-channel-id='+channel.channel_id+' data-channel-name='+channel.name+'>'

这一行代码才是正确的范例
需要注意"data-channel-id="的后面没有空格，而"data-channel-name"的前面才有空格

jquery.html()

意思是在HTML后面添加数据

$(window).resize()

当整个窗口的页面size发生改变的时候

footer右边的按钮绑定事件

this.$rightBtn.on('click',function(){
      if(_this.isAnimate) return
      var rowCount = Math.floor(parseFloat(_this.$box.width()) / parseFloat(_this.$footer.find('li').outerWidth(true)))
      var width = _this.$footer.find('li').outerWidth(true)
      if(!_this.isToEnd){
        _this.isAnimate = true
        _this.$ul.animate({
          left: '-=' + rowCount * width
        }, 500, function(){
          _this.isToStart = false
          _this.isAnimate = false
          if(parseFloat(_this.$box.width()) - parseFloat(_this.$ul.css('left')) <= parseFloat(_this.$ul.outerWidth(true))){
            _this.isToEnd = true
          }
        })
      }
    })

像一张长长的纸条，当你往左拉的时候(left: ‘-=’ + rowCount * width),纸条的内容就会显示出右边的内容

addClass removeClass sublings

是jquery的方法，要在对象前面增加$()符号

调取second的时候

Math.floor(Fm.audio.currentTime)%60
\\输出2
Math.floor(Fm.audio.currentTime)%60/100
\\输出0.02
(Math.floor(Fm.audio.currentTime)%60/100).toFixed(2)
\\输出字符串"0.02"
\\选取小数点后两位
(Math.floor(Fm.audio.currentTime)%60/100).toFixed(2).substr(2)
\\输出"02"
\\选取字符串第3位到最后的字符串

audio.duration()

这个音乐的持续时间
duration 持续时间

String.prototype.split

The split() method splits a String object into an array of strings by separating the string into substrings, using a specified separator string to determine where to make each split.

Array.isArray(‘times’)

判断一个元素是否是数组

自定义插件

自定义插件

$.fn.boomText = function(type){
	console.log('boom')
}

调用插件

$('p').boomText()

Map

The Map object holds key-value pairs and remembers the original insertion order of the keys. Any value (both objects and primitive values) may be used as either a key or a value.
map()方法将调用的数组的每个元素传递给指定的函数，并返回一个数组，它包含该函数的返回值。

    function square(arr){
        return arr.map(function(item){
            return item*item;});
    }
    var arr=[1, 2, 3, 4];
    console.log(square(arr));
	结果是:[1,4,9,16]

Frank的音乐电台

项目功能

利用百度API所完成的音乐播放器，实现了播放，暂停，显示歌词，选取歌单，下一首播放的功能

项目技术详细介绍

用了音乐的api接口，运用了getJson技术，实现了歌词的动态显示，响应式，还有兼容页面的实现。

技术栈关键词

jQuery CSS3 响应式

预览地址

预览地址
麻烦star一下