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 相关文章推荐
容易被忽略的JS脚本特性
Sep 13 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
Nov 22 Javascript
初识SmartJS - AOP三剑客
Jun 08 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
Apr 07 Javascript
干货分享:让你分分钟学会javascript闭包
Dec 25 Javascript
jQuery获取radio选中项的值实例
Jun 18 Javascript
浅谈js数据类型判断与数组判断
Aug 29 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
Aug 25 Javascript
webpack4 升级迁移的实现
Sep 12 Javascript
微信小程序实现授权登录
May 15 Javascript
JS实现页面数据懒加载
Feb 13 Javascript
如何构建一个Vue插件并生成npm包
Oct 26 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
咖啡豆的最常见发酵处理方法,详细了解一下
2021/03/03 冲泡冲煮
php解析html类库simple_html_dom(详细介绍)
2013/07/05 PHP
PHP对象相互引用的内存溢出实例分析
2014/08/28 PHP
cakephp打印sql语句的方法
2015/02/13 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
JavaScript 入门基础知识 想学习js的朋友可以参考下
2009/12/26 Javascript
jQuery当鼠标悬停时放大图片的效果实例
2013/07/03 Javascript
js控制鼠标事件移动及移出效果显示
2014/10/19 Javascript
基于原生js淡入淡出函数封装(兼容IE)
2016/10/20 Javascript
Vue.js系列之项目结构说明(2)
2017/01/03 Javascript
JavaScript实现的select点菜功能示例
2017/01/16 Javascript
浅谈Angular4实现热加载开发旅程
2017/09/08 Javascript
vue.js 实现点击按钮动态添加li的方法
2018/09/07 Javascript
Koa日志中间件封装开发详解
2019/03/09 Javascript
javascript中的数据类型检测方法详解
2019/08/07 Javascript
Node.js系列之发起get/post请求(2)
2019/08/30 Javascript
Vuejs中的watch实例详解(监听者)
2020/01/05 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
2020/05/25 Javascript
Jquery使用each函数实现遍历及数组处理
2020/07/14 jQuery
解决vue安装less报错Failed to compile with 1 errors的问题
2020/10/22 Javascript
[00:43]魔廷新尊——痛苦女王至宝捆绑包
2020/06/12 DOTA
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
Python中使用摄像头实现简单的延时摄影技术
2015/03/27 Python
Python字符串特性及常用字符串方法的简单笔记
2016/01/04 Python
Python对列表中的各项进行关联详解
2017/08/15 Python
python3:excel操作之读取数据并返回字典 + 写入的案例
2020/09/01 Python
HTML5+CSS3实现机器猫
2016/10/17 HTML / CSS
Tretorn美国官网:瑞典外套和鞋类品牌,抵御风雨
2018/07/19 全球购物
LN-CC美国:伦敦时尚生活的缩影
2019/02/19 全球购物
Madewell澳大利亚官方网站:美国休闲服饰品牌
2019/07/18 全球购物
Bath & Body Works阿联酋:在线购买沐浴和身体用品
2021/02/27 全球购物
大专生自荐信
2013/10/04 职场文书
光荣入党自我鉴定
2014/01/22 职场文书
英语自我评价范文
2014/01/24 职场文书
岳庙导游词
2015/02/04 职场文书
工程质量保证书
2015/05/09 职场文书