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

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

更多精彩内容请看 web前端中文站
www.lisa33xiaoq.net 可按Ctrl + D 进行收藏

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

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

相关实现代码如下:

 <!DOCTYPE html>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>jquery仿酷狗官网www.lisa33xiaoq.net</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="www.lisa33xiaoq.net" "=" "> <img src="1.jpg " alt="酷狗7正式版发布 "> </a>
 </li> <li> <a href="www.lisa33xiaoq.net " "="">
 <img src="2.jpg" alt="海量免费高清MV"></a>
 </li>
 <li>
 <a href="www.lisa33xiaoq.net" "=" "> <img src="3.jpg " alt="酷狗7:音乐魔方 "> </a>
 </li> <li> <a href="www.lisa33xiaoq.net " "="">
 <img src="4.jpg" alt="个性化歌曲推荐"></a>
 </li>
 <li>
 <a href="www.lisa33xiaoq.net" "=" "> <img src="5.jpg " alt="酷狗收音机 "> </a>
 </li> <li> <a href="www.lisa33xiaoq.net " "="">
 <img src="6.jpg" alt="手机酷狗3.0"></a>
 </li>
 </ul>
 </div>
 </div>
 <div class="focusR">
 <div class="kugoo">
 <a title="马酷狗7" href="www.lisa33xiaoq.net">马酷狗7</a></div>
 <ul class="ulHot">
 <li>
 <a href="www.lisa33xiaoq.net" "=" ">酷狗音乐2011</a></li> 
 <li><a href="www.lisa33xiaoq.net " "="">手机酷狗3.0版</a></li>
 <li>
 <a href="www.lisa33xiaoq.net" "=" ">酷狗网络收音机</a></li> 
 <li><a href="www.lisa33xiaoq.net " "="">酷狗叮咚</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/1hBWs4CJgbYUzYQCFrTAZnw ?密码:k35p。需要的可以进行下载。

【注:本文源自网络文章资源,由站长整理发布】

0
如无特殊说明,文章均为原作者原创,转载请注明出处

该文章由 发布

这货来去如风,什么鬼都没留下!!!
发表我的评论

Hi,请填写昵称和邮箱!

取消评论
代码 贴图 加粗 链接 删除线 签到