如何用原生js写出滑动下拉菜单

2023-03-15 20:41:02JavaScript012

如何用原生js写出滑动下拉菜单,第1张

<!DOCTYPE html>

<head>

<style>

#menu {

position: relative

background: black

width: 150px

height: 30px

margin: 200px auto

overflow: hidden

}

#sc {

position: absolute

background-color: #80ffff

width: 150px

height: 120px

top: 0

}

</style>

</script>

</head>

<body>

</div>

var menu = document.getElementById('menu')

var sc = document.getElementById('sc')

var interval

function menuscroll() {

var top = parseFloat(sc.style.top) || sc.scrollTop

top += 10

sc.style.top = top + "px"

}

menu.onmouseenter = function() {

interval = setInterval("menuscroll()", 90)

}

menu.onmouseleave = function() {

clearInterval(interval)

sc.style.top = 0

}

</script>

</body>

</html>

function CoolMenuControl(){

// 常规变量 this lastScrollX= this lastScrollY= this lastScrollW= this lastScrollH= this td_X= this td_Y= this td_W= this td_H= this td= this mouseon= this current=null this _namethis table_namethis menudiv_namethis menutable_namethis ml= this menuarray=new Array()this speedthis href=""

// 菜单项目 function menuitem(type value url target){ this type=type this value=value this url=url this target=target }

// 插入菜单 this insertmenu=function(type value url target){ this menuarray[this menuarray length]=new menuitem(type value url target) }

// 程序初试化 this init=function(name bdc bgc speed Alpha){ var in="" var cellcount= var lastcellcount= this _name=name+"" this table_name=name+"table" this menudiv_name=name+"menudiv" this menutable_name=name+"menutable" this speed=speed

for (i= i<this menuarray lengthi++) { if (this menuarray[i] type==" ") cellcount=cellcount+ if (this menuarray[i] type==" " || this menuarray[i] type==" ") {cellcount= } if (lastcellcount<cellcount) {lastcellcount++} }

//alert(cellcount)

stylecode="cursor:handfilter:Alpha(style= opacity="+Alpha+")background color:"+bgc

suspendcode="<DIV id="+this _name+" style= POSITION:absoluteonclick= "+name+" doClick() >" +"<table id="+this table_name+" border= width= cellspacing= style= border collapse: collapse bordercolor= "+bdc+" >" +"<tr><td height= style= "+stylecode+" ></td></tr></table></div>"document write(suspendcode)var fcell=true for (i= i<this menuarray lengthi++) { switch(this menuarray[i] type) { case " ": t=cellcount* if (t<= ) { in+= <tr><td colspan= class=ht onmouseover= +name+ href=" +this menuarray[i] url+ +this menuarray[i] target+ " >+this menuarray[i] value } else { in+= <tr><td colspan= +t+ class=ht onmouseover= +name+ href=" +this menuarray[i] url+ +this menuarray[i] target+ " >+this menuarray[i] value } fcell=true break case " ": t=(cellcount )* if (t<= ) { in+= <tr><td width= ><td onmouseover= +name+ href=" +this menuarray[i] url+ +this menuarray[i] target+ " >+this menuarray[i] value } else { in+= <tr><td width= ><td colspan= +t+ onmouseover= +name+ href=" +this menuarray[i] url+ +this menuarray[i] target+ " >+this menuarray[i] value } fcell=true break case " ": if (fcell) { in+= <tr><td width= ><td onmouseover= +name+ href=" +this menuarray[i] url+ +this menuarray[i] target+ " >+this menuarray[i] value fcell=false } else { in+= <td width= ><td onmouseover= +name+ href=" +this menuarray[i] url+ +this menuarray[i] target+ " >+this menuarray[i] value } break } } in= <div id= +this menudiv_name+ onmousemove=" +name+ doOver()"> + <table id= +this menutable_name+ border= cellpadding=" " class="menu" cellspacing=" "> +in + </table></div>//alert(in) document write(in)

this lastScrollX= this lastScrollY= this posXY(eval(this menutable_name) cells[ ]) this td_W=eval(this menutable_name) cells[ ] scrollWidth+ this td_H=eval(this menutable_name) cells[ ] scrollHeight setInterval(name+" scrollback()" ) }

