JS实现自动切换文字的导航效果代码


Posted in Javascript onAugust 27, 2015

本文实例讲述了JS实现自动切换文字的导航效果代码。分享给大家供大家参考。具体如下:

这里介绍支持自动切换文字的导航菜单效果,实际上看上去并不像菜单,猛一看倒像是一个Select下拉框,两侧带有箭头控制按钮,点击左侧则向上切换菜单文字,点击右侧则切换到一个菜单项内容,也可自动切换,鼠标不点击的时候菜单会自动变化文字。

运行效果截图如下:

JS实现自动切换文字的导航效果代码

在线演示地址如下:

具体代码如下:

<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>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
农历与西历对照
Sep 06 Javascript
Span元素的width属性无效果原因及解决方案
Jan 15 Javascript
JQuery 自定义CircleAnimation,Animate方法学习笔记
Jul 10 Javascript
js使用递归解析xml
Dec 12 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
Nov 09 Javascript
js解决movebox移动问题
Mar 29 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
Aug 08 Javascript
详细谈谈AngularJS的子级作用域问题
Sep 05 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
Jan 10 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
Oct 24 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
Nov 04 Javascript
vue3种table表格选项个数的控制方法
Apr 14 Vue.js
javascript实现自动输出文本(打字特效)
Aug 27 #Javascript
jquery+php随机生成红包金额数量代码分享
Aug 27 #Javascript
javascript模拟C#格式化字符串
Aug 26 #Javascript
jQuery实现滚动切换的tab选项卡效果代码
Aug 26 #Javascript
基于jquery实现一个滚动的分步注册向导-附源码
Aug 26 #Javascript
jQuery带时间的日期控件代码分享
Aug 26 #Javascript
js仿苹果iwatch外观的计时器代码分享
Aug 26 #Javascript
You might like
国产动画《伍六七》原声大碟大卖,啊哈娱乐引领音乐赋能IP的新尝试
2020/03/08 国漫
十天学会php之第五天
2006/10/09 PHP
PHP 和 MySQL 基础教程(二)
2006/10/09 PHP
生成静态页面的PHP类
2006/11/25 PHP
php全角字符转换为半角函数
2014/02/07 PHP
php获取错误信息的方法
2015/07/17 PHP
php 数组字符串搜索array_search技巧
2016/07/05 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
jquery 的 $(&quot;#id&quot;).html() 无内容的解决方法
2010/06/07 Javascript
js中关于一个分号的崩溃示例
2013/11/11 Javascript
javascript跨域的4种方法和原理详解
2014/04/08 Javascript
把Node.js程序加入服务实现随机启动
2015/06/25 Javascript
js下将金额数字每三位一逗号分隔
2016/02/19 Javascript
JS实现的在线调色板实例(附demo源码下载)
2016/03/01 Javascript
jQuery+ajax+asp.net获取Json值的方法
2016/06/08 Javascript
初识简单却不失优雅的Vue.js
2016/09/12 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
2016/09/17 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
2017/07/19 Javascript
Vue2.0设置全局样式(less/sass和css)
2017/11/18 Javascript
微信小程序中使用自定义图标(阿里icon)的方法
2018/08/20 Javascript
详解JavaScript栈内存与堆内存
2019/04/04 Javascript
JS事件流与事件处理程序实例分析
2019/08/16 Javascript
vue-form表单验证是否为空值的实例详解
2019/10/29 Javascript
微信小程序 下拉刷新及上拉加载原理解析
2019/11/06 Javascript
如何利用JS将手机号中间四位变成*号
2020/09/29 Javascript
python脚本实现xls(xlsx)转成csv
2016/04/10 Python
Python各类图像库的图片读写方式总结(推荐)
2018/02/23 Python
用Python一键搭建Http服务器的方法
2018/06/01 Python
pyside+pyqt实现鼠标右键菜单功能
2020/12/08 Python
Django 实现xadmin后台菜单改为中文
2019/11/15 Python
Jupyter Notebook远程登录及密码设置操作
2020/04/10 Python
迪卡侬比利时官网:Decathlon比利时
2019/12/28 全球购物
颇特女士香港官网:NET-A-PORTER香港
2021/03/08 全球购物
个人工作总结范文2014
2014/11/07 职场文书
python关于集合的知识案例详解
2021/05/30 Python
Java练习之潜艇小游戏的实现
2022/03/16 Java/Android