Home >Web Front-end >JS Tutorial >JS implements navigation effect code for automatically switching text_javascript skills

JS implements navigation effect code for automatically switching text_javascript skills

WBOYOriginal: 2016-05-16 15:42:282059browse

The example in this article describes the JS navigation effect code that automatically switches text. Share it with everyone for your reference. The details are as follows:

Here we introduce the navigation menu effect that supports automatic text switching. In fact, it does not look like a menu. At first glance, it looks like a Select drop-down box with arrow control buttons on both sides. Click on the left side to switch the menu text upwards. , click on the right side to switch to a menu item content, or automatically switch. The menu will automatically change text when the mouse is not clicked.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/js-auto-cha-font-nav-style-codes/

The specific code is as follows:

<HTML>
<HEAD>
<TITLE>变化的文字导航条</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
</HEAD>
<BODY bgColor=#fef4d9>
<CENTER>变化的文字导航条</CENTER><BR>
<CENTER>
<TABLE borderColor=#99FFFF border=5 borderlight="green">
 <TBODY>
 <TR>
  <TD>
   <STYLE>.scrollerstyle {
BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BACKGROUND: #ffffff; BORDER-LEFT: #000000 1px solid; CURSOR: hand; BORDER-BOTTOM: #000000 1px solid; FONT-FAMILY: webdings
}
</STYLE>
<SCRIPT language=javascript>
 var msgs = new Array(
   "欢迎光临小站",
   "网易娱乐",
   "搜狐门户",
   "央视国际" ); 
 var msg_url = new Array(
   "http://www.sina.com",
   "http://www.163.com",
   "http://www.sohu.com",
   "http://www.cctv.com" ); 
 var target_url = new Array(
   "0",
   "0",
   "0",
   "1" );
var barwidth=350 //Enter main bar width in px or %
var setdelay=2000 //Enter delay between msgs, in mili-seconds
var mouseover_color='#B5D0FF' //Specify highlight color
var mouseout_color='#FFFFFF' //Specify default color
var count=0;
var ns6=document.getElementById&&!document.all
var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1
if (ie4||ns6){
document.write('<form name="news_bar"><input type="button" value="3" onclick="moveit(0)" class="scrollerstyle" style="width:22; height:22; border-right-width:0px;" name="prev" title="Previous News"><input type="button" name="news_bar_but" onclick="goURL();" style="color:#000000;background:' + mouseout_color + '; width:'+barwidth+'; height:22; border-width:1; border-color:#000000; cursor:hand" onmouseover="this.style.background=mouseover_color" onmouseout="this.style.background=mouseout_color"><input type="button" value="4" onclick="moveit(1)" class="scrollerstyle" style="width:22; height:22; border-left-width:0px;" name="next" title="Next News"></form>');
}
else{
document.write('<form name="news_bar"><input type="button" value="Previous" onclick="moveit(0)">')
if (navigator.userAgent.indexOf("Opera")!=-1)
document.write('<input type="button" name="news_bar_but" onclick="goURL();" style="width:'+barwidth+'" border="0">')
else
document.write('<input type="button" name="news_bar_but" onclick="goURL();" width="'+barwidth+'" border="0">')
document.write('<input type="button" value="Next" onclick="moveit(1)"></form>')
}
function init_news_bar(){
 document.news_bar.news_bar_but.value=msgs[count];
}
function moveit(how){
if (how==1){ //cycle foward
if (count<msgs.length-1)
count++
else
count=0
}
else{ //cycle backward
if (count==0)
count=msgs.length-1
else
count--
}
document.news_bar.news_bar_but.value=msgs[count];
}
function tick_bar(){
setInterval("moveit(1)",setdelay)
}
function goURL(){
 if(target_url[count]=="0")
 {
 location.href=msg_url[count];
 }
 else
 {
 window.open(msg_url[count]);
 }
}
tick_bar(); // delete this line if you don't want messages to tick
init_news_bar();
</SCRIPT>
 </TD></TR></TBODY></TABLE></CENTER>
</BODY>
</HTML>

I hope this article will be helpful to everyone’s JavaScript programming design.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jQuery implements menu effect code with slider_jqueryNext article：jQuery implements menu effect code with slider_jquery

See more

JS implements navigation effect code for automatically switching text_javascript skills

Related articles