Home > Article > Web Front-end > 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:141369browse
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!
Recommended reading:
angularJS Ionic implements mobile image upload function
How to use Angular preloading delay module
The above is the detailed content of Detailed explanation of the steps to implement scrolling title using js. For more information, please follow other related articles on the PHP Chinese website!