jQuery scrolling marquee in html page title tag

杀马特。学长 韩版系。学妹 提交于 2019-12-03 20:48:16

That's not very hard to do if you just want it to scroll like the marquee tag:

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

That's pretty basic but should give you an idea on how to tweak it to your liking.

In Tatu Ulmanen's answer, there is a problem with space characters. As psarid stated as comment, after the first scroll, all of the spaces are removed.

This is because html parser trims texts. That means it removes the spaces at the end and at the beginning of the text. When title is scrolling, the title object in html looks like that:

<title>Scrolling Title With Spaces</title>
<title>crolling Title With SpacesS</title>
<title>rolling Title With SpacesSc</title>
<title>olling Title With SpacesScr</title>
...
<title>Title With SpacesScrolling</title>

As you can see above, we lost the space between words Scrolling and Spaces. To prevent that, we need to store original document.title somewhere in our javascript code and put a space or something else to the end of it. Then, we can scroll document.title by scrolling the text in the other variable. Here is the modified code of Tatu Ulmanen.

var documentTitle = document.title + " - ";

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

Add the below script on your page head and then call the scrlsts() function on body onload

<script type="text/javascript">
var scrl = $('title').text();
function scrlsts() {
     scrl = scrl.substring(1, scrl.length) + scrl.substring(0, 1);
     document.title = scrl;
     setTimeout("scrlsts()", 500);
     }
<script>

No JQuery você pode fazer assim:

setInterval(function () {
  $("head title").html($("head title").html().substring(1) + $("head title").html().substring(0,1));
}, 300);
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!