仿DVBBS下拉菜单效果 jb51修正无错_下拉菜单-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

仿DVBBS下拉菜单效果 jb51修正无错_下拉菜单

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 07:27 PM

1、将存为menu.htm格式文件以下为代码内容：

复制代码代码如下:

网络文摘

')"> 思客秀

2、将下面代码存为menu.js文件，并与menu.htm放到同级目录下

复制代码代码如下:

//Pop-it menu- By Dynamic Drive - Modified by Wbird 
//For full source code and more DHTML scripts, visit http://www.gyct.cn 
//This credit MUST stay intact for use 
var menuOffX=0 //菜单距连接文字最左端距离 
var menuOffY=18 //菜单距连接文字顶端距离 
var vBobjects = new Array(); 
var fo_shadows=new Array(); 
////No need to edit beyond here 
var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1 
var ns6=document.getElementById&&!document.all 
var ns4=document.layers 

function MM_findObj(n, d) { 
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { 
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} 

if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i
for(i=0;!x&&d.layers&&i
if(!x && d.getElementById) x=d.getElementById(n); return x; 

}  

function fetch_object(idname, forcefetch) 
{ 
if (typeof(vBobjects[idname]) == "undefined") 
{ 
vBobjects[idname] = MM_findObj(idname); 
} 
return vBobjects[idname]; 
} 
//showmenu vmenu:内容，允许为空,vmenuobj DIV数据ID，MOD 0=关闭浏览器自适应，用于版面导航菜单 
function showmenu(e,vmenu,vmenuobj,mod){ 
    if (!document.all&&!document.getElementById&&!document.layers) 
        return 
    var which=vmenu; 
    if (vmenuobj) 
    { 
        var MenuObj = fetch_object(vmenuobj); 
        if (MenuObj) 
        { 
            which = MenuObj.innerHTML; 
        } 
    } 
    if (!which) 
    { 
        return 
    } 
    clearhidemenu(); 
    ie_clearshadow(); 
    menuobj=ie4? document.all.popmenu : ns6? document.getElementById("popmenu") : ns4? document.popmenu : "" 
    menuobj.thestyle=(ie4||ns6)? menuobj.style : menuobj 
    if (ie4||ns6) 
        menuobj.innerHTML=which 
    else{ 
        menuobj.document.write(''+which+'') 
        menuobj.document.close() 
    } 
    menuobj.contentwidth=(ie4||ns6)? menuobj.offsetWidth : menuobj.document.gui.document.width 
    menuobj.contentheight=(ie4||ns6)? menuobj.offsetHeight : menuobj.document.gui.document.height 
    eventX=ie4? event.clientX : ns6? e.clientX : e.x 
    eventY=ie4? event.clientY : ns6? e.clientY : e.y 
    var rightedge=ie4? document.body.clientWidth-eventX : window.innerWidth-eventX 
    var bottomedge=ie4? document.body.clientHeight-eventY : window.innerHeight-eventY 
    var getlength 
        if (rightedge            getlength=ie4? document.body.scrollLeft+eventX-menuobj.contentwidth+menuOffX : ns6? window.pageXOffset+eventX-menuobj.contentwidth : eventX-menuobj.contentwidth 
        }else{ 
            getlength=ie4? ie_x(event.srcElement)+menuOffX : ns6? window.pageXOffset+eventX : eventX 
        } 
        menuobj.thestyle.left=getlength+'px' 
        if (bottomedge            getlength=ie4? document.body.scrollTop+eventY-menuobj.contentheight-event.offsetY+menuOffY-23 : ns6? window.pageYOffset+eventY-menuobj.contentheight-10 : eventY-menuobj.contentheight 
        }    else{ 
            getlength=ie4? ie_y(event.srcElement)+menuOffY : ns6? window.pageYOffset+eventY+10 : eventY 
        } 
    menuobj.thestyle.top=getlength+'px' 
    menuobj.thestyle.visibility="visible" 
    ie_dropshadow(menuobj,"#999999",3) 
    return false 
} 

function ie_y(e){   
    var t=e.offsetTop;   
    while(e=e.offsetParent){   
        t+=e.offsetTop;   
    }   
    return t;   
}   
function ie_x(e){   
    var l=e.offsetLeft;   
    while(e=e.offsetParent){   
        l+=e.offsetLeft;   
    }   
    return l;   
}   
function ie_dropshadow(el, color, size) 
{ 
    var i; 
    for (i=size; i>0; i--) 
    { 
        var rect = document.createElement('div'); 
        var rs = rect.style 
        rs.position = 'absolute'; 
        rs.left = (el.style.posLeft + i) + 'px'; 
        rs.top = (el.style.posTop + i) + 'px'; 
        rs.width = el.offsetWidth + 'px'; 
        rs.height = el.offsetHeight + 'px'; 
        rs.zIndex = el.style.zIndex - i; 
        rs.backgroundColor = color; 
        var opacity = 1 - i / (i + 1); 
        rs.filter = 'alpha(opacity=' + (100 * opacity) + ')'; 
        //el.insertAdjacentElement('afterEnd', rect); 
        fo_shadows[fo_shadows.length] = rect; 
    } 
} 
function ie_clearshadow() 
{ 
    for(var i=0;i    { 
        if (fo_shadows[i]) 
            fo_shadows[i].style.display="none" 
    } 
    fo_shadows=new Array(); 
} 
function contains_ns6(a, b) { 
    while (b.parentNode) 
        if ((b = b.parentNode) == a) 
            return true; 
    return false; 
} 

function hidemenu(){ 
    if (window.menuobj) 
        menuobj.thestyle.visibility=(ie4||ns6)? "hidden" : "hide" 
    ie_clearshadow() 
} 

function dynamichide(e){ 
    if (ie4&&!menuobj.contains(e.toElement)) 
        hidemenu() 
    else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget)) 
        hidemenu() 
} 

