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

Rank: 3Rank: 3

積分
365 
威望
365  
金錢
362  
最後登錄
2023-9-27 
1# 跳轉到 » 倒序看帖
打印
tT
舞动發表於 2018-3-21 21:16 | 只看該作者

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

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

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">

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


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


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

  177. setEffects(player);


  180. </script>
  181. </body>
  182. </html>
複製代碼
2，代码中有两处论坛地址：xxcn.imotor.com  换上自己论坛，最后在论坛导航添加菜单，  更新一下缓存即可！   


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

評分人數

收藏 分享

Rank: 7Rank: 7Rank: 7

積分
8659 
威望
8659  
金錢
10077  
最後登錄
2024-10-31 

中級會員高級會員金牌會員論壇元老正式版主資深版主熱心會員
2#
4rphotoclub發表於 2018-3-21 23:01 | 只看該作者
這好東西一定要來支持的。
歡迎大家齊來加入4R網上攝影會

TOP

Rank: 2

積分
68 
威望
68  
金錢
76  
最後登錄
2018-5-22 
3#
no5發表於 2018-3-22 10:23 | 只看該作者
這好東西一定要來支持的。

TOP

Rank: 1

積分
3 
威望
3  
金錢
0  
最後登錄
2020-7-29 
4#
z81220發表於 2018-3-22 19:39 | 只看該作者
謝謝分享

TOP

Rank: 3Rank: 3

積分
365 
威望
365  
金錢
362  
最後登錄
2023-9-27 
5#
舞动發表於 2018-4-26 16:05 | 只看該作者
好東西一定要來支持的。
末世资源吧-分享风格美化

TOP

Rank: 3Rank: 3

積分
365 
威望
365  
金錢
362  
最後登錄
2023-9-27 
6#
舞动發表於 2018-4-26 16:05 | 只看該作者
好東西一定要來支持的。
末世资源吧-分享风格美化

TOP

返回列表