Fatal编程技术网

Twitter bootstrap 引导头不'；不要适当地倒塌

twitter-bootstrap jsp

Twitter bootstrap 引导头不'；不要适当地倒塌,twitter-bootstrap,jsp,header,collapse,Twitter Bootstrap,Jsp,Header,Collapse,我正在开发一个网络收音机，偶然发现引导导航栏切换按钮出现了一些问题，该按钮应该能够自适应地折叠标题内容 在页面加载时，按钮在开始的几次中起作用。但随后垂直滚动条出现在我的页面的一侧，一旦出现，按钮就不再折叠标题内容。 UPD：我发现问题的原因是最近播放的10首曲目的列表，这些曲目取自Icecast的playlist.log文件，由Tomcat服务器呈现到特殊页面my.site/titles.jsp，然后使用jQuery功能 $（“#tracklist”）.html（）被附加到索引页 每次页面加

我正在开发一个网络收音机，偶然发现引导导航栏切换按钮出现了一些问题，该按钮应该能够自适应地折叠标题内容

在页面加载时，按钮在开始的几次中起作用。但随后垂直滚动条出现在我的页面的一侧，一旦出现，按钮就不再折叠标题内容。

UPD：我发现问题的原因是最近播放的10首曲目的列表，这些曲目取自Icecast的playlist.log文件，由Tomcat服务器呈现到特殊页面my.site/titles.jsp，然后使用jQuery功能 $（“#tracklist”）.html（）被附加到索引页

每次页面加载后都会发生这种情况，平均延迟为2.5秒，这是由于Last.fm API的响应时间造成的，我从该API获取最近轨迹列表中每个元素的轨迹覆盖。因此，当我按下导航栏切换按钮时，页眉将展开，并将其高度添加到页面正文中。getTitles（）函数在最近的轨迹列表中追加10行默认不可见的文本。尽管该列表不可见，但在附加到页面时，也会增加页面正文的高度。当它发生时，标题切换按钮不能再折叠标题内容

::selection {
  background: var(--player-bg-color); 
}
::-moz-selection {
  background: var(--player-bg-color);
}
html, body {
  height: 100%;
}
body {
  background: url('../image/bg.jpg') no-repeat !important;
  -webkit-background-size: cover !important;
  background-size: cover !important;
}
a {
  outline: none !important;
  cursor: pointer;
}
:root {
  --font-fam: 'Raleway', sans-serif;
  --whitey-color: #fafafa;
  --header-row-h: 110px;
  --header-row-minh: 65px;
  --player-bg-color: #131415;
  --player-bg2-color: #202224;
  --row-background: rgb(24, 24, 24);
  --logo-img: url("../image/logo.png");
  --hover-text-color: #E0B35B;
}

.auth {
  line-height: 70px;
  margin-top: 40px;
  margin-left :0;
  font-family: 'Oswald', sans-serif;
}
.auth a {
  font-size: 20px;
  color: black;
}

.auth a:hover,
.auth a:focus,
.auth a:active {
  color: black;
  text-decoration: none;
}
.navbar {
  border: none !important;
}

.active > a {
  box-shadow: none !important;
}

.active > a > span {
  border-bottom: 3px solid black !important;
  border-top: 3px solid black !important;
}
.active > a:hover > span {
  border-bottom: 3px solid var(--hover-text-color) !important;
  border-top: 3px solid var(--hover-text-color) !important;
}

.container-fluid {
  background: #dea437 !important;
  /*background: linear-gradient(0, var(--hover-text-color), #dea437);*/
  box-shadow: none !important;
}

