跳动的菜单

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>模仿as效果的导航菜单</title>
<style type="text/css">
<!--
a:link,a:visited    { text-decoration: none; color: #666666 }
a:hover            { text-decoration: underline }
#hor1 {
    position:absolute;
    left:320px;
    top:20px;
    width:220px;
    height:20px;
    z-index:1;
    background-color: #999900;
}
#hor2 {
    position:absolute;
    left:320px;
    top:40px;
    width:220px;
    height:20px;
    z-index:2;
    background-color: #FFCC00;
}
#hor3 {
    position:absolute;
    left:320px;
    top:60px;
    width:220px;
    height:20px;
    z-index:3;
    background-color: #99CC00;
}
#board1 {
    position:absolute;
    left:320px;
    top:40px;
    width:220px;
    height:120px;
    z-index:-100;
    background-color: #333333;
    visibility: hidden;
}
body,td,th {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    font-weight: bold;
}
body {
    background-color: #666666;
}
#board2 {
    position:absolute;
    left:320px;
    top:60px;
    width:220px;
    height:120px;
    z-index:-90;
    background-color: #333333;
    visibility: hidden;
}
#board3 {
    position:absolute;
    width:220px;
    height:120px;
    z-index:-80;
    left: 320px;
    top: 80px;
    background-color: #333333;
    visibility: hidden;
}
#hor4 {
    position:absolute;
    left:320px;
    top:80px;
    width:220px;
    height:20px;
    z-index:4;
    background-color: #99CCCC;
}
#board4 {
    position:absolute;
    left:320px;
    top:100px;
    width:220px;
    height:120px;
    z-index:-70;
    background-color: #333333;
    visibility: hidden;
}

-->
</style>
<script type="text/javascript">
lastNo=0
function re(menu_no){
if(lastNo!=menu_no){
cur=menu_no+1
lastNo=menu_no
rest()
}else{
cur=100
}
document.getElementById("board"+menu_no).style.visibility="visible"
}
function rest(){
for(i=1;i<=4;i++){
document.getElementById("hor"+i).style.top=20*i;
document.getElementById("board"+i).style.visibility="hidden"
}
menu_num=4;
 act=1
 height=120+20
 speed=0;
 posY=0;
}
function huke(){
if(act==1&&cur<100){
speed=(height-posY)*0.69+speed*0.6
posY+=speed
for(i=cur;i<=menu_num;i++){
document.getElementById("hor"+i).style.top=posY+(i-2)*20
}
if(Math.abs(height-posY)<0.5){
for(i=cur;i<=menu_num;i++){
document.getElementById("hor"+i).style.top=height+(i-2)*20
}
act=0
}
setTimeout("huke()",50)
}
}

</script>
</head>
<body>
<div id="hor1" οnclick="re(1);huke()">News</div>
<div id="hor2" οnclick="re(2);huke()">Populor</div>
<div id="hor3" οnclick="re(3);huke()">Sports</div>
<div id="hor4" οnclick="re(4);huke()">Woman</div>
<div id="board1">1.由AS而想起Javascript<br />2.用Jscript写ASP有没有先天性的不足？<br />3.没有了。</div>
<div id="board2">1.xhtml+css真的来了吗？<br />2.Flash取代传统网站<br />3.Flash何时才能连接数据库？</div>
<div id="board3">1.程序员与小姐的10个相同。<br />2.中国的程序员与中国的足球？</div>
<div id="board4">1.二十一世纪最缺的是什么?人才<br />
<a href="http://www.gamvan.com/" target="_blank">http://www.gamvan.com</a>
<a href="http://www.gamvan.com/" target="_blank">http://www.gamvan.com</a></div>
</body>
</html>

转载于:https://www.cnblogs.com/itecho/archive/2008/10/09/1307113.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/496658.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Python 爬虫框架 - PySpider

Python 爬虫框架 - PySpider

Python爬虫进阶四之PySpider的用法&#xff1a;http://cuiqingcai.com/2652.html 网络爬虫剖析&#xff0c;以Pyspider为例&#xff1a;http://python.jobbole.com/81109 Python爬虫利器六之PyQuery的用法&#xff1a;https://cuiqingcai.com/2636.html 爬虫框架pyspider个人总…
阅读更多...
AI技术加持，让协作机器人更安全

