用jQuery实现qq音乐播放器

最新推荐文章于 2023-11-03 11:33:42 发布

野生小米椒

最新推荐文章于 2023-11-03 11:33:42 发布

阅读量879

点赞数 1

分类专栏： jQuery

本文链接：https://blog.csdn.net/x1037490413/article/details/103264495

版权

jQuery 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

折腾了很久，最终还是决定先放弃，继续学习jQuery后面的内容，做了有一大半吧，核心功能不想搞了，以后有时间再继续吧

贴代码：

html：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="css/jquery.mCustomScrollbar.css">
  <link rel="stylesheet" href="style.css">
  <script src="../jquery/jquery-3.4.1.min.js"></script>
  <script src="jquery.mCustomScrollbar.concat.min.js"></script>
  <script src="player.js"></script>
  <script src="index.js"></script>
</head>

<body>
  <div class="header">
    <h1 class="logo">
      <a href=""></a>
    </h1>
    <ul class="register">
      <li>登录</li>
      <li>设置</li>
    </ul>
  </div>
  <div class="content">
    <!-- 和foter_in一样是版心 居中-->
    <div class="content_in">
      <div class="content_left">
        <!-- 工具栏 -->
        <div class="content_toolbar">
          <span>
            <i></i>收藏
          </span>
          <span>
            <i></i>添加到
          </span>
          <span>
            <i></i>下载
          </span>
          <span>
            <i></i>删除
          </span>
          <span>
            <i></i>清空列表
          </span>
        </div>
        <!-- 歌曲列表：和工具栏分开装进div里面，这样歌曲列表滚动就不会影响工具栏 -->
        <div class="content_list" data-mcs-theme="minimal-dark">
          <ul>
            <li class="title">
              <div class="list_check"><i></i></div>
              <div class="list_number"></div>
              <div class="list_name">歌曲</div>
              <div class="list_singer">歌手</div>
              <div class="list_time">时长</div>
            </li>
        
          </ul>
        </div>
      </div>
      <div class="content_right">
        <div class="song_info">
          <a href="javascript:;" class="song_info_pic">
            <img src="imgQQ/jay.jpg" alt="">
          </a>
          <div class="song_info_name">歌曲名称：
            <a href="javascript:;">告白气球</a>
          </div>
          <div class="song_info_singer">歌手名：
            <a href="javascript:;">周杰伦</a>
          </div>
          <div class="song_info_ablum">专辑名：
            <a href="javascript:;">《周杰伦的床边故事》</a>
          </div>
        </div>
        <ul class="song_lyric">
          <li class="cur">第一条歌词</li>
          <li>第二条歌词</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="footer">
    <div class="footer_in">
      <a href="javascript:;" class="music_pre"></a>
      <a href="javascript:;" class="music_play"></a>
      <a href="javascript:;" class="music_next"></a>
      <div class="music_progress_info">
        <div class="music_progress_top">
          <span class="music_progress_name">告白气球 / 周杰伦</span>
          <span class="music_progress_time">00::00 / 03:35</span>
        </div>
        <div class="music_progress_bar">
          <div class="music_progress_line">
            <div class="music_progress_dot"></div>
          </div>
        </div>
      </div>
      <a href="javascript:;" class="music_mode"></a>
      <a href="javascript:;" class="music_fav"></a>
      <a href="javascript:;" class="music_down"></a>
      <a href="javascript:;" class="music_comment"></a>
      <a href="javascript:;" class="music_only"></a>
      <div class="music_voice_info">
        <a href="javascript:;" class="music_voice_icon"></a>
        <div class="music_voice_bar">
            <div class="music_voice_line">
              <div class="music_voice_dot"></div>
            </div>        
          </div>
        </div>
      </div>
    </div>
  </div>
  
   <!-- 背景设置 -->
   <div class="mask_bg"></div>
   <!-- 设置一块遮罩，这样有背景图文字也能显示得更清楚 -->
   <div class="mask"></div>
   <audio src=""></audio>
</body>

</html>

css代码：

* {
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    height: 100%;
    font-size: 14px;
}

.header {
    width: 100%;
    height: 45px;
    /* background:red; */


}

.content {
    width: 100%;
    height: 460px;
    /* background: rgb(66, 66, 62); */
}

