点击弹出弹性下拉菜单效果

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网,站长必备js特效及广告代码。大量高质量js特效,提供高质量广告代码下载,尽在站长特效网" />
<title>弹性十足导航菜单,sky整理收集</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;
}//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
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)
}
}//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
</script>
</head>
<body>
<a href="<#ZC_BLOG_HOST#>">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net,站长js特效。<hr>
<!--欢迎来到站长特效网,我们网站收集大量高质量js特效,提供许多广告代码下载,网址:www.zzjs.net,[email protected],用.net打造靓站-->
<div id="hor1" onclick="re(1);huke()">站长特效网</div>
<div id="hor2" onclick="re(2);huke()">如何使用网页特效?</div>
<div id="hor3" onclick="re(3);huke()">Sports</div>
<div id="hor4" onclick="re(4);huke()">Woman</div>
<div id="board1">欢迎来到站长特效网,专注于网页特效及广告代码,希望你喜欢。我们的<a href="http://zzjs.net/?cat=2">网址</a>是:www.zzjs.net</div>
<div id="board2"> 一般在你想添加特效的地方直接粘贴特效代码即可,有些特殊的代码还需要在别的地方添加其他代码。在本站下载的特效代码,都有详细说明,按说明使用即可。</div>
<div id="board3"> 1.程序员与小姐的10个相同。
2.中国的程序员与中国的足球?</div>
<div id="board4"> 1.二十一世纪最缺的是什么?人才

</div>
</body>
</html>

点击弹出弹性下拉菜单效果,布布扣,bubuko.com

时间: 2024-12-09 17:58:46

点击弹出弹性下拉菜单效果的相关文章

纯CSS实现的二级下拉菜单效果代码实例

纯CSS实现的二级下拉菜单效果代码实例:二级下拉是最为常用的效果之一,当前的此效果一般哟结合js实现,本章节介绍一个使用纯CSS实现的二级下拉菜单效果,希望能够给需要的朋友带来一定的帮助,不过此代码也有一点浏览器兼容问题,那就是在IE6中不兼容.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" conten

三种方式实现下拉菜单效果

使用3种方式实现下拉菜单效果: html/css .js方法实现下拉菜单显示隐藏.jquery方法实现下拉菜单显示隐藏 先看效果图 第一种:html/css方式实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>下拉菜单的实现</title> <style type="text/css"> *{margin

下拉菜单效果

之前为大家介绍过有关HTML中的一些比较炫的效果,本篇为大家介绍一些,大家在网站中经常可以见到的一种下拉菜单效果,这种菜单效果一般分为两层,当我们的鼠标经过一级菜单时,隐藏的二级菜单就会显示出来,这样即保证了页面的美观,同时又不会使页面的模块减少,甚至可以增加模块数目. 一.废话不多说,下面我们来通过HTML+CSS为大家实现一下上面的效果,首先请大家先欣赏一下效果图: 1.界面布局代码: <body> <div id="var"> <ul> <

iOS下拉菜单效果实现

原文链接: iOS下拉菜单效果实现 简书主页:http://www.jianshu.com/users/37f2920f6848 Github主页:https://github.com/MajorLMJ iOS开发者公会-技术1群 QQ群号:87440292 iOS开发者公会-技术2群 QQ群号:232702419 iOS开发者公会-议事区   QQ群号:413102158

1.鼠标点击换样式+2.下拉菜单缓慢显示/隐藏样式效果

1.鼠标点击换样式 <style type="text/css"> .aa{ width:90px; height:60px;text-align:center; vertical-align:middle; line-height:60px; margin-right:10px; font-size:19px; float:left; background-color:#06F} </style> <body> <div style=&quo

JS实现下拉菜单效果

1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>下拉菜单</title> 6 <style type="text/css"> 7 body,ul,li{ 8 margin:0; 9 padding:0; 10 font-size:13px; 11 } 1

用JS控制下拉菜单效果

今天,突然想复习下之前学习做导航菜单的一些知识.之后觉得下拉菜单非常好玩儿,于是自己试着用JS调出了效果.网上有众多方法,但是感觉不是很对我的胃口,我喜欢HTML/CSS/JavaScript分离着写,用户体验重要,码农审美也很重要啊,O(∩_∩)O~ 在做下拉菜单的过程中,有以下心得: 1.this是个好东西,比如在鼠标事件中,它代表此时的鼠标事件对象本身,免去去用其他方式代表改对象的麻烦: 2.getElementsByTagName或者getElementById方法获得的是一个数组,需要

div模拟select下拉菜单效果

有些时候select下拉菜单直接用css调整样式,可能会有兼容性的问题,尤其是右侧的下拉三角,很难用css控制,那怎么办呢?可以采用div模拟select下拉菜单的效果.先直接上代码了: HTML的结构如下: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>div模拟下拉菜单特效</title> <style type="t

iOS 微信右上角下拉菜单效果之CMPopTipView,各种角度各种位置

早之前在项目中写了一个类似微信右上角下拉的菜单封装,但是是写死的,当时根本 没有考虑到去其他地方弹出这个东西,虽然看起来弹个窗出来很简单,但是你位子不确 定之后弹出来是有点麻烦的,反正我总是觉得,我们能想到的,老外早就想到了,多给自己弄点工具库,多看看源码,指不定哪天我也搞出一个库来,世界 上有项目经理这种东西,那就没有什么需求是不可能的,各位手头上多准备点工具还是非常有必要的. 先看图: 需求是这样的,点击分类的按钮,竟然不Push到另一个VC去,非要弹个窗出来 但是像我这样的读书人这么有素质