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 相关文章推荐
简明json介绍
Sep 28 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
Jun 27 Javascript
Jquery Validate 正则表达式实用验证代码大全
Aug 23 Javascript
详解JavaScript中|单竖杠运算符的使用方法
May 23 Javascript
JavaScript中数组的22种方法必学(推荐)
Jul 20 Javascript
JS中this上下文对象使用方式
Oct 09 Javascript
js遍历json的key和value的实例
Jan 22 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
Aug 30 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
Jan 03 Javascript
Vue2.0子同级组件之间数据交互方法
Feb 28 Javascript
利用jqgrid实现上移下移单元格功能
Nov 07 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
Apr 11 Javascript
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
关于Appserv无法打开localhost问题的解决方法
2009/10/16 PHP
zf框架的数据库追踪器使用示例
2014/03/13 PHP
完整删除ecshop中获取店铺信息的API
2014/12/24 PHP
Windows下Apache + PHP SESSION丢失的解决过程全纪录
2015/04/07 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
基于jquery的动态创建表格的插件
2011/04/05 Javascript
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
2012/01/15 Javascript
javascript中的delete使用详解
2013/04/11 Javascript
Javascript添加监听与删除监听用法详解
2014/12/19 Javascript
JavaScript中的关联数组问题
2015/03/04 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
2016/04/29 Javascript
详解JavaScript的内置对象
2016/12/07 Javascript
websocket+node.js实现实时聊天系统问题咨询
2017/05/17 Javascript
ES6新增的math,Number方法
2017/08/06 Javascript
详解VueRouter进阶之导航钩子和路由元信息
2017/09/13 Javascript
浅谈Webpack 持久化缓存实践
2018/03/22 Javascript
js如何找出字符串中的最长回文串
2018/06/04 Javascript
利用JS实现一个同Excel表现的智能填充算法
2018/08/13 Javascript
微信小程序实现Swiper轮播图效果
2019/11/22 Javascript
[02:11]2016国际邀请赛中国区预选赛最美TA采访现场玩家
2016/06/28 DOTA
Python 实现数据库(SQL)更新脚本的生成方法
2017/07/09 Python
python 2.7.13 安装配置方法图文教程
2018/09/18 Python
pandas的相关系数与协方差实例
2019/12/27 Python
python GUI库图形界面开发之PyQt5选项卡控件QTabWidget详细使用方法与实例
2020/03/01 Python
tensorflow安装成功import tensorflow 出现问题
2020/04/16 Python
Python列表去重复项的N种方法(实例代码)
2020/05/12 Python
Python通过len函数返回对象长度
2020/10/22 Python
Canvas与图片压缩的示例代码
2017/11/28 HTML / CSS
Keds加拿大官网:购买帆布运动鞋和皮鞋
2019/09/26 全球购物
给儿子的表扬信
2014/01/15 职场文书
实习会计求职自荐信范文
2014/03/10 职场文书
优秀团员事迹材料2000字
2014/08/20 职场文书
大学生党员个人总结
2015/02/13 职场文书
安全责任协议书范本
2016/03/23 职场文书
浅谈Python项目的服务器部署
2021/04/25 Python
带你了解CSS基础知识,样式
2021/07/21 HTML / CSS