Java基础、中级、高级、架构面试资料
    你的位置：业余草 > HTML5 > jQuery仿酷狗叮咚官网音乐播放器

    jQuery仿酷狗叮咚官网音乐播放器

    HTML5 herman 2978浏览 0评论
    公告：“业余草”微信公众号提供免费CSDN下载服务(只下Java资源)，关注业余草微信公众号，添加作者微信：xttblog2，发送下载链接帮助你免费下载！
    本博客日IP超过2000，PV 3000 左右，急需赞助商。
    极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
    受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
    所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序
    视频教程免费领
    腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云

    今天闲来无事，看见酷狗叮咚官网的音乐播放器上的新闻焦点图很漂亮，就使用 jQuery 模仿了该插件，本文分享一下制作过程。

    老规矩，我们还是先来看一下运营效果图：

    jQuery仿酷狗叮咚官网音乐播放器

    相关实现代码如下： 

    <!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery仿酷狗官网www.xttblog.com</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.focus.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#j_Focus").Focus();
});
</script>
<style>@font-face{font-family:uc-nexus-iconfont;
src:url(chrome-extension://pogijhnlcfmcppgimcaccdkmbedjkmhi/res/font_9qmmi8b8jsxxbt9.woff) format('woff'),
url(chrome-extension://pogijhnlcfmcppgimcaccdkmbedjkmhi/res/font_9qmmi8b8jsxxbt9.ttf) format('truetype')}</style>
<script type="text/javascript" src="integrator.js"></script>
</head>
<body id="introduction">
<div id="page">
	<div id="container" class="content clearfix">
		<div class="focusWrap">
			<div class="focusCon" id="j_Focus">
			<div class="focusL">
				<ul class="ulFocus" id="j_FocusNav">
					<li rel="0">
						<span>酷狗7正式版发布<br>音乐魔力全线绽放</span>
					</li>

					<li rel="1">
						<span>海量免费高清MV<br>更清晰更流畅</span>
					</li>
					<li rel="2">
						<span>酷狗7:音乐魔方<br>带给你全新播放体验</span>
					</li>
					<li rel="3">

						<span>个性化歌曲推荐<br>酷狗猜你喜欢</span>
					</li>
					<li rel="4">
						<span>酷狗收音机<br>重新认识电台魅力</span>
					</li>
					<li rel="5">
						<span>手机酷狗3.0<br>无线音乐新序章</span>

					</li>
				</ul>
				<div class="back" id="j_FocusBack" style="top: 180px;"></div>
			</div>
			<div class="focusM">
				<ul class="ulFCon" id="j_FocusCon" style="margin-top: -1172px;">
					<li>
						<a href="http://www.xttblog.com" "="">
							<img src="1.jpg" alt="酷狗7正式版发布">

						</a>
					</li>
					<li>
						<a href="http://www.xttblog.com" "="">
							<img src="2.jpg" alt="海量免费高清MV">
						</a>
					</li>
					<li>
						<a href="http://www.xttblog.com" "="">
							<img src="3.jpg" alt="酷狗7:音乐魔方">
						</a>
					</li>
					<li>
						<a href="http://www.xttblog.com" "="">
							<img src="4.jpg" alt="个性化歌曲推荐">
						</a>
					</li>
					<li>

						<a href="http://www.xttblog.com" "="">
							<img src="5.jpg" alt="酷狗收音机">
						</a>
					</li>
					<li>
						<a href="http://www.xttblog.com" "="">
							<img src="6.jpg" alt="手机酷狗3.0">
						</a>
					</li>

				</ul>
			</div>
			</div>
			<div class="focusR">
				<div class="kugoo">
					<a title="马酷狗7" href="http://www.xttblog.com">马酷狗7</a>
				</div>
				<ul class="ulHot">

	 				<li><a href="http://www.xttblog.com" "="">酷狗音乐2011</a></li>
	 				<li><a href="http://www.xttblog.com" "="">手机酷狗3.0版</a></li>
	 				<li><a href="http://www.xttblog.com" "="">酷狗网络收音机</a></li>
					<li><a href="http://www.xttblog.com/" "="">酷狗叮咚</a></li>
				</ul>
			</div>
		</div>
  </div>
 </div>
<div style="text-align:center;clear:both;">
</div>
<div style="display:none">
</div><div style="display:none">
</div><style type="text/css">.source-url{font-size:15px;text-align:center}</style>
<script src="follow.js" type="text/javascript"></script>
</div>
</body></html>

    相关源码我已共享到百度网盘，链接：https://pan.baidu.com/s/1eTBnmh0 密码：bloh。需要的可以进行下载。

    业余草公众号

    最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！

    本文原文出处：业余草： » jQuery仿酷狗叮咚官网音乐播放器

    相关文章推荐