AI技术加持，让协作机器人更安全

来源&#xff1a;机器人创新生态丨公众号来自众家新创公司与实验室的碰撞侦测与追踪技术&#xff0c;将使得在人类与其他移动物体周边的协作机器人更安全。一个美国圣地亚哥大学&#xff08;University of San Diego&#xff09;的团队便开发了一种更快速的算法&#xff0c;能协…
阅读更多...
RSA签名算法

RSA签名算法

文章目录前言一、RSA是什么&#xff1f;前言 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、RSA是什么&#xff1f; RSA数字签名算法的过程为&#xff1a;A对明文m用解密变换作: (公钥用来加密&#xff0c;私钥用来解密&#xff0c;数字签名是用…
阅读更多...
捕获异常_Recover捕获异常

捕获异常_Recover捕获异常

“ 本文来源于《The Go Programming Language》”5.10. Recover捕获异常通常来说&#xff0c;不应该对panic异常做任何处理&#xff0c;但有时&#xff0c;也许我们可以从异常中恢复&#xff0c;至少我们可以在程序崩溃前&#xff0c;做一些操作。举个例子&#xff0c;当web服务…
阅读更多...
仿msn弹出窗口

仿msn弹出窗口

msnMessage.js文件代码&#xff1a; Code1 /** 2 ** 3 ** 类名&#xff1a;msnMessage 4 ** 功能&#xff1a;提供类似MSN消息框 5 ** 示例&#xff1a; 6 --------------------------------------------------------------------------------…
阅读更多...
ECC签名算法

ECC签名算法

文章目录前言一、ECC是什么&#xff1f;二、go语言实现前言 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、ECC是什么&#xff1f; ECC全称为“Ellipse Curve Ctyptography”&#xff0c;是一种基于椭圆曲线数学的公开密钥加密算法。椭圆曲线在密…
阅读更多...
CPU诞生记｜CPU制造全过程详解

CPU诞生记｜CPU制造全过程详解

来源&#xff1a;电子产品世界CPU(Centralprocessingunit)是现代计算机的核心部件&#xff0c;又称为“微处理器”。对于PC而言&#xff0c;CPU的规格与频率常常被用来作为衡量一台电脑性能强弱重要指标。Intelx86架构已经经历了二十多个年头&#xff0c;而x86架构的CPU对我们大…
阅读更多...
二维数组 类型_Java第六章 | 二维数组的创建及使用、数组排序算法

二维数组 类型_Java第六章 | 二维数组的创建及使用、数组排序算法

二维数组的创建及使用1、二维数组的创建2、二维数组初始化3、使用二维数组二维数组的创建声明二维数组的方法有两种&#xff0c;语法如下所示&#xff1a;数组元素类型 数组名字[ ][ ];数组元素类型[ ][ ] 数组名字;数组元素类型&#xff1a;决定了数组的数据类型&#xff0c;它…
阅读更多...
Semaphore及其用法

Semaphore及其用法

1、Semaphore 是什么 Semaphore 通常我们叫它信号量&#xff0c; 可以用来控制同时访问特定资源的线程数量&#xff0c;通过协调各个线程&#xff0c;以保证合理的使用资源。 比如&#xff1a;停车场入口立着的那个显示屏&#xff0c;每有一辆车进入停车场显示屏就会显示剩余…
阅读更多...
使用代理时服务变量的变化

使用代理时服务变量的变化

一、没有使用代理服务器的情况&#xff1a; REMOTE_ADDR 您的 IP HTTP_VIA 没数值或不显示 HTTP_X_FORWARDED_FOR 没数值或不显示 二、使用透明代理服务器的情况&#xff1a;Transparent Proxies REMOTE_ADDR 最后一个代理服务器 IP HTTP_VIA 代理服务器 …
阅读更多...
SM2算法

SM2算法

文章目录前言一、SM2是什么&#xff1f;二、go语言实现前言 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、SM2是什么&#xff1f; SM2是国家密码管理局于2010年12月17日发布的椭圆曲线公钥密码算法。 SM2算法和RSA算法都是公钥密码算法&#xf…
阅读更多...
rocketmq 消息 自定义_跟我学RocketMQ[1-4]之消息消费及支持spring

