Imitation DVBBS drop-down menu effect jb51 corrected without error

Home

Web Front-end

JS Tutorial

Imitation DVBBS drop-down menu effect jb51 corrected without error_drop-down menu

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修正无错

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

]

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

2 weeks ago By DDD

R.E.P.O. How to Fix Audio if You Can't Hear Anyone

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: How To Unlock Everything In MyRise

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7467

CakePHP Tutorial

1376

What is the format of the account name of steam

win11 activation key permanent

nyt connections hints and answers

Related knowledge

How do I create and publish my own JavaScript libraries? Mar 18, 2025 pm 03:12 PM

Article discusses creating, publishing, and maintaining JavaScript libraries, focusing on planning, development, testing, documentation, and promotion strategies.

How do I optimize JavaScript code for performance in the browser? Mar 18, 2025 pm 03:14 PM

The article discusses strategies for optimizing JavaScript performance in browsers, focusing on reducing execution time and minimizing impact on page load speed.

What should I do if I encounter garbled code printing for front-end thermal paper receipts? Apr 04, 2025 pm 02:42 PM

Frequently Asked Questions and Solutions for Front-end Thermal Paper Ticket Printing In Front-end Development, Ticket Printing is a common requirement. However, many developers are implementing...

How do I debug JavaScript code effectively using browser developer tools? Mar 18, 2025 pm 03:16 PM

The article discusses effective JavaScript debugging using browser developer tools, focusing on setting breakpoints, using the console, and analyzing performance.

How do I use source maps to debug minified JavaScript code? Mar 18, 2025 pm 03:17 PM

The article explains how to use source maps to debug minified JavaScript by mapping it back to the original code. It discusses enabling source maps, setting breakpoints, and using tools like Chrome DevTools and Webpack.

How do I use Java's collections framework effectively? Mar 13, 2025 pm 12:28 PM

This article explores effective use of Java's Collections Framework. It emphasizes choosing appropriate collections (List, Set, Map, Queue) based on data structure, performance needs, and thread safety. Optimizing collection usage through efficient

TypeScript for Beginners, Part 2: Basic Data Types Mar 19, 2025 am 09:10 AM

Once you have mastered the entry-level TypeScript tutorial, you should be able to write your own code in an IDE that supports TypeScript and compile it into JavaScript. This tutorial will dive into various data types in TypeScript. JavaScript has seven data types: Null, Undefined, Boolean, Number, String, Symbol (introduced by ES6) and Object. TypeScript defines more types on this basis, and this tutorial will cover all of them in detail. Null data type Like JavaScript, null in TypeScript

Getting Started With Chart.js: Pie, Doughnut, and Bubble Charts Mar 15, 2025 am 09:19 AM

This tutorial will explain how to create pie, ring, and bubble charts using Chart.js. Previously, we have learned four chart types of Chart.js: line chart and bar chart (tutorial 2), as well as radar chart and polar region chart (tutorial 3). Create pie and ring charts Pie charts and ring charts are ideal for showing the proportions of a whole that is divided into different parts. For example, a pie chart can be used to show the percentage of male lions, female lions and young lions in a safari, or the percentage of votes that different candidates receive in the election. Pie charts are only suitable for comparing single parameters or datasets. It should be noted that the pie chart cannot draw entities with zero value because the angle of the fan in the pie chart depends on the numerical size of the data point. This means any entity with zero proportion

See all articles