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 函数式编程的原理
Oct 16 Javascript
Cookie 小记
Apr 01 Javascript
js判断undefined变量类型使用typeof
Jun 03 Javascript
js加减乘除丢失精度问题解决方法
May 16 Javascript
jQuery统计上传文件大小的方法
Jan 24 Javascript
jquery手风琴特效插件
Feb 04 Javascript
JS实现双击屏幕滚动效果代码
Oct 28 Javascript
解决给dom元素绑定click等事件无效问题的方法
Feb 17 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
May 02 Javascript
微信小程序多音频播放进度条问题
Aug 28 Javascript
sortable+element 实现表格行拖拽的方法示例
Jun 07 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
Oct 12 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实现使用优酷土豆视频地址获取swf播放器分享地址
2014/06/05 PHP
详解php设置session(过期、失效、有效期)
2015/11/12 PHP
php数组分页实现方法
2016/04/30 PHP
thinkPHP和onethink微信支付插件分享
2019/08/11 PHP
ThinkPHP5&amp;5.1实现验证码的生成、使用及点击刷新功能示例
2020/02/07 PHP
jquery插件jTimer(jquery定时器)使用方法
2013/12/23 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
2015/04/07 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
2015/08/17 Javascript
值得分享的bootstrap table实例
2016/09/22 Javascript
jQuery 判断元素整理汇总
2017/02/28 Javascript
深入理解node.js之path模块
2017/05/03 Javascript
docker中编译nodejs并使用nginx启动
2017/06/23 NodeJs
Vue ElementUI之Form表单验证遇到的问题
2017/08/21 Javascript
表格展示利器 Bootstrap Table实例代码
2017/09/06 Javascript
Vue 引入AMap高德地图的实现代码
2019/04/29 Javascript
vue中的 $slot 获取插槽的节点实例
2019/11/12 Javascript
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
[01:03]PWL开团时刻DAY6——别打我
2020/11/05 DOTA
python实现批量监控网站
2016/09/09 Python
24式加速你的Python(小结)
2019/06/13 Python
Pycharm使用之设置代码字体大小和颜色主题的教程
2019/07/12 Python
Django实现文件上传下载功能
2019/10/06 Python
简单介绍django提供的加密算法
2019/12/18 Python
Python如何在DataFrame增加数值
2020/02/14 Python
python语言是免费还是收费的?
2020/06/15 Python
Python爬虫过程解析之多线程获取小米应用商店数据
2020/11/14 Python
如何通过python检查文件是否被占用
2020/12/18 Python
python解包用法详解
2021/02/17 Python
Daisy London官网:英国最大的首饰集团IBB旗下
2019/02/28 全球购物
英国森林假期:Forest Holidays
2021/01/01 全球购物
行政人员岗位职责
2013/12/08 职场文书
穆斯林的葬礼读书笔记
2015/06/26 职场文书
Vue中foreach数组与js中遍历数组的写法说明
2021/06/05 Vue.js
浅析Python中的套接字编程
2021/06/22 Python
vue实现锚点定位功能
2021/06/29 Vue.js