#toggles a {
  font-size: 30px;
  text-transform: uppercase;
  color: #000;
  background: #dea437 !important;
  /*background: linear-gradient(0, var(--hover-text-color), #dea437);*/
  font-family: 'Oswald', sans-serif;;
  line-height: 80px;
}
#toggles a:hover {
  background: #000 !important;
  font-family: 'Oswald', sans-serif;
  color: var(--hover-text-color);
}
#toggles a:hover span {
  border-bottom: 3px solid transparent;
  border-top: 3px solid transparent;
}
#toggles a span {
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  border-bottom: 3px solid transparent;
  border-top: 3px solid transparent;
}
.logo {
  background: var(--logo-img) no-repeat;
  background-size: var(--header-row-h);
  opacity: 1.0;
  height: var(--header-row-h);
  margin-right: 10px;
  width: var(--header-row-h);
  max-height: var(--header-row-h);
  min-height: var(--header-row-h);
  cursor: pointer;
}
.onclick-menu {
    width: 32px;


height: 32px;
  color: #171e2f;
  position: absolute; /*absolute;*/
  top: 50px;
  left: 450px;
  float:right;
  display: inline-block; /*block*/
  padding: 0;
  margin: 0 0 1em 0;
  outline: 0;
  transition: all 0.33s ease-in;
}

.onclick-menu-content {
    font-family: 'Arimo', sans-serif;
    pointer-events: auto;
    position: absolute;
    left: -473px;
    width: 515px;
    text-overflow: ellipsis;
    white-space: nowrap;
    top: 16px;
    z-index: 1;
    opacity: 1;
    visibility: visible;
    margin-top: 19px;
    margin-left: 0;
    padding: 10px;
    border-bottom: 5px;
}

.onclick-menu:focus {
    pointer-events: none;
}

.onclick-menu:focus .onclick-menu-content {
    opacity: 1;
    visibility: visible;
}

.onclick-menu-content li:nth-child(even) {
    background-color: #181818;

}
.onclick-menu-content li:nth-child(odd) {
    background-color: #222222;
}

.onclick-menu-content li {
    list-style-type: none;
    white-space: nowrap;
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none;
    user-select: none;
    display: block;
    height: 34px;
    z-index: -5;
    line-height: 34px;
    border: none;
    outline: 0;
    cursor: default;
    transform: translateX(0);
}

.onclick-menu-content li:hover {
    transform: translateX(3px);
}


.onclick-menu-content a {
    text-decoration: none;
    color: var(--whitey-color);
    font-size: 14px;
    height: 32px;
    vertical-align: middle;
    display: inline-block;
    padding-right: 10px;
}
.onclick-menu-content a:hover {
    color: var(--hover-text-color);
    text-decoration: none;
}

.onclick-menu-content li:hover > img {
    filter: none;
}

.onclick-menu-content li > img {
    padding-right: 10px;
    pointer-events: none;
    filter: grayScale(100%);
    vertical-align: middle;
}
  .onclick-menu-content ul:first-child {
    filter:none;
}

var tit = '\xa0';
var jP = $("#jquery_jplayer_1");
var media = "http://my.icecast.stream:9000/live";
var cur = 'amp';
var space = String.fromCharCode(160);
var rec = String.fromCharCode(9899);
var refresh = '<i class="fa fa-refresh fa-spin fa-fw gradient-icon"></i>';
var fa = $(".fa");

var url = 'http://my.icecast.stream:9000/json.xsl';

var _mountPoint, p_width, marquee_dur;
var p_marquee = $('.jp-title p');

_mountPoint = '/live';

//function for parsing titles and covers
function radioTitle() {

    if (cur !== null) {

        if (cur === 'amp') { //cur - current station
            $.ajax({  type: 'GET',
                url: url,
                async: true,
                jsonpCallback: 'parseMusic',
                contentType: "application/json",
                dataType: 'jsonp',
                success: function (json) {

                    tit = json[_mountPoint]['title'];
                    getTitles();
                    getCover(true);
                    document.title = "MyWeb Radio @" + space + tit.concat(space + rec + space);
                    $('#track-title').text(tit ? tit : space);
                    //setting up 'marquee' (title) speed:
                    setSpeed();

                },
                error: function (e) {
                    console.log(e.message);
                }
            });

        } else if (cur === 'chl' || cur === 'dsc') {
            var fm = "My Web-Radio @ Chillout FM / ";
            getCover(false);
            document.title = cur ==='chl' ? fm + "Chillout" + space + rec + space : fm + "Disco" + space + rec + space;
            // console.log(cur);
        }
    }
}

