Home >Web Front-end >JS Tutorial >Detailed explanation of the steps to implement scrolling title using js

Detailed explanation of the steps to implement scrolling title using js

php中世界最好的语言Original: 2018-04-17 16:39:141446browse

This time I will bring you a detailed explanation of the steps to implement rolling title in js. What are the precautions for implementing rolling title in js. The following is a practical case, let's take a look.

<!DOCTYPE html>
<html>
<head>
    <meta content="text/html" charset="utf-8">
    <title></title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
            font-family:'微软雅黑';
        }
        img{
            float:left;
        }
    </style>
</head>
<body>
</body>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
    var position=0;
    var message='^_^欢迎浏览本网站';
    var x=2*(60/message.length);//要保证是两倍
    var newStr='';
    for(var i=0;i<x;i++){
        newStr+=message;
    }
    function titleTex(){
        var title=newStr.substring(position,position+60);
        position++;
        if(position==60){//刚好截取到尾巴
            position=0;
        }
        document.title=title;
    }
    setInterval(titleTex,150);
</script>
</html>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Detailed explanation of the steps to implement scrolling title using js

Related articles