.content .content_in {
    width: 1200px;
    height: 100%;
    /* background-color: pink; */
    margin: 0 auto;
}

.header .logo {
    float: left;
    margin-left: 20px;

}

.header .logo a {
    display: inline-block;
    width: 78px;
    height: 21px;
    background: url("imgQQ/player_logo.png") no-repeat 0 0;
    opacity: 0.5;
}

.header .logo a:hover {
    opacity: 1;
}

.header .register {

    line-height: 45px;
    float: right;
}

.header .register li {
    list-style: none;
    float: left;
    margin-right: 20px;
    color: #fff;
    opacity: 0.5;
}

.header .register li:hover {
    opacity: 1;
}

.content_in .content_left {
    float: left;
    width: 800px;
    height: 100%;
    /* background-color: orange; */
}

.content_in .content_right {
    float: right;
    width: 400px;
    height: 100%;
    /* background-color: rgb(196, 192, 255); */
}

.content_right .song_info {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    line-height: 30px;
}

.song_info div a {
    text-decoration: none;
    color: #fff;
    opacity: 0.5;
}

.song_info div a:hover {
    opacity: 1;
}

/*设置后面那块版面*/
.song_info .song_info_pic {
    /*a不能直接设置宽高*/
    display: inline-block;
    background: url(imgQQ/album_cover_player.png) no-repeat 0 0;
    width: 201px;
    height: 180px;
    /*行内内容向左侧边对齐*/
    text-align: left;
}

.song_info_pic img {
    width: 180px;
    height: 180px;
}

.content_right .song_lyric {
    text-align: center;
    /* background: rosybrown; */
    margin-top: 50px;
}

.content_right .song_lyric li {
    list-style: none;
    line-height: 30px;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.5);
}

.content_right .song_lyric .cur {
    color: #31c27c;
}

.content_left .content_toolbar {
    width: 100%;
    height: 40px;
    /* background-color: blue; */
}

.content_left .content_list {
    width: 100%;
    height: 420px;
    /* background-color: purple; */
    overflow: auto;
}

.content_list li {
    list-style: none;
    width: 100%;
    height: 50px;
    /* background-color: orange; */
    border: 1px solid rgb(255, 255, 255, 0.5);
    box-sizing: border-box;
    /*禁止复制*/
    user-select: none;

}

.content_list li div {
    float: left;
    /*文字颜色*/
    color: rgba(255,255,255,0.5);
    line-height: 50px;
    /* opacity: 0.5; */
}

.content_list .list_check {
    width: 50px;
    height: 100%;
    /* background:#000; */
    text-align: center;
   

}

.content_list .list_check i {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid #fff;
    opacity: 0.5;

}

.content_list .list_checked i {
    background: url("imgQQ/icon_sprite.png") no-repeat -60px -80px;
    opacity: 1;
}

.content_list .list_number {
    width: 20px;
    height: 100%;
    /* background: cornflowerblue; */
}
.content_list .list_number2{
    /*序号隐藏 注意优先级问题*/
    color: transparent !important;
    background: url('imgQQ/wave.gif') no-repeat 0 center;
}
.content_list .list_menu {
    margin-top: 5px;
    float: right;
    /*离歌手太近*/
    margin-right: 20px;
    display: none;
}

.list_menu a {
    display: inline-block;
    width: 36px;
    height: 36px;
    background: url("imgQQ/icon_list_menu.png") no-repeat 0 0;
    opacity: 0.5;
}
.list_menu a:hover{
    opacity: 1;
}

.list_menu a:nth-child(1) {
    background-position: -120px 0;
}

.list_menu a:nth-child(2) {
    background-position: -120px -80px;
}

.list_menu a:nth-child(3) {
    background-position: -120px -120px;
}

.list_menu a:nth-child(4) {
    background-position: -120px -40px;
}
.list_menu .list_menu_play2{
    background-position: -80px -200px !important;
 
    
}
.content_list .list_name {
    width: 50%;
    height: 100%;
    /* background:salmon; */
}

.content_list .list_singer {
    width: 20%;
    height: 100%;
    /* background: slateblue; */
}

