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 相关文章推荐
关于 byval 与 byref 的区别分析总结
Oct 08 Javascript
JavaScript Event学习第四章 传统的事件注册模型
Feb 07 Javascript
理解Javascript_07_理解instanceof实现原理
Oct 15 Javascript
jquery对象和DOM对象的区别介绍
Aug 09 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
Jan 02 Javascript
jquery实现的仿天猫侧导航tab切换效果
Aug 24 Javascript
实例讲解避免javascript冲突的方法
Jan 03 Javascript
关于JS中的方法是否加括号的问题
Jul 27 Javascript
AngularJS入门教程之路由与多视图详解
Aug 19 Javascript
vue中 数字相加为字串转化为数值的例子
Nov 07 Javascript
Vue中keep-alive组件作用详解
Feb 04 Javascript
npm qs模块使用详解
Feb 07 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
smarty自定义函数htmlcheckboxes用法实例
2015/01/22 PHP
PHP中你应该知道的require()文件包含的正确用法
2015/06/12 PHP
PHP list() 将数组中的值赋给变量的简单实例
2016/06/13 PHP
php实用代码片段整理
2016/11/12 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
javascript 兼容所有浏览器的DOM扩展功能
2012/08/01 Javascript
JavaScript获取/更改文本框的值的实例代码
2013/08/02 Javascript
jquery自定义类似$.ajax()的方法实现代码
2013/08/13 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
2014/03/05 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
2014/04/23 Javascript
JavaScript设计模式之装饰者模式介绍
2014/12/28 Javascript
深入浅出ES6之let和const命令
2016/08/25 Javascript
再谈javascript注入 黑客必备!
2016/09/14 Javascript
浅谈vuex 闲置状态重置方案
2018/01/04 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
2019/08/29 Javascript
微信小程序自定义组件components(代码详解)
2019/10/21 Javascript
使用layui前端框架弹出form表单以及提交的示例
2019/10/25 Javascript
js实现滑动滑块验证登录
2020/07/24 Javascript
vue图片裁剪插件vue-cropper使用方法详解
2020/12/16 Vue.js
[56:56]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
举例讲解Python中装饰器的用法
2015/04/27 Python
python字典值排序并取出前n个key值的方法
2018/10/17 Python
对Pandas MultiIndex(多重索引)详解
2018/11/16 Python
对Python闭包与延迟绑定的方法详解
2019/01/07 Python
实现ECharts双Y轴左右刻度线一致的例子
2020/05/16 Python
css3高级选择器使用方法
2013/12/02 HTML / CSS
Lookfantastic挪威官网:英国知名美妆购物网站
2017/07/26 全球购物
台湾旅游网站:灿星旅游
2018/10/11 全球购物
类如何去实现接口
2013/12/19 面试题
what is the difference between ext2 and ext3
2015/08/25 面试题
信用社实习人员自我鉴定
2013/09/20 职场文书
作风大整顿心得体会
2014/09/10 职场文书
离婚协议书怎么写(范本参考)
2014/09/30 职场文书
孕妇病假条怎么写
2015/08/17 职场文书
大学文艺委员竞选稿
2015/11/19 职场文书
Redis 异步机制
2022/05/15 Redis