免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
返回列表 發帖

[分享] 论坛左下角可以伸缩换页音乐播放器

论坛左下角可以伸缩换页音乐播放器,业余时间瞎弄的,并非原创,喜欢的朋友拿去玩玩,
360截图-8103269.jpg
2018-3-21 21:13


1、新建一个模版命名为“gequ”,放入下边代码。  可以在默认模板新建模版得出地址: (论坛地址/templates/default/gequ.htm)
  1. <html>
  2. <head>
  3.         <meta charset="UTF-8">
  4.         <title>MPlayer音乐播放器</title>
  5.         <link rel="stylesheet" href="http://www.msge.top/gequ/mplayer.css">

  6. <script src="http://www.msge.top/gequ/jsmis01.htm" type="text/javascript"></script>
  7. <script type="text/javascript">
  8. window.onunload = function(){
  9. var IsMusicMode = true;
  10. document.getElementById("music").src ="";
  11. };
  12. window.onerror = function(){
  13. return true;
  14. };
  15. if(navigator.userAgent.indexOf("MSIE")>0){
  16. window.onbeforeunload = function(){
  17. }
  18. }else{
  19. window.onbeforeunload = function(){
  20. return("歐尼醬真的要退出嗎?");
  21. }
  22. }
  23. function mainpage(){
  24. if(navigator.userAgent.indexOf("MSIE")>0){
  25. var x1 = document.getElementById("music");
  26. document.getElementById("playerbox").removeChild(x1);
  27. }
  28. window.location.href="http://xxcn.imotor.com/";
  29. }
  30. var calcHeight = function() {
  31. $("#base").height($(window).height());
  32.       }
  33.       $(document).ready(function() {
  34.         calcHeight();
  35.       });
  36.       $(window).resize(function() {
  37.         calcHeight();
  38.       }).load(function() {
  39.         calcHeight();
  40.       });
  41. </script>         


  42. <style>
  43. html body{
  44.    width:100%;
  45.    height:100%;
  46.    margin:0px;
  47.    font-size:10px;
  48.    color:#FFF;
  49. }
  50. #base{width:100%;background-color:#FFF}
  51.                 .info {
  52.                         font-family: "Microsoft Yahei";
  53.                         text-align: center;
  54.                 }
  55.                 .info h1 {
  56.                         font-weight: 400;
  57.                 }
  58.         </style>
  59. </head>
  60. <body>
  61. <div class="info">
  62.         <iframe id="base" src="http://xxcn.imotor.com/" name="preview-frame" frameborder="0" noresize="noresize">
  63.    </iframe>
  64. </div>
  65. <div class="mp">
  66.         <div class="mp-box">
  67.                 <img src="http://www.msge.top/gequ/ying.png" alt="music cover" class="mp-cover">
  68.                 <div class="mp-info">
  69.                         <p class="mp-name">燕归巢</p>
  70.                         <p class="mp-singer">许嵩</p>
  71.                         <p><span class="mp-time-current">00:00</span>/<span class="mp-time-all">00:00</span></p>
  72.                 </div>
  73.                 <div class="mp-btn">
  74.                         <button class="mp-prev" title="上一首"></button>
  75.                         <button class="mp-pause" title="播放"></button>
  76.                         <button class="mp-next" title="下一首"></button>
  77.                         <button class="mp-mode" title="播放模式"></button>
  78.                         <div class="mp-vol">
  79.                                 <button class="mp-vol-img" title="静音"></button>
  80.                                 <div class="mp-vol-range" data-range_min="0" data-range_max="100" data-cur_min="80">
  81.                                         <div class="mp-vol-current"></div>
  82.                                         <div class="mp-vol-circle"></div>
  83.                                 </div>
  84.                         </div>
  85.                 </div>
  86.                 <div class="mp-pro">
  87.                         <div class="mp-pro-current"></div>
  88.                 </div>
  89.                 <div class="mp-menu">
  90.                         <button class="mp-list-toggle"></button>
  91.                         <button class="mp-lrc-toggle"></button>
  92.                 </div>
  93.         </div>
  94.         <button class="mp-toggle">
  95.                 <span class="mp-toggle-img"></span>
  96.         </button>
  97.         <div class="mp-lrc-box">
  98.                 <ul class="mp-lrc"></ul>
  99.         </div>
  100.         <button class="mp-lrc-close"></button>
  101.         <div class="mp-list-box">
  102.                 <ul class="mp-list-title"></ul>
  103.                 <table class="mp-list-table">
  104.                         <thead>
  105.                                 <tr>
  106.                                         <th>歌名</th>
  107.                                         <th>歌手</th>
  108.                                         <th>时长</th>
  109.                                 </tr>
  110.                         </thead>
  111.                         <tbody class="mp-list"></tbody>
  112.                 </table>
  113.         </div>
  114. </div>
  115. <script src="http://www.msge.top/gequ/jquery.min.js"></script>
  116. <script src="http://www.msge.top/gequ/mplayer.js"></script>
  117. <script src="http://www.msge.top/gequ/aalits.htm"></script>
  118. <script src="http://www.msge.top/gequ/mplayer-functions.js"></script>
  119. <script src="http://www.msge.top/gequ/jquery.nstSlider.min.js"></script>
  120. <script>
  121. var modeText = ['顺序播放','单曲循环','随机播放','列表循环'];
  122. var player = new MPlayer({
  123.         // 容器选择器名称
  124.         containerSelector: '.mp',
  125.         // 播放列表
  126.         songList: mplayer_song,
  127.         // 专辑图片错误时显示的图片
  128.         defaultImg: 'http://www.msge.top/gequ/ying.png',
  129.         // 自动播放
  130.         autoPlay: true,
  131.         // 播放模式(0->顺序播放,1->单曲循环,2->随机播放,3->列表循环(默认))
  132.         playMode:0,
  133.         playList:0,
  134.         playSong:0,
  135.         // 当前歌词距离顶部的距离
  136.         lrcTopPos: 34,
  137.         // 列表模板,用${变量名}$插入模板变量
  138.         listFormat: '<tr><td>${name}[        DISCUZ_CODE_36        ]lt;/td><td>${singer}[        DISCUZ_CODE_36        ]lt;/td><td>${time}[        DISCUZ_CODE_36        ]lt;/td></tr>',
  139.         // 音量滑块改变事件名称
  140.         volSlideEventName:'change',
  141.         // 初始音量
  142.         defaultVolume:80
  143. }, function () {
  144.         // 绑定事件
  145.         this.on('afterInit', function () {
  146.                 console.log('播放器初始化完成,正在准备播放');
  147.         }).on('beforePlay', function () {
  148.                 var $this = this;
  149.                 var song = $this.getCurrentSong(true);
  150.                 var songName = song.name + ' - ' + song.singer;
  151.                 console.log('即将播放'+songName+',return false;可以取消播放');
  152.         }).on('timeUpdate', function () {
  153.                 var $this = this;
  154.                 console.log('当前歌词:' + $this.getLrc());
  155.         }).on('end', function () {
  156.                 var $this = this;
  157.                 var song = $this.getCurrentSong(true);
  158.                 var songName = song.name + ' - ' + song.singer;
  159.                 console.log(songName+'播放完毕,return false;可以取消播放下一曲');
  160.         }).on('mute', function () {
  161.                 var status = this.getIsMuted() ? '已静音' : '未静音';
  162.                 console.log('当前静音状态:' + status);
  163.         }).on('changeMode', function () {
  164.                 var $this = this;
  165.                 var mode = modeText[$this.getPlayMode()];
  166.                 $this.dom.container.find('.mp-mode').attr('title',mode);
  167.                 console.log('播放模式已切换为:' + mode);
  168.         });
  169. });


  170. $(document.body).append(player.audio); // 测试用

  171. setEffects(player);


  172. </script>
  173. </body>
  174. </html>
複製代碼
2,代码中有两处论坛地址:xxcn.imotor.com  换上自己论坛,最后在论坛导航添加菜单,  更新一下缓存即可!   


更多风格美化代码教程:末世阁资源
1

評分人數

這好東西一定要來支持的。

TOP

這好東西一定要來支持的。

TOP

謝謝分享

TOP

好東西一定要來支持的。

TOP

好東西一定要來支持的。

TOP

返回列表