//setting trackname scroll speed
function setSpeed() {
    p_width = p_marquee.width();
    if (p_width > 350) {
        marquee_dur = 0.16 * (p_width / 7.7865) + 20;
        p_marquee.css('animation', 'marquee linear infinite');
        p_marquee.css('animation-duration', marquee_dur + 's');
    } else {
        p_marquee.css('animation', 'none');
        p_marquee.css('transform', 'translate(-50%,0)');
    }
}

//bars button icon
var bars = '<i class="fa fa-bars gradient-icon" aria-hidden="true"></i>';

//getting cover image for current playing media from my.site/cover jsp page
function getCover(isMain) {
    if (isMain) {
        $.ajax({
            type: 'GET',
            url: 'cover',
            dataType: 'html',
            success: function (response) {
                $('#nowPlayingImg').html(response);
            }
        });
    } else {
        // $('#nowPlayingImg').html('<img width="110px" align="middle" src="../skin/image/music-elems.png" alt="cover">');

    }

}

//getting list of 10 recently played tracks from my.site/titles jsp page
function getTitles() {
    $.ajax({
        type: 'GET',
        url: 'titles',
        dataType: 'html',

        success: function (response) {
            $('#recent').html(bars + response);
        }
    });

}

$(document).ready(function(){

    setTimeout(function () {radioTitle();}, 2000);
    setInterval(function () {radioTitle();}, 15000);

    //setting client's timezone cookie
    var dateVar = new Date();
    var timezone = dateVar.getTimezoneOffset()/60 * (-1);
    document.cookie="TZOffset=" + timezone + ";path=/";

    //init jPlayer
    jP.jPlayer({
        ready: function () {
            $(this).jPlayer("setMedia", {
                mp3: media
            });
        },

        cssSelectorAncestor: "#jp_container_1",
        supplied: "mp3",
        useStateClassSkin: true,
        autoBlur: false,
        keyEnabled: true
    });

    setInterval(function () {
        var isPaused = jP.data().jPlayer.status.paused;

        if (isPaused) {
            jP.jPlayer("clearMedia");
            jP.jPlayer("setMedia", {
                mp3: media
            });
        }
    }, 9000);
});

//Toggle active tabs
$('#toggles').find('li').on('click', function() {
    $('#toggles').find('li').removeClass('active');
    $(this).addClass('active');
});

//Toggle play/pause icons
$(".subdiv .jp-controls a").click(function () {
    $(this).find(fa).toggleClass('fa-play fa-pause');

});

var lastAmp, lastChl, lastDsc, last;
var stream = $(".jp-audio-stream"), subDivs = $(".jp-details, .counter, .onclick-menu");

//Switching the stations
function _setMedia(str) {

    cur = str;

        switch (str) {
            case 'chl': {
                if (!lastChl) {
                    last = true;
                    $('#nowPlayingImg').html('<img width="110" align="middle" src="http://my.site/img/logo.png" alt="cover">');
                    lastChl = !lastChl;
                    lastDsc = false;
                    lastAmp = false;
                    media = "http://my.icecast.stream:9000/chillout";
                    jP.jPlayer("setMedia", {
                        mp3: media
                    });
                    stream.width(115);
                    subDivs.hide();
                    break;
                } else {
                    last = false;
                    break;
                }
            }
            case 'dsc': {
                if (!lastDsc) {
                    last = true;
                    $('#nowPlayingImg').html('<img width="110" align="middle" src="my.site/img/logo.png" alt="cover">');
                    lastDsc = !lastDsc;
                    lastChl = false;
                    lastAmp = false;
                    media = "http://my.icecast.stream:9000/disco";
                    jP.jPlayer("setMedia", {
                        mp3: media
                    });
                    stream.width(115);
                    subDivs.hide();
                    break;
                } else {
                    last = false;
                    break;
                }
            }
            case 'amp': {
                if (!lastAmp) {
                    last = true;
                    getCover(true);
                    lastAmp = !lastAmp;
                    lastChl = false;
                    lastDsc = false;
                    media = "http://my.icecast.stream:9000/live";
                    jP.jPlayer("setMedia", {
                        mp3: media
                    });
                    stream.width(473);
                    // document.querySelector('marquee').start();
                    subDivs.show();
                    break;
                } else {
                    last = false;
                    break;
                }
            }
        }

        if (last) {
            $(".jp-controls").find(fa).removeClass('fa-pause').addClass('fa-play');
        }

}
我使用的是引导版本3.3.7

