动感导航菜单

最新推荐文章于 2021-06-10 17:04:29 发布
最新推荐文章于 2021-06-10 17:04:29 发布
阅读量530 收藏 1
点赞数
分类专栏： JSP JavaScript 文章标签： border filter function javascript div menu
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/innolux_08/article/details/4552563
版权

<html>
<head>
<title>动感菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="JavaScript">
var currTimerlinePoint = 0;
var totalTimerlineFrames = 2;
var timerlineTimer;
var leftLine = 50;
var timerIn;
var timerOut;
var timerlineArray = new Array();
timerlineArray[0]='';
timerlineArray[1]='menuItemOut()';
function runTimerline()
{
//if (totalTimerlineFrames > currTimerlinePoint)
//  {
//  eval( timerlineArray[currTimerlinePoint]);
//  currTimerlinePoint ++;
//  }
//else {currTimerlinePoint = 0; clearTimeout(window.timerlineTimer); return false;}
//window.timerlineTimer = setTimeout('runTimerline()',1000);
window.timerlineTimer = setTimeout('menuItemOut()',500);
}
function stopTimerline()
{
clearTimeout(window.timerlineTimer);
//currTimerlinePoint = 0;
}
 
function menuItemIn()
{
    if( leftLine != 150)
     {
     item11.style.pixelLeft += 20; item11.filters.alpha.opacity += 20;
     item12.style.pixelLeft -= 20; item12.filters.alpha.opacity += 20;
     item13.style.pixelLeft += 20; item13.filters.alpha.opacity += 20;
     item14.style.pixelLeft -= 20; item14.filters.alpha.opacity += 20;
     leftLine += 20;
  }
  else
     {
  clearTimeout(window.timerIn);
     return false;
  }
  timerIn=window.setTimeout('menuItemIn()',1);
}
function menuItemOut()
{
   clearTimeout(window.timerIn);
  if (leftLine != 50)
     {
      item11.style.pixelLeft -= 20; item11.filters.alpha.opacity -= 20;
      item12.style.pixelLeft += 20; item12.filters.alpha.opacity -= 20;
      item13.style.pixelLeft -= 20; item13.filters.alpha.opacity -= 20;
      item14.style.pixelLeft += 20; item14.filters.alpha.opacity -= 20;
      leftLine -= 20;
   }
   else
     {
  clearTimeout(window.timerOut);
     return false;
     }
  timerOut=window.setTimeout("menuItemOut()",1);
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div style="position:absolute; left:0px; top:-30px"><div align=center id="menu01" style="position:absolute; left:150px; top:33px; width:100px; height:19px; z-index:1; background-color: #006699; layer-background-color: #000099; border: 1px none #000000;padding-top:3;cursor:hand;font-size:9pt" οnmοuseοver='stopTimerline();menuItemIn()' οnmοuseοut='runTimerline()'><font color=white>主菜单</div>
<div align=center id="item11" style="position:absolute; left:50px; top:55px; width:99px; height:19px; z-index:2; background-color: #0099CC; layer-background-color: #0099CC; border: 1px none #000000; filter:alpha(opacity=0);padding-top:4;cursor:hand;font-size:9pt"
οnmοuseοver="this.style.backgroundColor= '#006699';stopTimerline()"
οnmοuseοut="this.style.backgroundColor= '#0099cc';runTimerline()"><a href="http://www.bhcode.net/">BHCODE主站</a></div>
<div align=center id="item12" style="position:absolute; left:250px; top:77px; width:99px; height:19px; z-index:3; background-color: #0099CC; layer-background-color: #0099CC; border: 1px none #000000; filter:alpha(opacity=0);padding-top:3;cursor:hand;font-size:9pt"
οnmοuseοver="this.style.backgroundColor= '#006699';stopTimerline()"
οnmοuseοut="this.style.backgroundColor= '#0099cc';runTimerline()"><a href="http://club.bhcode.net/">BHCODE社区</a></div>
<div align=center id="item13" style="position:absolute; left:50px; top:99px; width:99px; height:19px; z-index:4; background-color: #0099CC; layer-background-color: #0099CC; border: 1px none #000000; filter:alpha(opacity=0);padding-top:3;cursor:hand;font-size:9pt"
οnmοuseοver="this.style.backgroundColor= '#006699';stopTimerline()"
οnmοuseοut="this.style.backgroundColor= '#0099cc';runTimerline()"><a href="http://sucai.bhcode.net/">BHCODE素材网</a></div>
<div align=center id="item14" style="position:absolute; left:250px; top:121px; width:99px; height:19px; z-index:5; background-color: #0099CC; layer-background-color: #0099CC; border: 1px none #000000; filter:alpha(opacity=0);padding-top:3;cursor:hand;font-size:9pt"
οnmοuseοver="this.style.backgroundColor= '#006699';stopTimerline()"
οnmοuseοut="this.style.backgroundColor= '#0099cc';runTimerline()"><a href="http://js.bhcode.net/">BHCODE特效网</a></div>
</body>
</html>

MJunnnn
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VB.NET 自制动感菜单
10-04
VB.NET 自制菜单的实例程序，免费体验！！！！
jQuery 动感菜单实例
12-06
jQuery 动感菜单，类似苹果机风格的图标，以前源码爱好者收集过几个，鼠标放上后会有一连串的放大，比如把鼠标放到中间的图标上，该图标会立即变大起来，紧挨着的图标也会有幅度不大的放大，好像是链式反应一样，动感十足，音乐站、娱乐站用起来相当不错。
使用css 实现动感菜单
霍霍的博客
08-01 179
html <nav> <ul> <li><span>1</span></li> <li><span>2</span></li> <li><span>3</span></li> <li><span>4</span></li> ..
玩转动感滑动透明菜单(一)
nba23的专栏
08-11 1357
玩转动感滑动透明菜单(一) 玩转动感滑动透明菜单(一)：(Make By CSDN href="mailto:[email protected]">nba23   8/6/2003 )                      onmouseover="swapImage(button1, preloaded[1][1].src)"             onmouseout="s
动感导航菜单效果
02-28 84
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=...
无图片炫酷动感导航菜单
gjpdeyx的专栏
06-23 496
导航菜单-漂亮的炫酷动感导航菜单jOuery动态下滑菜单<br />完整版（背景图）示例HomeHTML/CSSJavaScriptResourcesTutorialsAbout<br />简化版（无图片）示例HomeHTML/CSSJavaScriptResourcesTutorialsAbout
html5圆形导航菜单,圆滑细腻，那些使用圆形导航菜单的漂亮网页设计
weixin_39606137的博客
06-07 734
圆滑细腻，那些使用圆形导航菜单的漂亮网页设计8月 27, 2015评论 (2)Sponsor不同类型的网站设计重点都不一样，比如信息、新闻类网站，内容比设计更重要，而且品牌、企业网站则更注重形象，为了更吸引用户，企业站可以设计有特色一点，把视觉效果强化，这样更容易吸引眼球，so… 设计师们应该经常来设计达人网查看一些灵感文章，会收获不少哦！今天为大家分享20个圆滑细腻并使用圆形导航菜单的漂亮网页设...
来自X-Menu 动感导航菜单代码（JS实现）
weixin_33779515的博客
04-13 203
代码简介： X-Menu 动感导航菜单，效果很好。像FLASH动画一样，有兴趣的朋友好好研究一下。 代码内容： <html> <head> <meta http-equiv="Content-Language" content="zh-cn"> <title>来自X-Menu 动感导航菜单代码（JS实现）_网页代码站(www.webd...
html弧形子菜单,纯CSS排列呈弧形布局的导航菜单
weixin_39633976的博客
06-10 890
弧形排列的可折叠二级导航* {margin: 0; padding: 0;}li {list-style: none;}a:link, a:visited {text-decoration: none;}a:hover, a:active {text-decoration: underline;}body {font: 12px/1.2 'Microsoft YaHei', Verdana, Ar...
一个不错的动感导航菜单
10-30
一个不错的动感导航菜单
Apple网站风格的动感导航菜单
12-16
Apple网站风格的动感导航菜单
jquery模拟flash动画型动感导航菜单
06-05
竖向动感滑动
jQuery动感导航菜单,图标 文字.rar
07-10
jQuery动感导航菜单,图标 文字，类似苹果网站的风格，鼠标放上去有炫丽效果，特别是鼠标依次滑过各个菜单项的时候，那时候确实比较酷的，苹果网站用了好几年的菜单了。
Jquery模仿flsh效果的动感3层导航菜单
aizhen8632的博客
06-25 44
查看效果 下载地址 jQuery动感菜单，可下拉展开为三级，甚至更多，黑色风格，你不认为很酷么？特别是在主导航菜单上的鼠标滑动效果，很炫，很喜欢，只可惜演示截图看不出动态效果，自己下载测试吧。 前台部分代码 代码 <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://w...
JS消息提示框
innolux_08的专栏
09-26 4910
类MSN提示的页面效果window.onload = viewMsg;                     //加载页面时，即刻获取短消息window.onresize = resizeDiv;                //根据窗体高度和宽度，改变短消息提示框的高度和宽度window.onerror = function(){}               //出现错误时，不做任何处理v
密码修改常用代码
innolux_08的专栏
08-31 3356
%@page contentType="text/html;charset=GBK"%>%@page import="java.sql.*"%>%@page import="java.util.*"%>  function CheckInput()  {    if(myform.Username.value=="")    {      alert("用户名输入不能为空！")      my
JS无限级树形菜单
innolux_08的专栏
09-14 1024
无限级可刷新Js树型菜单function Node(id, pid, name, url, title, target, icon, iconOpen, open) {this.id = id;this.pid = pid;this.name = name;this.url = url;this.title = title;this.target = target;
动感超人 自定义指令
最新发布
07-30
动感超人 自定义指令是一个自定义的指令，可以在AngularJS中使用。你可以使用 .directive 函数来创建自定义指令。要调用动感超人自定义指令，HTML 元素上需要添加动感超人指令名。使用驼峰法来命名一个指令，例如...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值