function delayhidemenu(){ 
    if (ie4||ns6||ns4) 
        delayhide=setTimeout("hidemenu()",500) 
} 

function clearhidemenu(){ 
    if (window.delayhide) 
        clearTimeout(delayhide) 
} 
function highlightmenu(e,state){ 
    if (document.all) 
        source_el=event.srcElement 
    else if (document.getElementById) 
        source_el=e.target 
    if (source_el.className=="menuitems"){ 
        source_el.id=(state=="on")? "mouseoverstyle" : "" 
    } 
    else{ 
        while(source_el.id!="popmenu"){ 
            source_el=document.getElementById? source_el.parentNode : source_el.parentElement 
            if (source_el.className=="menuitems"){ 
                source_el.id=(state=="on")? "mouseoverstyle" : "" 
            } 
        } 
    } 
} 

if (ie4||ns6) 
document.onclick=hidemenu

3、在menu.htm目录下建立image目录，制作背景图片
PS:事例效果:
以下为代码内容：

简约时尚
魔兽世界
清除记录
','site_menu')">[选择皮肤]
jb51修正无错

function MM_findObj(n, d) { 
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { 
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];

for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);

if(!x && d.getElementById) x=d.getElementById(n); return x;

}

function hidemenu(){ 
    if (window.menuobj) 
        menuobj.thestyle.visibility=(ie4||ns6)? "hidden" : "hide" 
    ie_clearshadow() 
}

function dynamichide(e){ 
    if (ie4&&!menuobj.contains(e.toElement)) 
        hidemenu() 
    else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget)) 
        hidemenu() 
}

function delayhidemenu(){ 
    if (ie4||ns6||ns4) 
        delayhide=setTimeout("hidemenu()",500) 
}

function clearhidemenu(){ 
    if (window.delayhide) 
        clearTimeout(delayhide) 
} 
function highlightmenu(e,state){ 
    if (document.all) 
        source_el=event.srcElement 
    else if (document.getElementById) 
        source_el=e.target 
    if (source_el.className=="menuitems"){ 
        source_el.id=(state=="on")? "mouseoverstyle" : "" 
    } 
    else{ 
        while(source_el.id!="popmenu"){ 
            source_el=document.getElementById? source_el.parentNode : source_el.parentElement 
            if (source_el.className=="menuitems"){ 
                source_el.id=(state=="on")? "mouseoverstyle" : "" 
            } 
        } 
    } 
}

if (ie4||ns6) 
document.onclick=hidemenu 
</script>  
  
  
<div class="menuskin" id="popmenu" onmouseover="clearhidemenu();highlightmenu(event,'on')" onmouseout="highlightmenu(event,'off');dynamichide(event)" style="Z-index:100"></div>  
<center>  
<a href="###" onmouseover="showmenu(event,'<div class=menuitems><a href=http://www.jb51.net>网络编程</a></div><div class=menuitems><a href=http://www.jb51.net>asp</a></div>')"> 脚本之家</a>  
</center>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7393

Java チュートリアル

1630

CakePHP チュートリアル

1357

Laravel チュートリアル

1268

PHP チュートリアル

1217

Related knowledge

JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScript文字列置換法とFAQの詳細な説明この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します：内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します最も直接的な方法は、置換（）メソッドを使用することです。 str = str.replace（ "find"、 "置換"）; この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace（/fi

8見事なjQueryページレイアウトプラグイン Mar 06, 2025 am 12:48 AM

楽なWebページレイアウトのためにjQueryを活用する：8本質的なプラグイン jQueryは、Webページのレイアウトを大幅に簡素化します。この記事では、プロセスを合理化する8つの強力なjQueryプラグイン、特に手動のウェブサイトの作成に役立ちます

独自のAjax Webアプリケーションを構築します Mar 09, 2025 am 12:11 AM

それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか？ Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました

10 jQueryの楽しみとゲームプラグイン Mar 08, 2025 am 12:42 AM

10の楽しいjQueryゲームプラグインして、あなたのウェブサイトをより魅力的にし、ユーザーの粘着性を高めます！ Flashは依然としてカジュアルなWebゲームを開発するのに最適なソフトウェアですが、jQueryは驚くべき効果を生み出すこともできます。また、純粋なアクションフラッシュゲームに匹敵するものではありませんが、場合によってはブラウザで予期せぬ楽しみもできます。 jquery tic toeゲームゲームプログラミングの「Hello World」には、JQueryバージョンがあります。ソースコード jQueryクレイジーワードコンポジションゲームこれは空白のゲームであり、単語の文脈を知らないために奇妙な結果を生み出すことができます。ソースコード jquery鉱山の掃引ゲーム

独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか？ Mar 18, 2025 pm 03:12 PM

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

Ajaxを使用して動的にボックスコンテンツをロードします Mar 06, 2025 am 01:07 AM

このチュートリアルでは、Ajaxを介してロードされた動的なページボックスの作成を示しており、フルページのリロードなしでインスタントリフレッシュを可能にします。 JQueryとJavaScriptを活用します。カスタムのFacebookスタイルのコンテンツボックスローダーと考えてください。重要な概念： ajaxとjquery