以下是我的网站截图：

My index.jsp页面代码：

Javascript

::selection {
  background: var(--player-bg-color); 
}
::-moz-selection {
  background: var(--player-bg-color);
}
html, body {
  height: 100%;
}
body {
  background: url('../image/bg.jpg') no-repeat !important;
  -webkit-background-size: cover !important;
  background-size: cover !important;
}
a {
  outline: none !important;
  cursor: pointer;
}
:root {
  --font-fam: 'Raleway', sans-serif;
  --whitey-color: #fafafa;
  --header-row-h: 110px;
  --header-row-minh: 65px;
  --player-bg-color: #131415;
  --player-bg2-color: #202224;
  --row-background: rgb(24, 24, 24);
  --logo-img: url("../image/logo.png");
  --hover-text-color: #E0B35B;
}

.auth {
  line-height: 70px;
  margin-top: 40px;
  margin-left :0;
  font-family: 'Oswald', sans-serif;
}
.auth a {
  font-size: 20px;
  color: black;
}

.auth a:hover,
.auth a:focus,
.auth a:active {
  color: black;
  text-decoration: none;
}
.navbar {
  border: none !important;
}

.active > a {
  box-shadow: none !important;
}

.active > a > span {
  border-bottom: 3px solid black !important;
  border-top: 3px solid black !important;
}
.active > a:hover > span {
  border-bottom: 3px solid var(--hover-text-color) !important;
  border-top: 3px solid var(--hover-text-color) !important;
}

.container-fluid {
  background: #dea437 !important;
  /*background: linear-gradient(0, var(--hover-text-color), #dea437);*/
  box-shadow: none !important;
}

#toggles a {
  font-size: 30px;
  text-transform: uppercase;
  color: #000;
  background: #dea437 !important;
  /*background: linear-gradient(0, var(--hover-text-color), #dea437);*/
  font-family: 'Oswald', sans-serif;;
  line-height: 80px;
}
#toggles a:hover {
  background: #000 !important;
  font-family: 'Oswald', sans-serif;
  color: var(--hover-text-color);
}
#toggles a:hover span {
  border-bottom: 3px solid transparent;
  border-top: 3px solid transparent;
}
#toggles a span {
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  border-bottom: 3px solid transparent;
  border-top: 3px solid transparent;
}
.logo {
  background: var(--logo-img) no-repeat;
  background-size: var(--header-row-h);
  opacity: 1.0;
  height: var(--header-row-h);
  margin-right: 10px;
  width: var(--header-row-h);
  max-height: var(--header-row-h);
  min-height: var(--header-row-h);
  cursor: pointer;
}
.onclick-menu {
    width: 32px;


height: 32px;
  color: #171e2f;
  position: absolute; /*absolute;*/
  top: 50px;
  left: 450px;
  float:right;
  display: inline-block; /*block*/
  padding: 0;
  margin: 0 0 1em 0;
  outline: 0;
  transition: all 0.33s ease-in;
}

.onclick-menu-content {
    font-family: 'Arimo', sans-serif;
    pointer-events: auto;
    position: absolute;
    left: -473px;
    width: 515px;
    text-overflow: ellipsis;
    white-space: nowrap;
    top: 16px;
    z-index: 1;
    opacity: 1;
    visibility: visible;
    margin-top: 19px;
    margin-left: 0;
    padding: 10px;
    border-bottom: 5px;
}

