Home > Web Front-end > JS Tutorial > A very cool JS menu effect_javascript skills

A very cool JS menu effect_javascript skills

WBOY
Release: 2016-05-16 19:26:23
Original
1236 people have browsed it

Code encapsulation is completed
Thank you everyone for your support!
I even referred to the menus of some Flash sites,
I imitated one using javascript, and the effect is quite cool.

Simply write an instruction for use:
Step one: materialize X- Menu class
Usage:
var .new CoolMenuControl()

Step 2: Create menu items ---

Usage:
< ;Entity variable>.insertmenu(type, Html code, link URL, target)
Type: 0 represents the menu title, 1 represents the tree menu sub-item, 2 represents the horizontal menu sub-item
Html code: displayed in Html code on the menu
Link URL: Needless to say, URL or Javascript script
Target: It is empty by default and will not be opened on this page; "_blank" means opening in a new page
For example:
CoolMenu2.insertmenu("2"," Sina","http://www.sina.com.cn /","_blank")

Step 3: Create menu ---

Usage:
.init(entity variable name, border color, background Color, sliding speed, background translucency)
The 'entity variable name' must be the same as the
If the background color="transparent" is completely transparent
For example:
CoolMenu1. init("CoolMenu1","#002000","#38FFff",0.1,15)

.init (entity variable name, border color, background color, sliding speed, background translucency) 'Entity variable name' must be the same as
If the background color="transparent" is completely transparent For example: CoolMenu1.init("CoolMenu1","#002000","#38FFff",0.1,15) -->
<script> function CoolMenuControl(){ //-----常规变量--- this.lastScrollX=0; this.lastScrollY=0; this.lastScrollW=0; this.lastScrollH=0; this.td_X=0; this.td_Y=0; this.td_W=0; this.td_H=0; this.td=0; this.mouseon=0; this.current=null this.hk_name; this.hktable_name; this.menudiv_name; this.menutable_name; this.ml=0; this.menuarray=new Array(); this.speed; this.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 inhtml="" var cellcount=0 var lastcellcount=0 this.hk_name=name+"hk" this.hktable_name=name+"hktable" this.menudiv_name=name+"menudiv" this.menutable_name=name+"menutable" this.speed=speed for (i=0;i<this.menuarray.length;i++) { if (this.menuarray[i].type=="2") cellcount=cellcount+1 if (this.menuarray[i].type=="1" || this.menuarray[i].type=="0") {cellcount=0} if (lastcellcount<cellcount) {lastcellcount++} } //alert(cellcount) stylecode="cursor:hand;filter:Alpha(style=0,opacity="+Alpha+");background-color:"+bgc suspendcode="<DIV id="+this.hk_name+" style='POSITION:absolute;' onclick='"+name+".doClick()'>" +"<table id="+this.hktable_name+" border='1' width='0' cellspacing='0' style='border-collapse: collapse' bordercolor='"+bdc+"'>" +"<tr><td height='18' style='"+stylecode+"'>"; document.write(suspendcode); var fcell=true for (i=0;i<this.menuarray.length;i++) { switch(this.menuarray[i].type) { case "0": t=cellcount*2 if (t<=0) { inhtml+='<tr><td colspan=2 class=ht onmouseover=\''+name+'.href="'+this.menuarray[i].url+','+this.menuarray[i].target+'"\'>'+this.menuarray[i].value } else { inhtml+='<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 "1": t=(cellcount-1)*2 if (t<=0) { inhtml+='<tr><td width=6><td onmouseover=\''+name+'.href="'+this.menuarray[i].url+','+this.menuarray[i].target+'"\'>'+this.menuarray[i].value } else { inhtml+='<tr><td width=6><td colspan='+t+' onmouseover=\''+name+'.href="'+this.menuarray[i].url+','+this.menuarray[i].target+'"\'>'+this.menuarray[i].value } fcell=true break; case "2": if (fcell) { inhtml+='<tr><td width=6><td onmouseover=\''+name+'.href="'+this.menuarray[i].url+','+this.menuarray[i].target+'"\'>'+this.menuarray[i].value; fcell=false } else { inhtml+='<td width=6><td onmouseover=\''+name+'.href="'+this.menuarray[i].url+','+this.menuarray[i].target+'"\'>'+this.menuarray[i].value; } break; } } inhtml='<div id='+this.menudiv_name+' onmousemove="'+name+'.doOver()">' +'<table id='+this.menutable_name+' border="0" cellpadding="2" class="menu" cellspacing="4">' +inhtml +''; //alert(inhtml) document.write(inhtml); this.lastScrollX=0; this.lastScrollY=-4; this.posXY(eval(this.menutable_name).cells[0]) this.td_W=eval(this.menutable_name).cells[0].scrollWidth+6 this.td_H=eval(this.menutable_name).cells[0].scrollHeight setInterval(name+".scrollback()",1) } //-----单击超连接--- this.doClick=function(){ //alert(this.url) var url=this.href.split(",") //alert(url[0]) //alert(url[1]) if (url[0]=="") return if (url[1]=="_blank") {window.open(url[0])} else {location.href=url[0]} } //-----滑动处理--- this.scrollback=function(){ diffX=this.td_X-3 diffY=this.td_Y-5 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>0)percentX=Math.ceil(percentX); else percentX=Math.floor(percentX); if(percentY>0)percentY=Math.ceil(percentY); else percentY=Math.floor(percentY); if(percentW>0)percentW=Math.ceil(percentW); else percentW=Math.floor(percentW); if(percentH>0)percentH=Math.ceil(percentH); else percentH=Math.floor(percentH); eval(this.hk_name).style.pixelTop+=percentY; eval(this.hk_name).style.pixelLeft+=percentX; eval(this.hktable_name).style.pixelWidth+=percentW; eval(this.hktable_name).style.pixelHeight+=percentH; this.lastScrollX=this.lastScrollX+percentX; this.lastScrollY=this.lastScrollY+percentY; this.lastScrollW=this.lastScrollW+percentW; this.lastScrollH=this.lastScrollH+percentH; } //-----滑出--- this.doOver=function() { if (event.srcElement.tagName=="TD") { if (event.srcElement.innerText.length==0 || event.srcElement.innerText=="|") return this.posXY(event.srcElement) this.td_W=event.srcElement.scrollWidth+6 this.td_H=event.srcElement.scrollHeight } } //-----绝对定位--- this.posXY=function(obj){ hk_left=obj.offsetLeft hk_top=obj.offsetTop vParent = obj.offsetParent; while (vParent.tagName.toUpperCase() != "BODY") { hk_left += vParent.offsetLeft; hk_top += vParent.offsetTop; vParent = vParent.offsetParent; } this.td_X=hk_left this.td_Y=hk_top } //-----关于--- this.about=function(){ alert("OK") } } </script> <script> CoolMenu1.insertmenu("0","欢迎使用X-Menu (菜单演示) <font style='font-weight:lighter;'>Made By PuterJam","","") CoolMenu1.insertmenu("0"," ","http://www.blueidea.com/","_blank") CoolMenu2.insertmenu("0","<img src=http://bbs.dvbbs.net/Skins/Default/nofollow.gif alt="A very cool JS menu effect_javascript skills" > 横向菜单","","") CoolMenu2.insertmenu("2","<img src=http://www.blueidea.com/img/icon/arrow.gif alt="A very cool JS menu effect_javascript skills" > 新浪网","http://www.sina.com.cn/","_blank") CoolMenu2.insertmenu("2","<img src=http://www.blueidea.com/img/icon/arrow.gif alt="A very cool JS menu effect_javascript skills" > 我的雅虎","http://cn.yahoo.com/","_blank") CoolMenu2.insertmenu("2","<img src=http://www.blueidea.com/img/icon/arrow.gif alt="A very cool JS menu effect_javascript skills" > 亿唐","http://www.etang.com/","_blank") CoolMenu2.insertmenu("2","<img src=http://www.blueidea.com/img/icon/arrow.gif alt="A very cool JS menu effect_javascript skills" > 21世纪","http://www.21cn.com/","_blank") CoolMenu2.insertmenu("2","<img src=http://www.blueidea.com/img/icon/arrow.gif alt="A very cool JS menu effect_javascript skills" > 游侠网","http://www.ali213.net/","_blank") CoolMenu3.insertmenu("0","<img src=http://bbs.dvbbs.net/Skins/Default/nofollow.gif alt="A very cool JS menu effect_javascript skills" > 树形菜单","","") CoolMenu3.insertmenu("0","<img src=http://www.blueidea.com/img/common/logo.gif alt="A very cool JS menu effect_javascript skills" > ","http://www.blueidea.com/","_blank") CoolMenu3.insertmenu("1","关于X-Menu菜单","javascript:alert(about[0])","") CoolMenu3.insertmenu("1","关于作者","javascript:alert(about[1])","") CoolMenu3.insertmenu("1","联系我","mailto:PuterJam@etang.com","") CoolMenu3.insertmenu("1","你的浏览器版本","javascript:alert(navigator.appName)","") </script>[Ctrl A select all Note: <script>CoolMenu1.init("CoolMenu1","#002000","#38FFff",0.1,15)</script>If you need to introduce external Js, you need to refresh to execute <script>CoolMenu2.init("CoolMenu2","#002000","#00FF80",0.2,10)</script>]<script>CoolMenu3.init("CoolMenu3","#002000","#f0FF00",0.3,25)</script>
Related labels:
source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template