免費論壇

繁體 | 簡體

Sclub交友聊天~加入聊天室當版主

(檢舉)

分享

SCLUB免費論壇申請-使用者論壇 » Discuz--代碼美化 » 论坛左下角可以伸缩换页音乐播放器

返回列表發帖

Rank: 3 Rank: 3

積分: 365
威望: 365
金錢: 362
最後登錄: 2023-9-27

1^# 跳轉到 » 倒序看帖

字體大小: tT

舞动發表於 2018-3-21 21:16 | 只看該作者

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

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

360截图-8103269.jpg

1、新建一个模版命名为“gequ”,放入下边代码。可以在默认模板新建模版得出地址：（论坛地址/templates/default/gequ.htm）

<html>
<head>
<meta charset="UTF-8">
<title>MPlayer音乐播放器</title>
<link rel="stylesheet" href="http://www.msge.top/gequ/mplayer.css">
<script src="http://www.msge.top/gequ/jsmis01.htm" type="text/javascript"></script>
<script type="text/javascript">
window.onunload = function(){
var IsMusicMode = true;
document.getElementById("music").src ="";
};
window.onerror = function(){
return true;
};
if(navigator.userAgent.indexOf("MSIE")>0){
window.onbeforeunload = function(){
}
}else{
window.onbeforeunload = function(){
return("歐尼醬真的要退出嗎？");
}
}
function mainpage(){
if(navigator.userAgent.indexOf("MSIE")>0){
var x1 = document.getElementById("music");
document.getElementById("playerbox").removeChild(x1);
}
window.location.href="http://xxcn.imotor.com/";
}
var calcHeight = function() {
$("#base").height($(window).height());
}
$(document).ready(function() {
calcHeight();
});
$(window).resize(function() {
calcHeight();
}).load(function() {
calcHeight();
});
</script>
<style>
html body{
width:100%;
height:100%;
margin:0px;
font-size:10px;
color:#FFF;
}
#base{width:100%;background-color:#FFF}
.info {
font-family: "Microsoft Yahei";
text-align: center;
}
.info h1 {
font-weight: 400;
}
</style>
</head>
<body>
<div class="info">
<iframe id="base" src="http://xxcn.imotor.com/" name="preview-frame" frameborder="0" noresize="noresize">
</iframe>
</div>
<div class="mp">
<div class="mp-box">
<img src="http://www.msge.top/gequ/ying.png" alt="music cover" class="mp-cover">
<div class="mp-info">
<p class="mp-name">燕归巢</p>
<p class="mp-singer">许嵩</p>
<p><span class="mp-time-current">00:00</span>/<span class="mp-time-all">00:00</span></p>
</div>
<div class="mp-btn">
<button class="mp-prev" title="上一首"></button>
<button class="mp-pause" title="播放"></button>
<button class="mp-next" title="下一首"></button>
<button class="mp-mode" title="播放模式"></button>
<div class="mp-vol">
<button class="mp-vol-img" title="静音"></button>
<div class="mp-vol-range" data-range_min="0" data-range_max="100" data-cur_min="80">
<div class="mp-vol-current"></div>
<div class="mp-vol-circle"></div>
</div>
</div>
</div>
<div class="mp-pro">
<div class="mp-pro-current"></div>
</div>
<div class="mp-menu">
<button class="mp-list-toggle"></button>
<button class="mp-lrc-toggle"></button>
</div>
</div>
<button class="mp-toggle">
<span class="mp-toggle-img"></span>
</button>
<div class="mp-lrc-box">
<ul class="mp-lrc"></ul>
</div>
<button class="mp-lrc-close"></button>
<div class="mp-list-box">
<ul class="mp-list-title"></ul>
<table class="mp-list-table">
<thead>
<tr>
<th>歌名</th>
<th>歌手</th>
<th>时长</th>
</tr>
</thead>
<tbody class="mp-list"></tbody>
</table>
</div>
</div>
<script src="http://www.msge.top/gequ/jquery.min.js"></script>
<script src="http://www.msge.top/gequ/mplayer.js"></script>
<script src="http://www.msge.top/gequ/aalits.htm"></script>
<script src="http://www.msge.top/gequ/mplayer-functions.js"></script>
<script src="http://www.msge.top/gequ/jquery.nstSlider.min.js"></script>
<script>
var modeText = ['顺序播放','单曲循环','随机播放','列表循环'];
var player = new MPlayer({
// 容器选择器名称
containerSelector: '.mp',
// 播放列表
songList: mplayer_song,
// 专辑图片错误时显示的图片
defaultImg: 'http://www.msge.top/gequ/ying.png',
// 自动播放
autoPlay: true,
// 播放模式(0->顺序播放,1->单曲循环,2->随机播放,3->列表循环(默认))
playMode:0,
playList:0,
playSong:0,
// 当前歌词距离顶部的距离
lrcTopPos: 34,
// 列表模板，用${变量名}$插入模板变量
listFormat: '<tr><td>${name}[ DISCUZ_CODE_36 ]lt;/td><td>${singer}[ DISCUZ_CODE_36 ]lt;/td><td>${time}[ DISCUZ_CODE_36 ]lt;/td></tr>',
// 音量滑块改变事件名称
volSlideEventName:'change',
// 初始音量
defaultVolume:80
}, function () {
// 绑定事件
this.on('afterInit', function () {
console.log('播放器初始化完成，正在准备播放');
}).on('beforePlay', function () {
var $this = this;
var song = $this.getCurrentSong(true);
var songName = song.name + ' - ' + song.singer;
console.log('即将播放'+songName+'，return false;可以取消播放');
}).on('timeUpdate', function () {
var $this = this;
console.log('当前歌词：' + $this.getLrc());
}).on('end', function () {
var $this = this;
var song = $this.getCurrentSong(true);
var songName = song.name + ' - ' + song.singer;
console.log(songName+'播放完毕，return false;可以取消播放下一曲');
}).on('mute', function () {
var status = this.getIsMuted() ? '已静音' : '未静音';
console.log('当前静音状态：' + status);
}).on('changeMode', function () {
var $this = this;
var mode = modeText[$this.getPlayMode()];
$this.dom.container.find('.mp-mode').attr('title',mode);
console.log('播放模式已切换为：' + mode);
});
});
$(document.body).append(player.audio); // 测试用
setEffects(player);
</script>
</body>
</html>