.onclick-menu:focus {
    pointer-events: none;
}

.onclick-menu:focus .onclick-menu-content {
    opacity: 1;
    visibility: visible;
}

.onclick-menu-content li:nth-child(even) {
    background-color: #181818;

}
.onclick-menu-content li:nth-child(odd) {
    background-color: #222222;
}

.onclick-menu-content li {
    list-style-type: none;
    white-space: nowrap;
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none;
    user-select: none;
    display: block;
    height: 34px;
    z-index: -5;
    line-height: 34px;
    border: none;
    outline: 0;
    cursor: default;
    transform: translateX(0);
}

.onclick-menu-content li:hover {
    transform: translateX(3px);
}


.onclick-menu-content a {
    text-decoration: none;
    color: var(--whitey-color);
    font-size: 14px;
    height: 32px;
    vertical-align: middle;
    display: inline-block;
    padding-right: 10px;
}
.onclick-menu-content a:hover {
    color: var(--hover-text-color);
    text-decoration: none;
}

.onclick-menu-content li:hover > img {
    filter: none;
}

.onclick-menu-content li > img {
    padding-right: 10px;
    pointer-events: none;
    filter: grayScale(100%);
    vertical-align: middle;
}
  .onclick-menu-content ul:first-child {
    filter:none;
}

var tit = '\xa0';
var jP = $("#jquery_jplayer_1");
var media = "http://my.icecast.stream:9000/live";
var cur = 'amp';
var space = String.fromCharCode(160);
var rec = String.fromCharCode(9899);
var refresh = '<i class="fa fa-refresh fa-spin fa-fw gradient-icon"></i>';
var fa = $(".fa");

var url = 'http://my.icecast.stream:9000/json.xsl';

var _mountPoint, p_width, marquee_dur;
var p_marquee = $('.jp-title p');

_mountPoint = '/live';

//function for parsing titles and covers
function radioTitle() {

    if (cur !== null) {

        if (cur === 'amp') { //cur - current station
            $.ajax({  type: 'GET',
                url: url,
                async: true,
                jsonpCallback: 'parseMusic',
                contentType: "application/json",
                dataType: 'jsonp',
                success: function (json) {

                    tit = json[_mountPoint]['title'];
                    getTitles();
                    getCover(true);
                    document.title = "MyWeb Radio @" + space + tit.concat(space + rec + space);
                    $('#track-title').text(tit ? tit : space);
                    //setting up 'marquee' (title) speed:
                    setSpeed();

                },
                error: function (e) {
                    console.log(e.message);
                }
            });

        } else if (cur === 'chl' || cur === 'dsc') {
            var fm = "My Web-Radio @ Chillout FM / ";
            getCover(false);
            document.title = cur ==='chl' ? fm + "Chillout" + space + rec + space : fm + "Disco" + space + rec + space;
            // console.log(cur);
        }
    }
}

//setting trackname scroll speed
function setSpeed() {
    p_width = p_marquee.width();
    if (p_width > 350) {
        marquee_dur = 0.16 * (p_width / 7.7865) + 20;
        p_marquee.css('animation', 'marquee linear infinite');
        p_marquee.css('animation-duration', marquee_dur + 's');
    } else {
        p_marquee.css('animation', 'none');
        p_marquee.css('transform', 'translate(-50%,0)');
    }
}

//bars button icon
var bars = '<i class="fa fa-bars gradient-icon" aria-hidden="true"></i>';

//getting cover image for current playing media from my.site/cover jsp page
function getCover(isMain) {
    if (isMain) {
        $.ajax({
            type: 'GET',
            url: 'cover',
            dataType: 'html',
            success: function (response) {
                $('#nowPlayingImg').html(response);
            }
        });
    } else {
        // $('#nowPlayingImg').html('<img width="110px" align="middle" src="../skin/image/music-elems.png" alt="cover">');

    }

}

