代码封装完成啦
在这里谢谢大家对我的支持！
偶参照一些Flash站点的菜单,
用javascript仿了一个,效果还是挺Cool的.
简单地写一个使用说明:
第一步：实体化X-Menu类
用法:
var .new CoolMenuControl()
第二步：建立菜单项目---
用法:
.insertmenu(类型,Html代码,链接网址,目标)
类型：０代表菜单标题，１代表树型菜单子项目，２代表横向菜单子项目
Html代码：显示在菜单上的Html代码
链接网址：不用多说了，网址或Javascript脚本
目标：默认为空，既不在本页打开；"_blank"代表在新的页面打开
例如:
CoolMenu2.insertmenu("2","![一个很Cool的JS菜单效果_javascript技巧]()
新浪网","http://www.sina.com.cn/","_blank")
第三步：建立菜单---
用法:
.init(实体变量名,边框颜色,背景颜色,滑动速度,背景半透明度)
'实体变量名'必须与相同
如果背景颜色="transparent"既为完全透明
例如:
CoolMenu1.init("CoolMenu1","#002000","#38FFff",0.1,15)
";
document.write(suspendcode);
var fcell=true
for (i=0;i
'+this.menuarray[i].value
}
else
{
inhtml+=' |
| '+this.menuarray[i].value
}
fcell=true
break;
case "1":
t=(cellcount-1)*2
if (t |
|
'+this.menuarray[i].value
}
else
{
inhtml+=' |
|
'+this.menuarray[i].value
}
fcell=true
break;
case "2":
if (fcell)
{
inhtml+=' |
|
'+this.menuarray[i].value;
fcell=false
}
else
{
inhtml+=' |
|
'+this.menuarray[i].value;
}
break;
}
}
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>
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="一个很Cool的JS菜单效果_javascript技巧" > 横向菜单","","")
CoolMenu2.insertmenu("2","<img src=http://www.blueidea.com/img/icon/arrow.gif alt="一个很Cool的JS菜单效果_javascript技巧" > 新浪网","http://www.sina.com.cn/","_blank")
CoolMenu2.insertmenu("2","<img src=http://www.blueidea.com/img/icon/arrow.gif alt="一个很Cool的JS菜单效果_javascript技巧" > 我的雅虎","http://cn.yahoo.com/","_blank")
CoolMenu2.insertmenu("2","<img src=http://www.blueidea.com/img/icon/arrow.gif alt="一个很Cool的JS菜单效果_javascript技巧" > 亿唐","http://www.etang.com/","_blank")
CoolMenu2.insertmenu("2","<img src=http://www.blueidea.com/img/icon/arrow.gif alt="一个很Cool的JS菜单效果_javascript技巧" > 21世纪","http://www.21cn.com/","_blank")
CoolMenu2.insertmenu("2","<img src=http://www.blueidea.com/img/icon/arrow.gif alt="一个很Cool的JS菜单效果_javascript技巧" > 游侠网","http://www.ali213.net/","_blank")
CoolMenu3.insertmenu("0","<img src=http://bbs.dvbbs.net/Skins/Default/nofollow.gif alt="一个很Cool的JS菜单效果_javascript技巧" > 树形菜单","","")
CoolMenu3.insertmenu("0","<img src=http://www.blueidea.com/img/common/logo.gif alt="一个很Cool的JS菜单效果_javascript技巧" > ","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>
<script>CoolMenu1.init("CoolMenu1","#002000","#38FFff",0.1,15)</script>
<script>CoolMenu2.init("CoolMenu2","#002000","#00FF80",0.2,10)</script>
<script>CoolMenu3.init("CoolMenu3","#002000","#f0FF00",0.3,25)</script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
|
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
