js 單擊式的下拉菜單效果實(shí)例
更新時(shí)間：2013年08月13日 15:24:29 作者：
這篇文章介紹了js 單擊式的下拉菜單效果實(shí)例，有需要的朋友可以參考一下
復(fù)制代碼 代碼如下:
<!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=gb2312" />
<title>js 單擊式的下拉菜單效果</title>
<style>
.div1 { width: 120px; height: 20px; line-height:20px; text-align:center; }
.div2 {width: 120px; position:absolute; left:0; top:10px;visibility:hidden; }
.div2 a{ display:block;}
</style>
</head>
<body>
<script language="JavaScript">
var zindex=100
function dropit2(whichone){
if (window.themenu&&themenu.id!=whichone.id)
themenu.style.visibility="hidden"
themenu=whichone
if (document.all){
themenu.style.left=document.body.scrollLeft+event.clientX-event.offsetX
themenu.style.top=document.body.scrollTop+event.clientY-event.offsetY+18
if (themenu.style.visibility=="hidden"){
themenu.style.visibility="visible"
themenu.style.zIndex=zindex++}
else{
hidemenu()}}}
function dropit(e,whichone){
if (window.themenu&&themenu.id!=eval(whichone).id)
themenu.visibility="hide"
themenu=eval(whichone)
if (themenu.visibility=="hide")
themenu.visibility="show"
else
themenu.visibility="hide"
themenu.zIndex++
themenu.left=e.pageX-e.layerX
themenu.top=e.pageY-e.layerY+19
return false}
function hidemenu(whichone){
if (window.themenu)
themenu.style.visibility="hidden"}
function hidemenu2(){
themenu.visibility="hide"}
if (document.all)
document.onclick=hidemenu
</script>
<span class="div1" onClick="dropit2(dropmenu);event.cancelBubble=true;return false"> <a href="###" onClick="if(document.layers) return dropit(event, 'document.dropmenu')">[點(diǎn)擊顯示菜單]</a> </span>
<div class="div2" id="dropmenu">
<a href="http://www.dhdzp.com">腳本之家</a>
<a href="#">個(gè)性名字網(wǎng)</a>
<a href="#">個(gè)性名字網(wǎng)</a>
</div>
</body>
</html> </td>
</tr>
</table>
您可能感興趣的文章:
- JS打字效果的動(dòng)態(tài)菜單代碼分享
- Javascript實(shí)現(xiàn)動(dòng)態(tài)菜單添加的實(shí)例代碼
- JavaScript 下拉菜單實(shí)現(xiàn)代碼
- 一個(gè)日期下拉菜單的js實(shí)現(xiàn)代碼
- Js點(diǎn)擊彈出下拉菜單效果實(shí)例
- JavaScript多級(jí)下拉菜單代碼(簡單實(shí)用)
- 下拉菜單點(diǎn)擊實(shí)現(xiàn)連接跳轉(zhuǎn)功能的js代碼
- JavaScript結(jié)合PHP實(shí)現(xiàn)網(wǎng)頁制作中雙下拉菜單的動(dòng)態(tài)實(shí)現(xiàn)
相關(guān)文章
這篇文章主要介紹了JavaScript動(dòng)畫：offset和勻速動(dòng)畫詳解(含輪播圖的實(shí)現(xiàn))，并把實(shí)現(xiàn)代碼做了分享，有興趣的朋友參考下。2018-02-02
javascript中可以通過四個(gè)屬性獲得元素的偏移量，offsetHeight、offsetWidth、offsetLeft、offsetTop，下面為大家解釋下各屬性的含義2014-06-06
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)單例模式,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
js中回調(diào)函數(shù)的學(xué)習(xí)筆記
這篇文章主要介紹了js中回調(diào)函數(shù)的相關(guān)知識(shí),需要的朋友可以參考下2014-07-07
javascript canvas封裝動(dòng)態(tài)時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了javascript canvas封裝動(dòng)態(tài)時(shí)鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
js點(diǎn)擊出現(xiàn)懸浮窗效果不使用JQuery插件
JQuery有很多這樣的插件，但本文的這個(gè)是跟著自己的想法寫的，也不知道他人是如何實(shí)現(xiàn)的，感興趣的朋友可以了解下
2014-01-01 
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)網(wǎng)頁圖片輪換播放，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09 
今天通過一個(gè)案例給大家分享微信小程序連續(xù)簽到7天積分獲得功能，通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考價(jià)值，感興趣的朋友一起學(xué)習(xí)吧
2020-08-08 
JavaScript實(shí)現(xiàn)的購物車效果可以運(yùn)用在好多地方
JavaScript實(shí)現(xiàn)的購物車效果，當(dāng)然這個(gè)效果可以運(yùn)用在好多地方，比如好友的選擇，人力資源模塊等等，需要的朋友可以參考下
2014-05-05