// 单击超连接 this doClick=function(){ //alert(this url) var url=this href split(" ") //alert(url[ ]) //alert(url[ ]) if (url[ ]=="") return

if (url[ ]=="_blank") {window open(url[ ])} else {location href=url[ ]} }

// 滑动处理 this scrollback=function(){ diffX=this td_X diffY=this td_Y diffW=this td_W diffH=this td_H percentX=this speed*(diffX this lastScrollX)percentY=this speed*(diffY this lastScrollY)percentW=this speed*(diffW this lastScrollW)percentH=this speed*(diffH this lastScrollH)

if(percentX>)percentX=Math ceil(percentX)else percentX=Math floor(percentX)if(percentY>)percentY=Math ceil(percentY)else percentY=Math floor(percentY)if(percentW>)percentW=Math ceil(percentW)else percentW=Math floor(percentW)if(percentH>)percentH=Math ceil(percentH)else percentH=Math floor(percentH)

eval(this _name) style pixelTop+=percentYeval(this _name) style pixelLeft+=percentXeval(this table_name) style pixelWidth+=percentWeval(this table_name) style pixelHeight+=percentH

this lastScrollX=this lastScrollX+percentXthis lastScrollY=this lastScrollY+percentYthis lastScrollW=this lastScrollW+percentWthis lastScrollH=this lastScrollH+percentH}

// 滑出 this doOver=function() { if (event srcElement tagName=="TD") { if (event srcElement innerText length== || event srcElement innerText=="|") return this posXY(event srcElement) this td_W=event srcElement scrollWidth+ this td_H=event srcElement scrollHeight } }

// 绝对定位 this posXY=function(obj){ _left=obj offsetLeft _top=obj offsetTop vParent = obj offsetParent while (vParent tagName toUpperCase() != "BODY") { _left += vParent offsetLeft _top += vParent offsetTop vParent = vParent offsetParent } this td_X=_left this td_Y=_top }

// 关于 this about=function(){ alert("OK") }

} </script>

<head><meta equiv="Content Language" content="zh cn"><style>b{color=# cursor:hand} menu { font family:Arialcursor:Defaultfont size: pxborder: px # solidborder collapse: collapsefilter:progid:DXImageTransform Microsoft Gradient(gradienttype= startcolorstr=#ffffff endcolorstr=#dddddd) progid:DXImageTransform Microsoft Shadow(direction= color=#cccccc strength= )} ht{ font weight:bold } </style><! 第一步实体化X Menu类用法: var <实体变量>new CoolMenuControl() ><script language="javascript">var CoolMenu =new CoolMenuControl() var about=new Array() about[ ]="关于X Menu菜单nnAuthor:PuterJamnCopyright n转载请通知本人" about[ ]="关于作者nn"这家伙很懒什么也没留下！！"

</script></head><body><! 第二步建立菜单项目用法: <实体变量>insertmenu(类型 Html代码链接网址目标) 　类型 0代表菜单标题 1代表树型菜单子项目 2代表横向菜单子项目　Html代码显示在菜单上的Html代码链接网址不用多说了网址或Javascript脚本目标默认为空既不在本页打开 "_blank"代表在新的页面打开例如: CoolMenu insertmenu(" " "<img src=// blueidea /img/icon/arrow gif>新浪网" " "_blank") 　 ><script>CoolMenu insertmenu(" " "本站首页" "" "") CoolMenu insertmenu(" " "新闻中心" " "_blank") CoolMenu insertmenu(" " "文章中心" " "_blank") CoolMenu insertmenu(" " "图片欣赏" " "_blank") CoolMenu insertmenu(" " "软件下载" " "_blank") CoolMenu insertmenu(" " "娱乐欣赏" " "_blank") </script>

lishixinzhi/Article/program/Java/JSP/201311/19958

下面代码就是你要的效果!具体样式再根据你的需要进行修改就可以：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>广告代码CSS+XHTML代码</TITLE>

<STYLE type=text/css>BODY {

FONT-SIZE: 12pxBACKGROUND: #fffFONT-FAMILY: "Lucida Grande", Helvetica, Arial, sans-serif

}

#dlmenu {

HEIGHT: 10em

}