.content_list .list_time a {
    display: inline-block;
    width: 36px;
    height: 36px;
    background: url("imgQQ/icon_list_menu.png") no-repeat -120px -160px;
    float: left;
    margin-top: 5px;
    display: none;
    opacity: 0.5;

}
.content_list .list_time a:hover{
    opacity:1;
}


.content_toolbar span {
    display: inline-block;
    width: 122px;
    height: 100%;
    line-height: 40px;
    text-align: center;
    border: 1px solid #fff;
    box-sizing: border-box;
    border-radius: 5px;
    opacity: 0.5;

}

.content_toolbar span:hover {
    opacity: 1;
}

.content_toolbar span i {
    display: inline-block;
    width: 18px;
    height: 18px;
    background: url('imgQQ/icon_sprite.png');
    margin-right: 10px;
    vertical-align: -5px;


}

.content_toolbar span:nth-child(1) i {
    background-position: -60px -20px;
}

.content_toolbar span:nth-child(2) i {
    background-position: -20px -20px;
}

.content_toolbar span:nth-child(3) i {
    background-position: -40px -240px;
}

.content_toolbar span:nth-child(4) i {
    background-position: -100px -20px;
}

.content_toolbar span:nth-child(5) i {
    background-position: -40px -300px;
}

.footer {
    width: 100%;
    height: 80px;
    /* background-color:blue; */
    position: absolute;
    left: 0;
    bottom: 0;
}

.footer .footer_in {
    width: 1200px;
    height: 100%;
    /* background-color: green; */
    margin: 0 auto;
}

.footer_in a {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    background: url(imgQQ/player.png) no-repeat 0 0;
    margin-right: 20px;
}

.footer_in .music_pre {
    width: 19px;
    height: 20px;
    background-position: 0 -30px;
}

.footer_in .music_play {
    width: 21px;
    height: 29px;
    background-position: 0 0;
    vertical-align: -5px;
}

.footer_in .music_play2 {
    background-position: -30px 0;
}

.footer_in .music_next {
    width: 19px;
    height: 20px;
    background-position: 0 -52px;
}

.footer_in .music_progress_info {
    /*因为div是块级元素，会顶开下面的元素到下一行*/
    display: inline-block;
    width: 670px;
    height: 40px;
    /* background:red; */
    position: relative;
    top: 10px;
}

.music_progress_info .music_progress_top {
    width: 100%;
    height: 30px;
    color: #fff;
    line-height: 30px;

}

.music_progress_top .music_progress_name {
    float: left;
    opacity: 0.5;
}

.music_progress_top .music_progress_name:hover {
    opacity: 1;
}

.music_progress_top .music_progress_time {
    float: right;
    opacity: 0.5;
}

.music_progress_info .music_progress_bar {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.5);
    margin-top: 5px;
    position: relative;
}

.music_progress_bar .music_progress_line {
    width: 0px;
    height: 100%;
    background: #fff;
}

.music_progress_line .music_progress_dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top: -5px;
    left: 0px;
}

.footer_in .music_mode {
    width: 26px;
    height: 25px;
    background-position: 0 -205px;
}

.footer_in .music_mode2 {
    width: 23px;
    height: 20px;
    background-position: 0 -260px;
}

.footer_in .music_mode3 {
    width: 25px;
    height: 19px;
    background-position: 0 -74px;
}

.footer_in .music_mode4 {
    width: 26px;
    height: 25px;
    background-position: 0 -232px
}

.footer_in .music_fav {
    width: 24px;
    height: 21px;
    background-position: 0 -96px;
}

.footer_in .music_fav2 {
    background-position: -30px -96px;
}

.footer_in .music_down {
    width: 22px;
    height: 21px;
    background-position: 0 -120px;
}

.footer_in .music_comment {
    width: 24px;
    height: 24px;
    background-position: 0 -400px;
}

.footer_in .music_only {
    width: 74px;
    height: 27px;
    background-position: 0 -281px;
}

.footer_in .music_only2 {
    background-position: 0 -310px;
}

.footer_in .music_voice_info {
    display: inline-block;
    width: 100px;
    height: 40px;
    /* background:darkblue; */
    line-height: 40px;
    position: relative;
    top: 10px;
}