複製代碼

2，代码中有两处论坛地址：xxcn.imotor.com 换上自己论坛，最后在论坛导航添加菜单，更新一下缓存即可！

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

1 評分人數

我很贊同 威望 + 8 金錢 + 2

4rphotoclub

Rank: 7 Rank: 7 Rank: 7

積分: 8659
威望: 8659
金錢: 10077
最後登錄: 2024-11-23

中級會員高級會員金牌會員論壇元老正式版主資深版主熱心會員

2^#

4rphotoclub發表於 2018-3-21 23:01 | 只看該作者

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

歡迎大家齊來加入4R網上攝影會

Rank: 2

積分: 68
威望: 68
金錢: 76
最後登錄: 2018-5-22

3^#

no5發表於 2018-3-22 10:23 | 只看該作者

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

Rank: 1

積分: 3
威望: 3
金錢: 0
最後登錄: 2020-7-29

4^#

z81220發表於 2018-3-22 19:39 | 只看該作者

謝謝分享

Rank: 3 Rank: 3

積分: 365
威望: 365
金錢: 362
最後登錄: 2023-9-27

5^#

舞动發表於 2018-4-26 16:05 | 只看該作者

好東西一定要來支持的。

末世资源吧-分享风格美化

Rank: 3 Rank: 3

積分: 365
威望: 365
金錢: 362
最後登錄: 2023-9-27

6^#

舞动發表於 2018-4-26 16:05 | 只看該作者

好東西一定要來支持的。

末世资源吧-分享风格美化