论坛左下角可以伸缩换页音乐播放器
论坛左下角可以伸缩换页音乐播放器，业余时间瞎弄的，并非原创，喜欢的朋友拿去玩玩，[attach]78729[/attach]
1、新建一个模版命名为“gequ”,放入下边代码。 可以在默认模板新建模版得出地址： （论坛地址/templates/default/gequ.htm）[code]
<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>
[/code]2，代码中有两处论坛地址：xxcn.imotor.com 换上自己论坛，最后在论坛导航添加菜单， 更新一下缓存即可！
更多风格美化代码教程：[size=7][color=Red][url=http://msge.top]末世阁资源[/url][/color][/size] 這好東西一定要來支持的。 這好東西一定要來支持的。 謝謝分享 好東西一定要來支持的。 好東西一定要來支持的。
頁:
[1]