.music_voice_info .music_voice_icon {
    width: 26px;
    height: 21px;
    background-position: 0 -144px;
    position: absolute;
    left: 0;
    top: 10px;

}

.music_voice_info .music_voice_icon2 {
    background-position: 0 -182px;
}

.music_voice_info .music_voice_bar {
    width: 70px;
    height: 4px;
    background: rgba(255, 255, 255, 0.5);
    position: absolute;
    right: 0;
    top: 18px;
}

.music_voice_bar .music_voice_line {
    width: 70px;
    height: 100%;
    background: #fff;
}

.music_voice_line .music_voice_dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    position: relative;
    top: -5px;
    left: 70px;
}

/*背景*/
.mask_bg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    /*因为这个背景div在其他div后面，会覆盖前面的，要想将他设置为背景图，得设置下优先级*/
    z-index: -2;
    background: url(imgQQ/jay.jpg) no-repeat 0 0;
    background: cover;
    /*高斯模糊背景*/
    filter: blur(100px);
}

.mask{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    background: rgba(0 ,0, 0 ,0.35);
}

._mCS_1 .mCSB_dragger .mCSB_dragger_bar {
    width: 8px;
}

index.js代码

$(function () {
  //自定义滚动条
  $(".content_list").mCustomScrollbar();
  var $audio=$('audio');
  //加载歌曲列表
  getPlayerList();

  function getPlayerList() {
    $.ajax({
      //从哪加载
      url: "./source/musiclist.json",
      //  加载的是什么类型
      dataType: "json",

      //  成功之后做什么
      success: function (data) {

        // 3.1遍历获取到的数据, 创建每一条音乐
        var $musicList = $(".content_list ul");
        $.each(data, function (index, ele) {
          var $item = crateMusicItem(index, ele);
          $musicList.append($item);
        });
        // initMusicInfo(data[0]);
        // initMusicLyric(data[0]);
      },
      //失败之后做什么
      error: function (e) {
        console.log(e);
      }
    })
  }
  //初始化事件监听
  initEvents();

  function initEvents() {

    //监听歌曲的移入移出事件
    //要用事件委托因为歌曲都是新增的
    $('.content_list').delegate(".list_music", "mouseenter", function () {
      //find 搜索所有与指定表达式相匹配的元素，这个函数是找出正在处理的元素的后代元素的好方法
      //如果直接用$('.list_menu')所有菜单会一起显示出来
      //显示子菜单
      $(this).find('.list_menu').stop().fadeIn(100);
      $(this).find('.list_time a').stop().fadeIn(100);
      //隐藏时长
      $(this).find('.list_time span').stop().fadeOut(100);
    })
    $('.content_list').delegate(".list_music", "mouseleave", function () {
      //隐藏子菜单
      $(this).find('.list_menu').stop().fadeOut(100);
      $(this).find('.list_time a').stop().fadeOut(100);
      //显示时长
      $(this).find('.list_time span').stop().fadeIn(100);
    })
    //监听歌曲的移入移出事件
    //要用事件委托因为歌曲都是新增的
    $('.content_list').delegate(".list_music", "mouseenter", function () {
      //find 搜索所有与指定表达式相匹配的元素，这个函数是找出正在处理的元素的后代元素的好方法
      //如果直接用$('.list_menu')所有菜单会一起显示出来
      //显示子菜单
      $(this).find('.list_menu').stop().fadeIn(100);
      $(this).find('.list_time a').stop().fadeIn(100);
      //隐藏时长
      $(this).find('.list_time span').stop().fadeOut(100);
    })
    $('.content_list').delegate(".list_music", "mouseleave", function () {
      //隐藏子菜单
      $(this).find('.list_menu').stop().fadeOut(100);
      $(this).find('.list_time a').stop().fadeOut(100);
      //显示时长
      $(this).find('.list_time span').stop().fadeIn(100);
    })

    //监听复选框的点击事件
    $('.content_list').delegate('.list_check', 'click', function () {
      $(this).toggleClass('list_checked'); //有就删除，没有就添加
    })
    //监听播放按钮的点击事件
    var $musicPlay = $('.music_play');
    $('.content_list').delegate('.list_menu_play', 'click', function () {
      var $item = $(this).parents('.list_music');
      // console.log($item.get(0).index);

      //切换播放图标
      $(this).toggleClass('list_menu_play2');
      //复原其他播放图标
      //先找点击的祖先list_music,再用siblings()方法找list_music的兄弟，
      $item.siblings().find('.list_menu_play').removeClass('list_menu_play2');
      //同步底部播放按钮
      if ($(this).attr('class').indexOf('list_menu_play2') != -1) {
        //能找到list_menu_play2
        //当前子菜单的播放按钮是播放状态
        $musicPlay.addClass('music_play2');
        //让文字高亮
        $item.find('div').css('color', '#fff'); //找到点击的父亲list_music，找到其中的div
        $item.siblings().find('div').css('color', ' rgba(255,255,255,0.5)');
      } else {
        //当前子菜单的播放按钮不是播放状态
        $musicPlay.removeClass('music_play2');
        //让文字不高亮
        $item.find('div').css('color', " rgba(255,255,255,0.5)");
      }
      //切换序号的状态 将序号变成播放的动态图，记得要在css的list_number2处加优先级
      $item.find('.list_number').toggleClass('list_number2');
      $item.siblings().find('.list_number').removeClass('list_number2');

      //播放音乐
      player.playMusic($item.get(0).index, $item.get(0).music);
    })



  }



  // 定义一个方法创建一条音乐
  function crateMusicItem(index, music) {
    /*斜杠是转义符，div外层有引号了*/
    var $item = $("" +
      "<li class=\"list_music\">\n" +
      "<div class=\"list_check\"><i></i></div>\n" +
      "<div class=\"list_number\">" + (index + 1) + "</div>\n" +
      "<div class=\"list_name\">" + music.name + "" +
      "     <div class=\"list_menu\">\n" +
      "          <a href=\"javascript:;\" title=\"播放\" class='list_menu_play'></a>\n" +
      "          <a href=\"javascript:;\" title=\"添加\"></a>\n" +
      "          <a href=\"javascript:;\" title=\"下载\"></a>\n" +
      "          <a href=\"javascript:;\" title=\"分享\"></a>\n" +
      "     </div>\n" +
      "</div>\n" +
      "<div class=\"list_singer\">" + music.singer + "</div>\n" +
      "<div class=\"list_time\">\n" +
      "     <span>" + music.time + "</span>\n" +
      "     <a href=\"javascript:;\" title=\"删除\" class='list_menu_del'></a>\n" +
      "</div>\n" +
      "</li>");

    $item.get(0).index = index;
    $item.get(0).music = music;

    return $item;
  }
})

