免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
新浪微博
QQ空间
Facebook
Google+
Plurk
Twitter
Line
Board logo

标题: [建站代码] 测试音乐自动播放 [打印本页]
作者: 竞技鱼    时间: 2017-5-2 17:17     标题: 测试音乐自动播放

  1. <style>
  2. .icon_tools .icon_play {
  3. width: 14px;
  4. background-position: -227px 0;
  5. }
  6. .icon_tools a {
  7. display: inline-block;
  8. width: 14px;
  9. height: 14px;
  10. margin: 5px 0 0 2px;
  11. background: url('http://tlb.258club.com/attachments/month_1501/150117030332a936b560c13441.png') right top no-repeat;
  12. }
  13. .icon_tools .icon_stop {
  14. width: 14px;
  15. background-position: -230px -44px;
  16. }
  17. .icon_tools {
  18. width: 60px;
  19. text-align: right;
  20. margin-right: 5px;
  21. }
  22. .fr {
  23. float: right!important;
  24. }
  25. .song_list li {
  26. line-height: 25px;
  27. }
  28. .song_list li {
  29. margin: 2px 0;
  30. height: 25px;
  31. line-height: 25px;
  32. float: left;
  33. width: 100%;
  34. overflow: hidden;
  35. list-style: none!important;
  36. }
  37. .song_list {
  38. width: 350px;
  39. float: left;
  40. padding-right: 35px;
  41. }
  42. .song_list ul {
  43. width: 100%;
  44. overflow: hidden;
  45. }
  46. .song_list li .song_name a:hover, .song_list li .singer_name a:hover {
  47. color: #dd137b;
  48. }
  49. .song_list .blue {
  50. background: #458fce;
  51. }
  52. .song_list .num {
  53. font-size: 12px;
  54. margin-top: 4px;
  55. margin-left: 5px;
  56. height: 16px;
  57. line-height: 16px;
  58. width: 18px;
  59. color: #fff;
  60. text-align: center;
  61. float: left;
  62. background: #ccc;
  63. }
  64. .song_list li .song_name a, .song_list li .singer_name a {
  65. display: inline-block;
  66. width: 180px;
  67. color: #444;
  68. font-size: 14px;
  69. font-family: "Microsoft Yahei";
  70. overflow: hidden;
  71. white-space: nowrap;
  72. text-overflow: ellipsis;
  73. }
  74. .song_list li .song_name {
  75. margin: 0 10px;
  76. width: 180px;
  77. line-height: 23px;
  78. }
  79. </style>

  81. <div class="song_list">
  82.         <ul>
  83.                 <li>
  84.                 <span class="fl">
  85.                 <span class="num blue fl" style="background: #458fce;">01</span>
  86.                 </span>
  87.                 <span class="fl song_name">
  88.                 <a href="http://tlb.258club.com/redirect.php?goto=findpost&ptid=4005&pid=124309&fromuid=1" title="匆匆那年(电影《匆匆那年》同名主题曲)"> 匆匆那年(电影《匆匆那年》同名主题曲)</a>
  89.                 </span>
  90.                 <span class="fl singer_name text_clip">
  91.                 <a href="" title="王菲" target="_blank" style="width: 70px;font-size: 12px;">王菲</a>
  92.                 </span>
  93.                 <span class="fr">
  94.                 <span class="icon_tools fl" type="song">
  95.                 <a href="javascript:void(0)" onclick="playMP3(this)" url="http://tyst.migu.cn/public/ringmaker01/dailyring/karakalupload/2014/11/2014年11月5日紧急准入陈家瑛1首/全曲试听/Mp3_128_44_16/匆匆那年(电影匆匆那年主题曲)-王菲.mp3" class="icon_play" title="播放"></a>
  96.                 <a href="http://yinyueshiting.baidu.com/data2/music/124383790/124380645248400128.mp3?xcode=72fe116be261a0278fa5cb69e5ce61e62f7167fd0a01384c" target="_blank" class="icon_down" title="下载"></a>
  97.                 </span>
  98.                 </span>
  99.                 </li>
  100.                 <li>
  101.                 <span class="fl">
  102.                 <span class="num blue fl" style="background: #458fce;">02</span>
  103.                 </span>
  104.                 <span class="fl song_name">
  105.                 <a href="" title="小苹果" target="_blank"> 小苹果</a>
  106.                 </span>
  107.                 <span class="fl singer_name text_clip">
  108.                 <a href="" title="筷子兄弟" target="_blank" style="width: 70px;font-size: 12px;">筷子兄弟</a>
  109.                 </span>
  110.                 <span class="fr">
  111.                 <span class="icon_tools fl" type="song">
  112.                 <a href="javascript:void(0)" onclick="playMP3(this)" url="http://tyst.migu.cn/public/ringmaker01/dailyring/karakalupload/2014/08/2014年8月8日紧急准入天盈九州6首/全曲试听/Mp3_128_44_16/小苹果-筷子兄弟.mp3" class="icon_play" title="播放"></a>
  113.                 <a href="" target="_blank" class="icon_down" title="下载"></a>
  114.                 </span>
  115.                 </span>
  116.                 </li>
  117.                 <li>
  118.                 <span class="fl">
  119.                 <span class="num blue fl" style="background: #458fce;">03</span>
  120.                 </span>
  121.                 <span class="fl song_name">
  122.                 <a href="" title="小小的太阳" target="_blank"> 小小的太阳</a>
  123.                 </span>
  124.                 <span class="fl singer_name text_clip">
  125.                 <a href="" title="张宇" target="_blank" style="width: 70px;font-size: 12px;">张宇</a>
  126.                 </span>
  127.                 <span class="fr">
  128.                 <span class="icon_tools fl" type="song">
  129.                 <a href="javascript:void(0)" onclick="playMP3(this)" url="http://tlb.258club.com/attachments/month_1501/15011703463b85c89645a2f701.mp3" class="icon_play" title="播放"></a>
  130.                 <a href="http://tlb.258club.com/attachment.php?aid=MzEwNHwzMzI1MWNlYXwxNDIxNDM3NTkzfDY0ZjBNa0RYb0VrYmxycEVZaG10b1dCSHJ2OFNHNmVHOE93RXI0OG9JQnFWSUlz" target="_blank" class="icon_down" title="下载"></a>
  131.                 </span>
  132.                 </span>
  133.                 </li>
  134.                 <li>
  135.                 <span class="fl">
  136.                 <span class="num fl">04</span>
  137.                 </span>
  138.                 <span class="fl song_name">
  139.                 <a href="" title="平凡之路(后会无期主题曲)" target="_blank"> 平凡之路(后会无期主题曲)</a>
  140.                 </span>
  141.                 <span class="fl singer_name text_clip">
  142.                 <a href="" title="朴树" target="_blank" style="width: 70px;font-size: 12px;">朴树</a>
  143.                 </span>
  144.                 <span class="fr">
  145.                 <span class="icon_tools fl" type="song">
  146.                 <a href="javascript:void(0)" onclick="playMP3(this)" url="http://tyst.migu.cn/mp3/007/145/7145532_128.mp3" class="icon_play" title="播放"></a>
  147.                 <a href="" target="_blank" class="icon_down" title="下载"></a>
  148.                 </span>
  149.                 </span>
  150.                 </li>
  151.                 <li>
  152.                 <span class="fl">
  153.                 <span class="num fl">05</span>
  154.                 </span>
  155.                 <span class="fl song_name">
  156.                 <a href="" title="可惜没如果" target="_blank"> 可惜没如果</a>
  157.                 </span>
  158.                 <span class="fl singer_name text_clip">
  159.                 <a href="" title="林俊杰" target="_blank" style="width: 70px;font-size: 12px;">林俊杰</a>
  160.                 </span>
  161.                 <span class="fr">
  162.                 <span class="icon_tools fl" type="song">
  163.                 <a href="javascript:void(0)" onclick="playMP3(this)" url="http://tyst.migu.cn/public/ringmaker01/dailyring/karakalupload/2014/12/2014年12月19日紧急准入华纳音乐1首/全曲试听/Mp3_128_44_16/可惜没如果-林俊杰.mp3" class="icon_play" title="播放"></a>
  164.                 <a href="" target="_blank" class="icon_down" title="下载"></a>
  165.                 </span>
  166.                 </span>
  167.                 </li>
  168.                 <li>
  169.                 <span class="fl">
  170.                 <span class="num fl">06</span>
  171.                 </span>
  172.                 <span class="fl song_name">
  173.                 <a href="" title="时间煮雨(小时代3片尾曲)" target="_blank"> 时间煮雨(小时代3片尾曲)</a>
  174.                 </span>
  175.                 <span class="fl singer_name text_clip">
  176.                 <a href="" title="吴亦凡" target="_blank" style="width: 70px;font-size: 12px;">吴亦凡</a>
  177.                 </span>
  178.                 <span class="fr">
  179.                 <span class="icon_tools fl" type="song">
  180.                 <a href="javascript:void(0)" onclick="playMP3(this)" url="http://tyst.migu.cn/mp3/007/005/7005692_128.mp3" class="icon_play" title="播放"></a>
  181.                 <a href="" target="_blank" class="icon_down" title="下载"></a>
  182.                 </span>
  183.                 </span>
  184.                 </li>
  185.                 <li>
  186.                 <span class="fl">
  187.                 <span class="num fl">07</span>
  188.                 </span>
  189.                 <span class="fl song_name">
  190.                 <a href="" title="不再见(小时代3刺金时代插曲)" target="_blank"> 不再见(小时代3刺金时代插曲)</a>
  191.                 </span>
  192.                 <span class="fl singer_name text_clip">
  193.                 <a href="" title="陈学冬" target="_blank" style="width: 70px;font-size: 12px;">陈学冬</a>
  194.                 </span>
  195.                 <span class="fr">
  196.                 <span class="icon_tools fl" type="song">
  197.                 <a href="javascript:void(0)" onclick="playMP3(this)" url="http://tyst.migu.cn/public/ringmaker01/dailyring/karakalupload/2014/07/2014年7月16日紧急准入海蝶1首/全曲试听/Mp3_128_44_16/不再见(小时代3刺金时代插曲)-陈学冬.mp3" class="icon_play" title="播放"></a>
  198.                 <a href="" target="_blank" class="icon_down" title="下载"></a>
  199.                 </span>
  200.                 </span>
  201.                 </li>
  202.                 <li>
  203.                 <span class="fl">
  204.                 <span class="num fl">08</span>
  205.                 </span>
  206.                 <span class="fl song_name">
  207.                 <a href="" title="后会无期(后会无期同名主题曲)" target="_blank"> 后会无期(后会无期同名主题曲)</a>
  208.                 </span>
  209.                 <span class="fl singer_name text_clip">
  210.                 <a href="" title="G.E.M.邓紫棋" target="_blank" style="width: 70px;font-size: 12px;">G.E.M.邓紫棋</a>
  211.                 </span>
  212.                 <span class="fr">
  213.                 <span class="icon_tools fl" type="song">
  214.                 <a href="javascript:void(0)" onclick="playMP3(this)" url="http://tyst.migu.cn/mp3/uploads/140711/14050431582958451_128.mp3" class="icon_play" title="播放"></a>
  215.                 <a href="" target="_blank" class="icon_down" title="下载"></a>
  216.                 </span>
  217.                 </span>
  218.                 </li>
  219.                 <li>
  220.                 <span class="fl">
  221.                 <span class="num fl">09</span>
  222.                 </span>
  223.                 <span class="fl song_name">
  224.                 <a href="" title="算什么男人" target="_blank"> 算什么男人</a>
  225.                 </span>
  226.                 <span class="fl singer_name text_clip">
  227.                 <a href="" title="周杰伦" target="_blank" style="width: 70px;font-size: 12px;">周杰伦</a>
  228.                 </span>
  229.                 <span class="fr">
  230.                 <span class="icon_tools fl" type="song">
  231.                 <a href="javascript:void(0)" onclick="playMP3(this)" url="http://tyst.migu.cn/public/600907/tone/2014/12/16/2014121618/update/算什么男人-周杰伦/999989/算什么男人-周杰伦.mp3" class="icon_play" title="播放"></a>
  232.                 <a href="" target="_blank" class="icon_down" title="下载"></a>
  233.                 </span>
  234.                 </span>
  235.                 </li>
  236.                 <li>
  237.                 <span class="fl">
  238.                 <span class="num fl">10</span>
  239.                 </span>
  240.                 <span class="fl song_name">
  241.                 <a href="" title="剑心(古剑奇谭片头曲)" target="_blank"> 剑心(古剑奇谭片头曲)</a>
  242.                 </span>
  243.                 <span class="fl singer_name text_clip">
  244.                 <a href="" title="张杰" target="_blank" style="width: 70px;font-size: 12px;">张杰</a>
  245.                 </span>
  246.                 <span class="fr">
  247.                 <span class="icon_tools fl" type="song">
  248.                 <a href="javascript:void(0)" onclick="playMP3(this)" url="http://tyst.migu.cn/mp3/uploads/140701/14041787635548582_128.mp3" class="icon_play" title="播放"></a>
  249.                 <a href="" target="_blank" class="icon_down" title="下载"></a>
  250.                 </span>
  251.                 </span>
  252.                 </li>
  253.         </ul>
  254. </div>

  256. <script type="text/javascript"> 
  257. var audio =document.createElement("AUDIO");
  258. var publicObj= "";//全局点击对象
  259. function playMP3(obj){
  260.         var url = $jq(obj).attr("url");
  261.       var randNum = generateMixed(12)+"";
  262.         if(audio.paused&&$jq(obj).attr("class")=="icon_play"){
  263.                 publicObj = obj;
  264.         audio.src=url+"?msisdn="+randNum;
  265.                 audio.play();
  266.                 $jq(obj).attr("class","icon_stop");
  267.         }else if (!audio.paused&&$jq(obj).attr("class")=="icon_play"){
  268.                 audio.pause();
  269.                 audio.src=url;
  270.                 audio.play();
  271.                 $jq(publicObj).attr("class","icon_play");
  272.                 $jq(obj).attr("class","icon_stop");
  273.                 publicObj = obj;
  274.         }else{
  275.                 audio.pause();
  276.                 $jq(obj).attr("class","icon_play");
  277.         }
  278. }

  280. function RndNum(n){
  281. var rnd="";
  282. for(var i=0;i<n;i++)
  283. rnd+=Math.floor(Math.random()*10);
  284. return rnd;
  285. }

  287. var chars = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f','g','h','i','j','k','m','n','p','q','r','s','t','u','v','w','x','y','z'];

  289. function generateMixed(n) {
  290.      var res = "";
  291.      for(var i = 0; i < n ; i ++) {
  292.          var id = Math.ceil(Math.random()*35);
  293.          res += chars[id];
  294.      }
  295.      return res;
  296. }
  297. </script>

[attach]483[/attach][attach]482[/attach]



欢迎光临 竞技鱼-电子竞技|体育竞技|唯美壁纸|火爆影音|代码素材 (http://jju.funbbs.me/) Powered by Discuz! 7.2