#menu {

PADDING-RIGHT: 0pxPADDING-LEFT: 0pxZ-INDEX: 100BACKGROUND: #fffPADDING-BOTTOM: 0pxMARGIN: 0px 0px 10pxWIDTH: 15emPADDING-TOP: 0pxLIST-STYLE-TYPE: nonePOSITION: absolute

}

#menu LI {

PADDING-RIGHT: 0pxDISPLAY: blockPADDING-LEFT: 0pxZ-INDEX: 100PADDING-BOTTOM: 0pxMARGIN: 0pxPADDING-TOP: 0pxPOSITION: relative

}

#menu LI A {

DISPLAY: blockTEXT-DECORATION: none

}

#menu LI A:visited {

DISPLAY: blockTEXT-DECORATION: none

}

#menu LI DD {

DISPLAY: none

}

#menu LI:hover {

BORDER-TOP-WIDTH: 0pxBORDER-LEFT-WIDTH: 0pxBORDER-BOTTOM-WIDTH: 0pxBORDER-RIGHT-WIDTH: 0px

}

#menu LI A:hover {

BORDER-TOP-WIDTH: 0pxBORDER-LEFT-WIDTH: 0pxBORDER-BOTTOM-WIDTH: 0pxBORDER-RIGHT-WIDTH: 0px

}

#menu LI:hover DT A {

BACKGROUND: url(top_grad_2.gif) #d4d8bd center centerCOLOR: #ff0

}

#menu LI A:hover DT A {

BACKGROUND: url(top_grad_2.gif) #d4d8bd center centerCOLOR: #ff0

}

#menu LI:hover DD {

DISPLAY: block

}

#menu LI A:hover DD {

DISPLAY: block

}

#menu LI:hover DL {

BACKGROUND: url(sub_grad.gif) #b4be9cHEIGHT: 20em

}

#menu LI A:hover DL {

BACKGROUND: url(sub_grad.gif) #b4be9cHEIGHT: 20em

}

#menu TABLE {

PADDING-RIGHT: 0pxPADDING-LEFT: 0pxFONT-SIZE: 1emPADDING-BOTTOM: 0pxMARGIN: -4pxPADDING-TOP: 0pxBORDER-COLLAPSE: collapse

}

#menu DL {

BACKGROUND: #6f9c6fMARGIN: 0pxWIDTH: 15emCURSOR: pointer

}

#menu DT {

PADDING-RIGHT: 0pxBORDER-TOP: #cce 1px solidPADDING-LEFT: 0pxFONT-SIZE: 1.1emPADDING-BOTTOM: 0pxMARGIN: 0pxPADDING-TOP: 0px

}

#menu DD {

PADDING-RIGHT: 0pxPADDING-LEFT: 0pxFONT-SIZE: 1emPADDING-BOTTOM: 0pxMARGIN: 0pxPADDING-TOP: 0pxTEXT-ALIGN: left

}

.gallery DT A {

PADDING-RIGHT: 5pxDISPLAY: blockPADDING-LEFT: 10pxBACKGROUND: url(top_grad.gif) #949e7c center centerPADDING-BOTTOM: 5pxCOLOR: #fffPADDING-TOP: 5px

}

.gallery DT A:visited {

PADDING-RIGHT: 5pxDISPLAY: blockPADDING-LEFT: 10pxBACKGROUND: url(top_grad.gif) #949e7c center centerPADDING-BOTTOM: 5pxCOLOR: #fffPADDING-TOP: 5px

}