play.js代码

$(function () {
  //自定义滚动条
  $(".content_list").mCustomScrollbar();
  var $audio=$('audio');
  //加载歌曲列表
  getPlayerList();

  function getPlayerList() {
    $.ajax({
      //从哪加载
      url: "./source/musiclist.json",
      //  加载的是什么类型
      dataType: "json",

      //  成功之后做什么
      success: function (data) {

        // 3.1遍历获取到的数据, 创建每一条音乐
        var $musicList = $(".content_list ul");
        $.each(data, function (index, ele) {
          var $item = crateMusicItem(index, ele);
          $musicList.append($item);
        });
        // initMusicInfo(data[0]);
        // initMusicLyric(data[0]);
      },
      //失败之后做什么
      error: function (e) {
        console.log(e);
      }
    })
  }
  //初始化事件监听
  initEvents();

  function initEvents() {

    //监听歌曲的移入移出事件
    //要用事件委托因为歌曲都是新增的
    $('.content_list').delegate(".list_music", "mouseenter", function () {
      //find 搜索所有与指定表达式相匹配的元素，这个函数是找出正在处理的元素的后代元素的好方法
      //如果直接用$('.list_menu')所有菜单会一起显示出来
      //显示子菜单
      $(this).find('.list_menu').stop().fadeIn(100);
      $(this).find('.list_time a').stop().fadeIn(100);
      //隐藏时长
      $(this).find('.list_time span').stop().fadeOut(100);
    })
    $('.content_list').delegate(".list_music", "mouseleave", function () {
      //隐藏子菜单
      $(this).find('.list_menu').stop().fadeOut(100);
      $(this).find('.list_time a').stop().fadeOut(100);
      //显示时长
      $(this).find('.list_time span').stop().fadeIn(100);
    })
    //监听歌曲的移入移出事件
    //要用事件委托因为歌曲都是新增的
    $('.content_list').delegate(".list_music", "mouseenter", function () {
      //find 搜索所有与指定表达式相匹配的元素，这个函数是找出正在处理的元素的后代元素的好方法
      //如果直接用$('.list_menu')所有菜单会一起显示出来
      //显示子菜单
      $(this).find('.list_menu').stop().fadeIn(100);
      $(this).find('.list_time a').stop().fadeIn(100);
      //隐藏时长
      $(this).find('.list_time span').stop().fadeOut(100);
    })
    $('.content_list').delegate(".list_music", "mouseleave", function () {
      //隐藏子菜单
      $(this).find('.list_menu').stop().fadeOut(100);
      $(this).find('.list_time a').stop().fadeOut(100);
      //显示时长
      $(this).find('.list_time span').stop().fadeIn(100);
    })

    //监听复选框的点击事件
    $('.content_list').delegate('.list_check', 'click', function () {
      $(this).toggleClass('list_checked'); //有就删除，没有就添加
    })
    //监听播放按钮的点击事件
    var $musicPlay = $('.music_play');
    $('.content_list').delegate('.list_menu_play', 'click', function () {
      var $item = $(this).parents('.list_music');
      // console.log($item.get(0).index);

      //切换播放图标
      $(this).toggleClass('list_menu_play2');
      //复原其他播放图标
      //先找点击的祖先list_music,再用siblings()方法找list_music的兄弟，
      $item.siblings().find('.list_menu_play').removeClass('list_menu_play2');
      //同步底部播放按钮
      if ($(this).attr('class').indexOf('list_menu_play2') != -1) {
        //能找到list_menu_play2
        //当前子菜单的播放按钮是播放状态
        $musicPlay.addClass('music_play2');
        //让文字高亮
        $item.find('div').css('color', '#fff'); //找到点击的父亲list_music，找到其中的div
        $item.siblings().find('div').css('color', ' rgba(255,255,255,0.5)');
      } else {
        //当前子菜单的播放按钮不是播放状态
        $musicPlay.removeClass('music_play2');
        //让文字不高亮
        $item.find('div').css('color', " rgba(255,255,255,0.5)");
      }
      //切换序号的状态 将序号变成播放的动态图，记得要在css的list_number2处加优先级
      $item.find('.list_number').toggleClass('list_number2');
      $item.siblings().find('.list_number').removeClass('list_number2');

      //播放音乐
      player.playMusic($item.get(0).index, $item.get(0).music);
    })



  }



  // 定义一个方法创建一条音乐
  function crateMusicItem(index, music) {
    /*斜杠是转义符，div外层有引号了*/
    var $item = $("" +
      "<li class=\"list_music\">\n" +
      "<div class=\"list_check\"><i></i></div>\n" +
      "<div class=\"list_number\">" + (index + 1) + "</div>\n" +
      "<div class=\"list_name\">" + music.name + "" +
      "     <div class=\"list_menu\">\n" +
      "          <a href=\"javascript:;\" title=\"播放\" class='list_menu_play'></a>\n" +
      "          <a href=\"javascript:;\" title=\"添加\"></a>\n" +
      "          <a href=\"javascript:;\" title=\"下载\"></a>\n" +
      "          <a href=\"javascript:;\" title=\"分享\"></a>\n" +
      "     </div>\n" +
      "</div>\n" +
      "<div class=\"list_singer\">" + music.singer + "</div>\n" +
      "<div class=\"list_time\">\n" +
      "     <span>" + music.time + "</span>\n" +
      "     <a href=\"javascript:;\" title=\"删除\" class='list_menu_del'></a>\n" +
      "</div>\n" +
      "</li>");

    $item.get(0).index = index;
    $item.get(0).music = music;

    return $item;
  }
})

野生小米椒

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
用jQuery实现qq音乐播放器

折腾了很久，最终还是决定先放弃，继续学习jQuery后面的内容，做了有一大半吧，核心功能不想搞了，以后有时间再继续吧贴代码：html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content=...
复制链接

扫一扫

专栏目录