rocketmq 消息 自定义_跟我学RocketMQ[1-4]之消息消费及支持spring

博客地址:朝闻道​www.wuwenliang.net本文我将继续讲解如何使用DefaultMQPushConsumer对RocketMQ中的消息进行消费&#xff0c;同时在文章的第二部分将继续带领读者朋友对DefaultMQPushConsumer进行薄封装&#xff0c;让我们在Spring中更容易对消息进行消费。DefaultMQPushCons…
阅读更多...
sklearn 逻辑回归Demo

sklearn 逻辑回归Demo

逻辑回归案例 假设表示 基于上述情况&#xff0c;要使分类器的输出在[0,1]之间&#xff0c;可以采用假设表示的方法。 设 h θ ( x ) g ( θ T x ) h_θ (x)g(θ^T x) hθ​(x)g(θTx)&#xff0c; 其中 g ( z ) 1 ( 1 e − z ) g(z)\frac{1}{(1e^{−z} )} g(z)(1e−z)1​…
阅读更多...
URL原理、URL编码、URL特殊字符、输入URL到页面显示

URL原理、URL编码、URL特殊字符、输入URL到页面显示

​From&#xff1a;http://blog.csdn.net/zmx729618/article/details/51381655 From&#xff1a;http://www.cnblogs.com/coco1s/p/5038412.html HTML URL 编码参考手册&#xff1a;https://www.w3cschool.cn/htmltags/html-urlencode.html http://www.w3school.com.cn/t…
阅读更多...
记忆模糊、记忆泛化的关键分子开关被发现

记忆模糊、记忆泛化的关键分子开关被发现

来源&#xff1a;brainnews2018年3月12日&#xff0c;Nature Medicine杂志在线刊登了麻省总医院Amar Sahay研究组的最新重要工作&#xff0c;他们发现了一种细胞骨架蛋白Actin-binding LIM protein 3 (ABLIM3)&#xff0c;降低该蛋白的表达水平可以增强海马齿状回细胞&#xff…
阅读更多...
240多个jQuery插件 (转)

240多个jQuery插件 (转)

概述 jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是—写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k) &#xff0c;这是其它的 js 库所不及的&#xff0c;它兼容 CSS3&#xff0c;还兼容各种浏览器&#xff08;IE 6.0, FF 1.5, Safari 2.…
阅读更多...
Exchanger及其用法

Exchanger及其用法

01 Exchanger 作用 使两个线程之间进行数据传递。&#xff08;对是两个之间而不是三个或者更多个线程之间&#xff09; 02 常用方法 exchange&#xff08;&#xff09; 阻塞当前线程并等待其他线程来取得数据&#xff0c;若没有其他线程来取数据则一直等待。 exchange&…
阅读更多...
SM3算法

SM3算法

文章目录前言一、SM3是什么&#xff1f;二、go语言实现前言 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、SM3是什么&#xff1f; SM3是中华人民共和国政府采用的一种密码散列函数标准&#xff0c;由国家密码管理局于2010年12月17日发布。相关标…
阅读更多...
2 如何设置窗口title_如何设置华为4G路由2的WiFi黑白名单【设置方法】

2 如何设置窗口title_如何设置华为4G路由2的WiFi黑白名单【设置方法】

不想让自家的Wi-Fi被蹭网&#xff0c;除了将Wi-Fi隐藏起来&#xff0c;您还可以设置Wi-Fi黑白名单。如果您发现有人蹭网了&#xff0c;可以将蹭网设备直接加入黑名单&#xff0c;这样就可以禁止这个设备再连接到您的Wi-Fi。如果您将家人、朋友的设备加入了白名单&#xff0c;那…
阅读更多...
复选框怎么点td选中_jQuery点击tr实现checkbox选中的方法

复选框怎么点td选中_jQuery点击tr实现checkbox选中的方法

标题描述的有点不贴切&#xff0c;但希望大家能够明白&#xff0c;为了更形像的表达&#xff0c;我特意录制了一张GIF动画图片。我不知道实际开发中有没有用到这种效果&#xff0c;但我个人认为&#xff0c;这种方式更人性化&#xff0c;因为只要点到一行&#xff0c;就可以使C…
阅读更多...
最新文章

Copyright @ 2022~2023