jQuery开发仿开发仿QQ版音乐播放器版音乐播放器
主要介绍了jQuery开发仿QQ版的音乐播放器,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下
本文通过Html+CSS+jQuery开发仿QQ版的音乐播放器,是前端技术的综合应用,所用素材来源于网络,仅供学习分享使用,如有不足之处,还请指正。
涉及知识点涉及知识点
在本例中用到的知识点如下,按jQuery和CSS进行区分:
jQuery 是一个 JavaScript 库, 极大地简化了 JavaScript 编程,常见知识点如下:
1. 通过标签获取jQuery对象:var $audio =$("audio");
2. 通过选择符获取jQuery对象并设置文本内容:$(".music_progrss_time").text(timeStr);
3. 通过选择符,标签名获取对象并获取第i个子元素:$(".song_lyric ul li").eq(index);
4. 通过ajax异步获取数据并刷新页面:$.ajax({});
5. 通过类选择符获取元素并进行隐藏或显示:$(this).find(".list_menu").stop().fadeIn(100);
6. 通过委托动态设置单击事件,主要针对动态生成元素:$(".content_list").delegate(".list_check", "click", function() {});
7. 通过addClass添加类,removeClass删除类,toggleClass切换类,hasClass是否包含类
8. 获取与对象同级的兄弟节点:$musicList.siblings();
9. 触发相关事件:$(".music_next").trigger("click");
CSS通过使用 CSS 我们可以大大提升网页开发的工作效率!本例使用知识点如下:
1. 设置距离左边的距离:margin-left: 20px; 设置距离右边的距离:margin-right: 20px;
2. 设置透明度:opacity: 0.6; 值[0,1]从透明到全不透明
3. 设置背景图片:background: url(../img/player_logo.png) no-repeat 0 0;设置背景颜色和透明度:background: rgba(255,255,255,0.5);
4. 设置li的样式:list-style: none;
5. 设置显示样式为行内块:display: inline-block;
6. 设置圆角:border-radius: 5px;
7. 设置相对位置:position: relative;
8. 背景图片的起始坐标:background-position: 0 -75px;
示例效果图及结构划分示例效果图及结构划分
本例的示例效果图及结构划分如下所示:
Html核心代码核心代码
Header部分代码:主要用于显示logo和登录显示,如下所示:
<div class="header">
<h1 class="logo">
<a href="#" rel="external nofollow" ></a> --by Alan.hsiang
</h1>
<ul class="register">
<li>登录</li>
<li>设置</li>
</ul>
</div>
中间区域部分:主要包括坐边的列表和右边的歌曲相关,如下所示:
<div class="content">
<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 class="content_list">
<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>
</div>
<div class="content_right">
<div class="song_info">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="song_info_pic">
<img src="" alt="jQuery开发仿QQ版音乐播放器" />
</a>
<div class="song_info_name">歌曲名称:<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class=""></a></div>
<div class="song_info_singer">歌手名:<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class=""></a></div>
<div class="song_info_album">专辑名称:<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class=""></a></div>