.gallery DD A {

PADDING-RIGHT: 5pxDISPLAY: blockPADDING-LEFT: 20pxMIN-HEIGHT: 1emBACKGROUND: url(sub_grad.gif) #b4be9cPADDING-BOTTOM: 4pxCOLOR: #000PADDING-TOP: 4pxTEXT-DECORATION: none

}

.gallery DD A:visited {

PADDING-RIGHT: 5pxDISPLAY: blockPADDING-LEFT: 20pxMIN-HEIGHT: 1emBACKGROUND: url(sub_grad.gif) #b4be9cPADDING-BOTTOM: 4pxCOLOR: #000PADDING-TOP: 4pxTEXT-DECORATION: none

}

HTML .gallery DD A {

HEIGHT: 1em

}

HTML .gallery DD A:visited {

HEIGHT: 1em

}

.gallery DD A:hover {

BACKGROUND: #7aaCOLOR: #ff0

}

</STYLE>

<BODY>

<LI><!--[if lte IE 6]><A

href="#">

<TABLE>

<TBODY>

<TR>

<DT><A

href="#">DEMOS</A>

<DD><A title="The zero dollar ads page"

href="#">zero

dollars</A>

<DD><A title="Wrapping text around images"

href="#">wrapping

text</A>

<DD><A title="Styling forms"

href="#">styled form</A>

<DD><A title="Removing active/focus borders"

href="#">active

focus</A>

<DD><A title="Multi-position drop shadow"

href="#">shadow

boxing</A>

<DD><A title="Image Map for detailed information"

href="#">image

map</A>

<DD><A title="fun with background images"

href="#">fun with

backgrounds</A>

<DD><A title="fade-out scrolling"

href="#">fade

scrolling</A>

<DD><A title="em size images compared"

href="#">em sized

images</A></DD>

</DL>

<LI><!--[if lte IE 6]><A

href="#">

<TABLE>

<TBODY>

<TR>

<DT><A

href="#">MENUS</A>

<DD><A title="a coded list of spies"

href="#">spies menu</A>

<DD><A title="a horizontal vertical menu"

href="#">vertical

menu</A>

<DD><A title="an enlarging unordered list"

href="#">enlarging

list</A>

<DD><A title="an unordered list with link images"

href="#">link

images</A>

<DD><A title="non-rectangular links"

href="#">non-rectangular

links</A>

<DD><A title="jigsaw links"

href="#">jigsaw

links</A>

<DD><A title="circular links"

href="#">circular

links</A></DD>

</DL>

<LI><!--[if lte IE 6]><A

href="#">

<TABLE>

<TBODY>

<TR>

<DT><A

href="#">LAYOUTS</A>

<DD><A title="Cross browser fixed layout"

href="#">Fixed

1</A>

<DD><A title="Cross browser fixed layout"

href="#">Fixed 2</A>

<DD><A title="Cross browser fixed layout"

href="#">Fixed 3</A>

<DD><A title="Cross browser fixed layout"

href="#">Fixed 4</A>

<DD><A title="A simple minimum width layout"

href="#">minimum

width for Internet Explorer</A> </DD>

</DL>

<LI><!--[if lte IE 6]><A

href="#">

<TABLE>

<TBODY>

<TR>

<DT><A

href="#">MOZILLA</A>

<DD><A title="A drop down menu"

href="#">drop

down menu</A>

<DD><A title="A cascading menu"

href="#">cascading

menu</A>

<DD><A title="Using content:"

href="#">content:</A>

<DD><A title=":hover applied to a div"

href="#">mozzie

box</A>

<DD><A title="I can build a rainbow"

href="#">rainbow

box</A>

<DD><A title="Snooker cue"

href="#">snooker

cue made using border art</A>

</DL></LI></UL></DIV>

</BODY></HTML>

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：JS树结构数据的遍历

# 下一篇：html js css div 他们各自的作用是什么

推荐阅读

热门文章

最新发布

标签列表

如何用原生js写出滑动下拉菜单

给您推荐相同类型的内容：