平滑滚动和动态更改页面标题

发布于 2024-12-17 19:35:48 字数 2168 浏览 0 评论 0原文

我目前有一个网站可以更改页面标题以反映当前正在播放的任何歌曲。我想做的是让页面标题不断滚动，以便用户可以看到正在播放的歌曲的全名，即使他们打开了很多选项卡。

我尝试了几种不同的滚动插件，但我发现效果最好的一个是这里找到的插件： http://www.seangw.com/wordpress/index.php/2009/01/basic-ajax-tutorial-smooth-scrolling-text-marquee-with-a-jquery-plugin/

我可以让插件在常规主体元素上正常工作，但当我将其放在页面标题上时它不起作用。我尝试过将标签包裹在标签中，但它不起作用。此外，我的页面标题会动态更改，因此滚动文本也需要更改。

这是我正在更改标题的 javascript 函数：

function playNext(newState)
{
    //alert("new state: " + newState);
    //unstarted (-1), ended (0), playing (1), paused (2), buffering (3), video cued (5)
    if(newState == 0) //song is done
    {
        //**************minimize myself*******************
        var i = ' . $this->i .';
        var dataString = getDataString(i);
        minimizeSong(dataString, i);
        //**************maximize next song****************
        dataString = getDataString(i+1); //i + 1 is next song
        maximizeSong(dataString, i+1);
        //I will automatically start playing on load
    }
    else if(newState == 1) // if its playing, change the title
    {
        $("title").text("' . $this->title . ' by ' . $this->artist . '    - T3k.no");
    }
    else if(newState == 2) //song is paused, go back to original title
    {
        $("title").text("Paused - T3k.no");
    }
    else if(newState == 3) //song is buffering, change title
    {
        $("title").text("Loading '.$this->artist .' - T3k.no");
    }
}

任何人都可以帮忙吗？我怎样才能实现这一目标？

这是行不通的：

<html><head>
<marquee behavior="scroll" direction="left" scrollamount="2"
      height="75" width="150">
    <title>WANT THIS TO SCROLL</title>
</marquee>
</head></html>

但是像这样的东西工作得很好：

<body>
    <marquee behavior="scroll" direction="left" scrollamount="2"
          height="75" width="150">
          <p>This is a test of a Smooth Marquee using jquery.</p>
     </marquee>
</body>

原文

I currently have a site that changes the title of the page to reflect whatever song is currently being played. What I would like to do is have the title of the page constantly scrolling so the user can see the full name of the song playing, even if they have a lot of tabs open.

I tried out a few different scrolling plugins, but the one I've found to work best is the plugin found here:
http://www.seangw.com/wordpress/index.php/2009/01/basic-ajax-tutorial-smooth-scrolling-text-marquee-with-a-jquery-plugin/

I can get the plugin working fine on a regular body element, but it doesn't work when I put it on the title of a page. I've tried wrapping the tag in the tags but it doesn't work. In addition, the title of my page changes dynamically, so the scrolling text would need to change as well.

Here is the javascript function where I am changing the title:

function playNext(newState)
{
    //alert("new state: " + newState);
    //unstarted (-1), ended (0), playing (1), paused (2), buffering (3), video cued (5)
    if(newState == 0) //song is done
    {
        //**************minimize myself*******************
        var i = ' . $this->i .';
        var dataString = getDataString(i);
        minimizeSong(dataString, i);
        //**************maximize next song****************
        dataString = getDataString(i+1); //i + 1 is next song
        maximizeSong(dataString, i+1);
        //I will automatically start playing on load
    }
    else if(newState == 1) // if its playing, change the title
    {
        $("title").text("' . $this->title . ' by ' . $this->artist . '    - T3k.no");
    }
    else if(newState == 2) //song is paused, go back to original title
    {
        $("title").text("Paused - T3k.no");
    }
    else if(newState == 3) //song is buffering, change title
    {
        $("title").text("Loading '.$this->artist .' - T3k.no");
    }
}

Can anyone help? How can I go about achieving this?

This doesn't work:

<html><head>
<marquee behavior="scroll" direction="left" scrollamount="2"
      height="75" width="150">
    <title>WANT THIS TO SCROLL</title>
</marquee>
</head></html>

But something like this works fine:

<body>
    <marquee behavior="scroll" direction="left" scrollamount="2"
          height="75" width="150">
          <p>This is a test of a Smooth Marquee using jquery.</p>
     </marquee>
</body>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

惟欲睡 2024-12-24 19:35:49

这是您的 jQuery 就绪函数：

(function titleMarquee() {
 document.title = document.title.substring(1)+document.title.substring(0,1);
setTimeout(titleMarquee, 200);
})();

选框插件无法按您的预期工作，因为 head 标签无法呈现。它的主要用途是设置您的页面及其资源。 marquee 标签是为呈现的页面元素而创建的。 head 和 title 标签不在“正常流程”中。

Put this is your jQuery ready function:

(function titleMarquee() {
 document.title = document.title.substring(1)+document.title.substring(0,1);
setTimeout(titleMarquee, 200);
})();

The marquee plugin doesn't work as you expect it to because for one the head tag doesn't render. It's primary use is setting up your page and it's resources. The marquee tag is made for rendered page elements. The head and title tags aren't in the "normal flow" as it were.

回复收藏 0 原文

~没有更多了~