//getting list of 10 recently played tracks from my.site/titles jsp page
function getTitles() {
    $.ajax({
        type: 'GET',
        url: 'titles',
        dataType: 'html',

        success: function (response) {
            $('#recent').html(bars + response);
        }
    });

}

$(document).ready(function(){

    setTimeout(function () {radioTitle();}, 2000);
    setInterval(function () {radioTitle();}, 15000);

    //setting client's timezone cookie
    var dateVar = new Date();
    var timezone = dateVar.getTimezoneOffset()/60 * (-1);
    document.cookie="TZOffset=" + timezone + ";path=/";

    //init jPlayer
    jP.jPlayer({
        ready: function () {
            $(this).jPlayer("setMedia", {
                mp3: media
            });
        },

        cssSelectorAncestor: "#jp_container_1",
        supplied: "mp3",
        useStateClassSkin: true,
        autoBlur: false,
        keyEnabled: true
    });

    setInterval(function () {
        var isPaused = jP.data().jPlayer.status.paused;

        if (isPaused) {
            jP.jPlayer("clearMedia");
            jP.jPlayer("setMedia", {
                mp3: media
            });
        }
    }, 9000);
});

//Toggle active tabs
$('#toggles').find('li').on('click', function() {
    $('#toggles').find('li').removeClass('active');
    $(this).addClass('active');
});

//Toggle play/pause icons
$(".subdiv .jp-controls a").click(function () {
    $(this).find(fa).toggleClass('fa-play fa-pause');

});

var lastAmp, lastChl, lastDsc, last;
var stream = $(".jp-audio-stream"), subDivs = $(".jp-details, .counter, .onclick-menu");

//Switching the stations
function _setMedia(str) {

    cur = str;

        switch (str) {
            case 'chl': {
                if (!lastChl) {
                    last = true;
                    $('#nowPlayingImg').html('<img width="110" align="middle" src="http://my.site/img/logo.png" alt="cover">');
                    lastChl = !lastChl;
                    lastDsc = false;
                    lastAmp = false;
                    media = "http://my.icecast.stream:9000/chillout";
                    jP.jPlayer("setMedia", {
                        mp3: media
                    });
                    stream.width(115);
                    subDivs.hide();
                    break;
                } else {
                    last = false;
                    break;
                }
            }
            case 'dsc': {
                if (!lastDsc) {
                    last = true;
                    $('#nowPlayingImg').html('<img width="110" align="middle" src="my.site/img/logo.png" alt="cover">');
                    lastDsc = !lastDsc;
                    lastChl = false;
                    lastAmp = false;
                    media = "http://my.icecast.stream:9000/disco";
                    jP.jPlayer("setMedia", {
                        mp3: media
                    });
                    stream.width(115);
                    subDivs.hide();
                    break;
                } else {
                    last = false;
                    break;
                }
            }
            case 'amp': {
                if (!lastAmp) {
                    last = true;
                    getCover(true);
                    lastAmp = !lastAmp;
                    lastChl = false;
                    lastDsc = false;
                    media = "http://my.icecast.stream:9000/live";
                    jP.jPlayer("setMedia", {
                        mp3: media
                    });
                    stream.width(473);
                    // document.querySelector('marquee').start();
                    subDivs.show();
                    break;
                } else {
                    last = false;
                    break;
                }
            }
        }

        if (last) {
            $(".jp-controls").find(fa).removeClass('fa-pause').addClass('fa-play');
        }

}

