JS实现仿FLASH效果的竖排导航代码


Posted in Javascript onSeptember 15, 2015

本文实例讲述了JS实现仿FLASH效果的竖排导航代码。分享给大家供大家参考。具体如下:

这是一款JS+CSS实现的Flash效果的导航菜单,竖向排列,兼容性好,由JavaScript妙味课堂的朋友编写,欢迎测试.

运行效果截图如下:

JS实现仿FLASH效果的竖排导航代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿FLASH的竖排导航</title>
<style>
li { margin-bottom: 2px; list-style: none; background: url(images/bg.gif) repeat-x 0 1px; float: left; clear: left; cursor: pointer-; }
a { display: block; width: 120px; height: 25px; line-height: 25px; position: relative; padding: 0 6px; border: 1px solid #d6d6d6; text-decoration: none; font-size: 12px; color: #555; }
a:hover { font-weight: bold; border: 1px solid #b5b5b5; }
span { display: block; width: 9px; height: 8px; overflow: hidden; background: url(images/ico.gif) no-repeat; position: absolute; top: 8px; right: 10px; }
</style>
<script type="text/javascript">
window.onload=function ()
{
 var aA=document.getElementById('menu').getElementsByTagName('a');
 var i=0;
 for(i=0;i<aA.length;i++)
 {
  aA[i].iTime=null;
  aA[i].iSpeed=6;
  aA[i].onmouseover=function ()
  {
   goTime(this,30,1);
  }
  aA[i].onmouseout=function ()
  {
   goTime(this,6,-1);
  }
 }
}
function goTime(obj,iTarget,toggle)
{
 if(obj.iTime)
 {
  clearInterval(obj.iTime);
 }
 obj.iTime=setInterval(function()
 {
  if(obj.iSpeed===iTarget)
  {
   clearInterval(obj.iTime);
   obj.iTime=null;
  }
  else
  {
   obj.iSpeed+=2*toggle;
   obj.style.paddingLeft=obj.iSpeed+'px';
   obj.style.paddingRight=obj.iSpeed+'px';
  }
 },30);
}
</script>
</head>
<body>
<ul id="menu">
 <li><a href="#" target="_blank">首页<span></span></a></li>
 <li><a href="#" target="_blank">网页特效<span></span></a></li>
 <li><a href="#" target="_blank">CSS相关知识<span></span></a></li>
 <li><a href="#" target="_blank">关于我们<span></span></a></li>
 <li><a href="#" target="_blank">联系我们<span></span></a></li>
</ul>
</body>
</html>

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

Javascript 相关文章推荐
javascript动态添加样式(行内式/嵌入式/外链式等规则)
Jun 24 Javascript
Jquery easyui 下loaing效果示例代码
Aug 12 Javascript
JS实现程序暂停与继续功能代码解读
Oct 10 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
Mar 02 Javascript
js给selected添加options的方法
May 06 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
Dec 24 Javascript
详解本地Node.js服务器作为api服务器的解决办法
Feb 28 Javascript
详解Vue 实例中的生命周期钩子
Mar 21 Javascript
JS基于贪心算法解决背包问题示例
Nov 27 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
May 01 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
Mar 10 Javascript
JavaScript实现横版菜单栏
Mar 17 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
Sep 15 #Javascript
JS实现完全语义化的网页选项卡效果代码
Sep 15 #Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
Sep 14 #Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
Sep 14 #Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
Sep 14 #Javascript
js带缩略图的图片轮播效果代码分享
Sep 14 #Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
Sep 14 #Javascript
You might like
PHP中查询SQL Server或Sybase时TEXT字段被截断的解决方法
2009/03/10 PHP
php实现在服务器上创建目录的方法
2015/03/16 PHP
PHP版本的选择5.2.17 5.3.27 5.3.28 5.4 5.5兼容性问题分析
2016/04/04 PHP
php基于mcrypt_encrypt和mcrypt_decrypt实现字符串加密解密的方法
2016/07/12 PHP
Yii遍历行下每列数据的方法
2016/10/17 PHP
php监测数据是否成功插入到Mysql数据库的方法
2016/11/25 PHP
wordpress网站转移到本地运行测试的方法
2017/03/15 PHP
使用PHP反射机制来构造&quot;CREATE TABLE&quot;的sql语句
2019/03/21 PHP
ASP中用Join和Array,可以加快字符连接速度的代码
2007/08/22 Javascript
关于文本框的一些限制控制总结~~
2010/04/15 Javascript
使用jquery实现IE下按backspace相当于返回操作
2014/03/18 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
分享12个非常实用的JavaScript小技巧
2016/05/11 Javascript
AngularJs Scope详解及示例代码
2016/09/01 Javascript
利用Node.js+Koa框架实现前后端交互的方法
2017/02/27 Javascript
vue开发移动端底部导航条功能
2020/04/08 Javascript
Vue切换Tab动态渲染组件的操作
2020/09/21 Javascript
python高手之路python处理excel文件(方法汇总)
2016/01/07 Python
查看python安装路径及pip安装的包列表及路径
2019/04/03 Python
Python autoescape标签用法解析
2020/01/17 Python
动态设置django的model field的默认值操作步骤
2020/03/30 Python
keras自动编码器实现系列之卷积自动编码器操作
2020/07/03 Python
Selenium获取登录Cookies并添加Cookies自动登录的方法
2020/12/04 Python
python在协程中增加任务实例操作
2021/02/28 Python
CSS超出文本指定宽度用省略号代替和文本不换行
2016/05/05 HTML / CSS
使用CSS3的ruby-position固定注音位置的用法示例
2016/07/05 HTML / CSS
英国高档时尚男装购物网站:MR PORTER
2016/08/09 全球购物
欧舒丹比利时官网:L’OCCITANE比利时
2017/04/25 全球购物
求职信模板怎么做
2014/01/26 职场文书
省级青年文明号申报材料
2014/05/23 职场文书
2015年重阳节活动总结
2015/03/24 职场文书
红色经典电影观后感
2015/06/18 职场文书
红白喜事主持词
2015/07/06 职场文书
2016年小学生迎国庆广播稿
2015/12/18 职场文书
Nginx工作原理和优化总结。
2021/04/02 Servers
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python