js 單擊式的下拉菜單效果實例
更新時間：2013年08月13日 15:24:29 作者：
這篇文章介紹了js 單擊式的下拉菜單效果實例，有需要的朋友可以參考一下
復制代碼 代碼如下:
<!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')">[點擊顯示菜單]</a> </span>
<div class="div2" id="dropmenu">
<a href="http://www.fzitv.net">腳本之家</a>
<a href="#">個性名字網</a>
<a href="#">個性名字網</a>
</div>
</body>
</html> </td>
</tr>
</table>
相關文章
這篇文章主要介紹了JavaScript動畫：offset和勻速動畫詳解(含輪播圖的實現(xiàn))，并把實現(xiàn)代碼做了分享，有興趣的朋友參考下。2018-02-02
javascript中可以通過四個屬性獲得元素的偏移量，offsetHeight、offsetWidth、offsetLeft、offsetTop，下面為大家解釋下各屬性的含義2014-06-06
這篇文章主要介紹了基于JavaScript實現(xiàn)單例模式,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-10-10
這篇文章主要介紹了js中回調函數的相關知識,需要的朋友可以參考下2014-07-07
這篇文章主要為大家詳細介紹了javascript canvas封裝動態(tài)時鐘，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
暫時放棄js框架吧 開始寫javascript的時候都是自己寫，后來發(fā)現(xiàn)了prototype.js框架，發(fā)現(xiàn)很好用，就一直用的，他的對象創(chuàng)建方法被修改了，但很好用，再后來又轉用jquery框架，受此框架影響，也不用自己創(chuàng)建類了，漸漸的竟然忘記了如何自己定義類了，猛的給一個一般方法，竟然看著別扭，混淆了很多東西，忘記了很多東西。今天回頭整理下。 一下方法參考prototype.js2008-03-03
JQuery有很多這樣的插件，但本文的這個是跟著自己的想法寫的，也不知道他人是如何實現(xiàn)的，感興趣的朋友可以了解下2014-01-01
這篇文章主要為大家詳細介紹了js實現(xiàn)網頁圖片輪換播放，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
今天通過一個案例給大家分享微信小程序連續(xù)簽到7天積分獲得功能，通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考價值，感興趣的朋友一起學習吧2020-08-08
JavaScript實現(xiàn)的購物車效果可以運用在好多地方
JavaScript實現(xiàn)的購物車效果，當然這個效果可以運用在好多地方，比如好友的選擇，人力資源模塊等等，需要的朋友可以參考下2014-05-05