[jQuery基础] jQuery案例 -- qq音乐以及初步解决Ajax 跨域问题

最新推荐文章于 2023-06-09 10:40:05 发布

原创

最新推荐文章于 2023-06-09 10:40:05 发布 · 1k 阅读

标签

#css #html #javascript #ajax #jquery

qq音乐案例

案例效果展示

在这里插入图片描述

案例效果结构划分

整体布局

在这里插入图片描述

歌曲条目部分

在这里插入图片描述

顶部栏

在这里插入图片描述

底部栏

在这里插入图片描述

歌词显示部分

在这里插入图片描述

案例实现功能

a. QQ音乐播放器静态页面布局
* 页面整体布局规划和实现
* 页面顶部布局和静态效果
* 工具条布局和静态效果
* 音乐列表布局和静态效果
* 自定义滚动条效果
* 歌曲信息的展示效果
* 底部播放布局和静态效果
* 页面整体的高斯模糊效果
b. QQ音乐播放器加载并播放歌曲
* 实现音乐动态加载逻辑
* 实现底部音乐控制图标的动态切换
* 实现底部音乐播放状态的动态切换
* 实现音乐序号的动画效果
c. QQ音乐播放器操作歌曲（切换、删除等）
* 实现音乐的播放、暂停功能
* 实现音乐切换(切歌)功能
* 实现音乐删除功能
d. QQ音乐播放器歌词加载、显示和同步
* 实现解析歌词并动态加载功能
* 实现歌词与歌曲播放进度同步功能
e. 拖动音乐进度条调整音乐播放进度功能

案例知识点(参考别人)

CSS
- 设置距离左边的距离：margin-left: 20px; 设置距离右边的距离：margin-right: 20px;
- 设置透明度：opacity: 0.6; 值[0,1]从透明到全不透明
- 设置背景图片：background: url(…/img/player_logo.png) no-repeat 0 0;
- 设背景颜色和透明度：background: rgba(255,255,255,0.5);
- 设置li的样式：list-style: none;
- 设置显示样式为行内块：display: inline-block;
- 设置圆角：border-radius: 5px;
- 设置相对位置：position: relative;
- 背景图片的起始坐标：background-position: 0 -75px;
JS
- 通过标签获取jQuery对象：var $a u d i o =$ (“audio”);
- 通过选择符获取jQuery对象并设置文本内容：$(".music_progrss_time").text(timeStr);
- 通过选择符，标签名获取对象并获取第i个子元素：$(".song_lyric ul li").eq(index);
- 通过ajax异步获取数据并刷新页面：$.ajax({});
- 通过类选择符获取元素并进行隐藏或显示：$(this).find(".list_menu").stop().fadeIn(100);
- 通过委托动态设置单击事件，主要针对动态生成元素：$(".content_list").delegate(".list_check", “click”, function() {});
- 通过addClass添加类，removeClass删除类，toggleClass切换类，hasClass是否包含类
- 获取与对象同级的兄弟节点：$musicList.siblings();
- 触发相关事件：$(".music_next").trigger(“click”);

案例思路

首先要先布局

头部header、中间区域content、底部footer和背景mask_bg

<!--头部header -->
<div class="header">
    <h1 class="logo"><a href="#"></a></h1>
    <ul class="register">
        <li>注册</li>
        <li>登陆</li>
    </ul>
</div>
<!--中间区域content-->
<div class="content">
    <div class="content_in"></div>
</div>
<!--底部footer-->
<div class="footer">
    <div class="footer_in"></div>
</div>
<!--背景mask_bg-->
<div class="mask_bg"></div>

工具条(收藏、添加到、下载、删除、清空列表),利用雪碧图完成图片
在这里插入图片描述

<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>

初步完成歌曲列表
在这里插入图片描述

<!-- 左下部分 -->
            <ul>
                <!-- 每一个歌曲条目 -->
                <li class="list_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>

完善歌曲部分
在这里插入图片描述

可以点击选项框

再点击每一行的时候会出现暂停,添加,下载,转发,删除等,换到下一行的时候其他行会淡入淡出的消失

function initEvents() {
       
       
// 1.监听歌曲的移入移出事件
// 要用事件委托因为歌曲都是新增的
    $(".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);
    });

/*
   addClass()是在原有的类基础上增加类属性，仍然保留原有的类的样式
   toggleClass() 是切换元素class类别，删除原有的class样式，替换为新的class样式. (切换,没有加，有减)
*/
    // 2.监听复选框的点击事件
    $(".content_list"<

最低0.47元/天解锁文章