var tit='\xa0'；
var jP=$（“#jquery_jpu第1层”）；
var媒体=”http://my.icecast.stream:9000/live";
var cur='amp'；
var space=String.fromCharCode（160）；
var rec=String.fromCharCode（9899）；
var刷新=“”；
var fa=$（“.fa”）；
var url='1〕http://my.icecast.stream:9000/json.xsl';
变量装入点、p_宽度、选框dur；
var p_marquee=$（'.jp title p'）；
_装入点='/live'；
//用于解析标题和封面的函数
函数radioTitle（）{
如果（cur！==null）{
如果（cur=='amp'）{//cur-当前电台
$.ajax（{type:'GET'，
url:url，
async:true，
jsonpCallback:“parseMusic”，
contentType:“应用程序/json”，
数据类型：“jsonp”，
成功：函数（json）{
tit=json[_mountPoint]['title']；
getTitles（）；
getCover（真）；
document.title=“MyWeb Radio@”+space+tit.concat（space+rec+space）；
$（“#曲目标题”）.text（tit？tit:space）；
//设置“字幕”（标题）速度：
设置速度（）；
},
错误：函数（e）{
控制台日志（e.message）；
}
});
}否则如果（cur=='chl'| | cur=='dsc'）{
var fm=“My Web Radio@Chillout fm/”；
盖特封面（假）；
document.title=cur==='chl'？fm+“冷静”+空间+记录+空间：fm+“迪斯科”+空间+记录+空间；
//控制台日志（cur）；
}
}
}
//设置trackname滚动速度
函数setSpeed（）{
p_width=p_marquee.width（）；
如果（p_宽度>350）{
选框宽度=0.16*（p_宽度/7.7865）+20；
css（'animation'，'marquee linear infinite'）；
css（'animation-duration'，marquee_dur+'s'）；
}否则{
css（'animation'，'none'）；
p_marquee.css（'transform'，'translate（-50%，0）'）；
}
}
//工具栏按钮图标
var条=“”；
//从my.site/cover jsp页面获取当前播放媒体的封面图像
功能盖（isMain）{
如果（伊斯曼）{
$.ajax({
键入：“GET”，
url:'封面'，
数据类型：“html”，
成功：功能（响应）{
$（'nowPlayingImg'）.html（响应）；
}
});
}否则{
//$（'#nowPlayingImg'）.html（''；
}
}
//从my.site/titles jsp页面获取最近播放的10首曲目列表
函数getTitles（）{
$.ajax({
键入：“GET”，
url:'标题'，
数据类型：“html”，
成功：功能（响应）{
$（'#recent'）.html（条+响应）；
}
});
}
$（文档）.ready（函数（）{
setTimeout（函数（）{radioTitle（）；}，2000）；
setInterval（函数（）{radioTitle（）；}，15000）；
//设置客户端的时区cookie
var dateVar=新日期（）；
var timezone=dateVar.getTimezoneOffset（）/60*（-1）；
document.cookie=“TZOffset=”+时区+“路径=/”；
//初始化jPlayer
jP.jPlayer({
就绪：函数（）{
$（this）.jPlayer（“setMedia”{
mp3：媒体
});
},
cssSelectorAncestor:#jp#u container_1“，
提供：“mp3”，
useStateClassSkin：对，
汽车司机：错，
keydenabled:true
});
setInterval（函数（）{
var isPaused=jP.data（）.jPlayer.status.paused；
如果（i暂停）{
jP.jPlayer（“clearMedia”）；
jP.jPlayer（“setMedia”{
mp3：媒体
});
}
}, 9000);
});
//切换活动选项卡
$（“#切换”）.find（'li'）.on（'click'，function（）{
$（“#切换”）.find（'li'）.removeClass（'active'）；
$（this.addClass（'active'）；
});
//切换播放/暂停图标
$（“.subdiv.jp控制a”）。单击（函数（）{
$（this.find（fa.toggleClass（'fa-play-fa-pause'）；
});
var lastAmp、lastChl、lastDsc、last；
var stream=$（“.jp音频流”），subDivs=$（“.jp详细信息，.counter，.onclick菜单”）；
//开关站
功能设置媒体（str）{
cur=str；
开关（str）{
案例“chl”：{
如果（！lastChl）{
last=真；
$（'#nowPlayingImg'）.html（''；
lastChl=！lastChl；
lastDsc=false；
lastAmp=false；
媒体=”http://my.icecast.stream: