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

本文通过实例展示了使用JS创建自动切换文字的导航菜单效果,该效果具有类似Select下拉框的外观,具备上翻、下翻按钮,并且支持鼠标悬停时自动切换菜单文字。提供了在线演示和详细代码。
摘要由CSDN通过智能技术生成

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

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

运行效果截图如下:

7b8d2dcd5e45c54c8a232abb24799528.png

在线演示地址如下:

具体代码如下:

变化的文字导航条
变化的文字导航条

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

}

var msgs = new Array(

"欢迎光临小站",

"网易娱乐",

"搜狐门户",

"央视国际" );

var msg_url = new Array(

"http://www.sina.com",

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值