 |
|
訂閱
上一篇
返回
下一篇
一個JS選單效果
作者: nnickk 日期: 2006-02-03 07:01
第一步：實體化X-Menu
用法:
var <實體變量>.new CoolMenuControl()
第二步：建立選單項目---
用法:
<實體變量>.insertmenu(類型,Html程式碼,連接網址,目標)
類型：０代表選單標題，１代表樹狀選單子項目，２代表橫向選單子項目
Html程式碼：顯示在選單上的Html程式碼
連接網址：不用多說了，網址或Javascript腳本
目標：默認為空，即不在本頁打開；"_blank"代表在新的頁面打開
例如:
CoolMenu2.insertmenu("2","
新浪網","http://www.sina.com.cn/","_blank") 第三步：建立選單---
用法:
<實體變量>.init(實體變量名,邊框顏色,背景顏色,滑動速度,背景半透明度)
'實體變量名'必須與<實體變量>相同
如果背景颜色="transparent"即為完全透明
例如:
CoolMenu1.init("CoolMenu1","#002000","#38FFff",0.1,15)
完整程式碼如下：
CODE:
<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+"'></td></tr></table></div>";
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
+'</table></div>';
//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>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<style>
.b{color=#000066;cursor:hand}
.menu {
font-family:Arial;
cursor:Default;
font-size:12px;
border:1px #000000 solid;
border-collapse: collapse;
filter:progid:DXImageTransform.Microsoft.Gradient(gradienttype=0, startcolorstr=#ffffff, endcolorstr=#dddddd)
progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#cccccc,strength=3);
}
.ht{
font-weight:bold
}
</style>
<!--
第一步：實體化X-Menu類
用法:
var <實體變量>.new CoolMenuControl()
--->
<script language="javascript">
var CoolMenu1=new CoolMenuControl()
var CoolMenu2=new CoolMenuControl()
var CoolMenu3=new CoolMenuControl()
var about=new Array()
about[0]="關於X-Menu選單
Author:PuterJam
Copyright 2004
轉載請通知本人"
about[1]="關於作者
"這傢伙很懶，什麼也沒留下！！"
不歡迎大家和我交流Javascript
QQ:10644570
E-Mail:PuterJam@etang.com"
</script>
</head>
<body>
<!--
第二步：建立選單項目---
用法:
<實體變量>.insertmenu(類型,Html程式碼,連接網址,目標)
類型：０代表選單標題，１代表樹狀選單子項目，２代表橫向選單子項目
Html程式碼：顯示在選單上的Html程式碼
連接網址：不用多說了，網址或Javascript腳本
目標：默認為空，即不在本頁打開；"_blank"代表在新的頁面打開
例如:
CoolMenu2.insertmenu("2","<img src=http://www.blueidea.com/img/icon/arrow.gif> 新浪網","http://www.sina.com.cn/","_blank")
-->
<script>
CoolMenu1.insertmenu("0","歡迎使用X-Menu (選單範例)
<font style='font-weight:lighter;'>Made By PuterJam</font>","","")
CoolMenu1.insertmenu("0"," ","http://www.blueidea.com/","_blank")
CoolMenu2.insertmenu("0","<img src=http://bbs.dvbbs.net/Skins/Default/nofollow.gif> 橫向選單","","")
CoolMenu2.insertmenu("2","<img src=http://www.blueidea.com/img/icon/arrow.gif> 新浪網","http://www.sina.com.cn/","_blank")
CoolMenu2.insertmenu("2","<img src=http://www.blueidea.com/img/icon/arrow.gif> 我的雅虎","http://cn.yahoo.com/","_blank")
CoolMenu2.insertmenu("2","<img src=http://www.blueidea.com/img/icon/arrow.gif> 亿唐","http://www.etang.com/","_blank")
CoolMenu2.insertmenu("2","<img src=http://www.blueidea.com/img/icon/arrow.gif> 21世紀","http://www.21cn.com/","_blank")
CoolMenu2.insertmenu("2","<img src=http://www.blueidea.com/img/icon/arrow.gif> 遊俠網","http://www.ali213.net/","_blank")
CoolMenu3.insertmenu("0","<img src=http://bbs.dvbbs.net/Skins/Default/nofollow.gif> 樹狀選單","","")
CoolMenu3.insertmenu("0","<img src=http://www.blueidea.com/img/common/logo.gif> ","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>
<!--
第三步：建立選單---
用法:
<實體變量>.init(實體變量名,邊框顏色,背景顏色,滑動速度,背景半透明度)
'實體變量名'必須與<實體變量>相同
如果背景颜色="transparent"即為完全透明
例如:
CoolMenu1.init("CoolMenu1","#002000","#38FFff",0.1,15)
-->
<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>
</body>
<a href="http://www.blueidea.com/bbs/newsdetail.asp?id=1491981&page=1&posts=&Daysprune=&lp=1" target="_blank">資料來源</a>
另外一種
CODE:
<html>
<head>
<title>Link Style01 - Cocoon Studio</title>
<SCRIPT LANGUAGE="JavaScript">
CocoonStudio = function(){}
CocoonStudio.DHtml = function(){}
CocoonStudio.DHtml.LinkStyle01 = function(){}
CocoonStudio.DHtml.LinkStyle01.TemplteDiv = document.createElement("DIV");
with(CocoonStudio.DHtml.LinkStyle01.TemplteDiv){
with(style){
position = "absolute"; display = "none"; width = height = 0;
backgroundColor = "#80FF00"; border = "1px solid #008000"; cursor = "hand";
filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=0,finishOpacity=0) BlendTrans(duration=1);";
}
}
CocoonStudio.DHtml.LinkStyle01.ActionCount = 10;
CocoonStudio.DHtml.LinkStyle01.SizeStep = 4;
CocoonStudio.DHtml.LinkStyle01.FadeStep = 10;
CocoonStudio.DHtml.LinkStyle01.Timer = new Array();
CocoonStudio.DHtml.LinkStyle01.Items = new Array();
CocoonStudio.DHtml.LinkStyle01.Initial = function(){
document.body.insertAdjacentElement("beforeEnd",CocoonStudio.DHtml.LinkStyle01.TemplteDiv);
}
CocoonStudio.DHtml.LinkStyle01.MouseOver = function(){
var o;
var iAddSize = this.ActionCount * this.SizeStep * 2;
var oSrc = event.srcElement;
var c = oSrc.sourceIndex;
with(o=CocoonStudio.DHtml.LinkStyle01.TemplteDiv.cloneNode(true)){
with(style){
display = ''; width = oSrc.scrollWidth + iAddSize; height = oSrc.scrollHeight + iAddSize;
pixelTop = oSrc.offsetTop - iAddSize / 2; pixelLeft = oSrc.offsetLeft - iAddSize / 2;
}
onclick = oSrc.click;
onmouseout = new Function("CocoonStudio.DHtml.LinkStyle01.FadeOut("+c+");");
}
CocoonStudio.DHtml.LinkStyle01.Items[c] = o;
document.body.insertAdjacentElement("beforeEnd",o);
this.FadeIn(c);
setTimeout("CocoonStudio.DHtml.LinkStyle01.FadeOut("+c+");" ,1500);
}
CocoonStudio.DHtml.LinkStyle01.FadeIn = function(c,n){
if(!c) return; var p = n; if(!p) p = 0;
var o = CocoonStudio.DHtml.LinkStyle01.Items[c]; if(!o) return;
with(o){
var iFade = filters[0].opacity;
if(iFade<=(100-this.FadeStep)) filters[0].opacity += this.FadeStep;
with(style){
width = parseInt(width) - this.SizeStep*2; height = parseInt(height) - this.SizeStep*2;
pixelTop += this.SizeStep; pixelLeft += this.SizeStep;
}
}
if(p>=this.ActionCount-3) return;
CocoonStudio.DHtml.LinkStyle01.Timer[c] = setTimeout("CocoonStudio.DHtml.LinkStyle01.FadeIn("+c+","+(++p)+");",50);
}
CocoonStudio.DHtml.LinkStyle01.FadeOut = function(c,n){
if(!c) return; var p = n; if(!p) p = this.ActionCount-1;
clearTimeout(CocoonStudio.DHtml.LinkStyle01.Timer[c]);
var o = CocoonStudio.DHtml.LinkStyle01.Items[c]; if(!o) return;
with(o){
var iFade = filters[0].opacity;
if(iFade>=this.FadeStep) filters[0].opacity -= this.FadeStep;
with(style){
width = parseInt(width) + this.SizeStep; height = parseInt(height) + this.SizeStep;
pixelTop -= this.SizeStep/2; pixelLeft -= this.SizeStep/2;
}
}
if(p<=1){ o.removeNode(true); p=0; return; }
setTimeout("CocoonStudio.DHtml.LinkStyle01.FadeOut("+c+","+(--p)+");",25);
}
window.onload = CocoonStudio.DHtml.LinkStyle01.Initial;
</SCRIPT>
<script language="JavaScript" event="onmousemove" for="CcLS02Menu">
CocoonStudio.DHtml.LinkStyle01.MouseOver();
</script>
<style>
body{
font-size: 9pt;
}
</style>
</head>
<body>
<a href="javascript:void(0);" onclick="alert(innerText)" onmouseover="CocoonStudio.DHtml.LinkStyle01.MouseOver()">Cocoon Studio</a>
<a href="javascript:void(0);" onclick="alert(innerText)" onmouseover="CocoonStudio.DHtml.LinkStyle01.MouseOver()">Sunrise_Chen</a>
<a href="javascript:void(0);" onclick="alert(innerText)" onmouseover="CocoonStudio.DHtml.LinkStyle01.MouseOver()">www.ccopus.com</a>
<p>
<a href="javascript:void(0);" onclick="alert(innerText)" onmouseover="CocoonStudio.DHtml.LinkStyle01.MouseOver()">Cocoon Asp Check</a>
<a href="javascript:void(0);" onclick="alert(innerText)" onmouseover="CocoonStudio.DHtml.LinkStyle01.MouseOver()">Cocoon Counter 6</a>
<a href="javascript:void(0);" onclick="alert(innerText)" onmouseover="CocoonStudio.DHtml.LinkStyle01.MouseOver()">Cocoon Disk Manager 4.5</a>
<a href="javascript:void(0);" onclick="alert(innerText)" onmouseover="CocoonStudio.DHtml.LinkStyle01.MouseOver()">Cocoon MS-Access DbAdmin 1.0</a>
</body>
</html>
還有一種
CODE:
<html>
<head>
<title>Link Style02 - Cocoon Studio</title>
<SCRIPT LANGUAGE="JavaScript">
CocoonStudio = function(){/* Published by Cocoon Studio. Url: www.ccopus.com */}
CocoonStudio.DHtml = function(){/* Author: Sunrise_Chen Email: sunrise_chen@msn.com */}
CocoonStudio.DHtml.LinkStyle02 = function(){/* CocoonStudio连接特效02 */}
CocoonStudio.DHtml.LinkStyle02.TemplteDiv = document.createElement("DIV");
CocoonStudio.DHtml.LinkStyle02.ActionCount = 8;
CocoonStudio.DHtml.LinkStyle02.SizeStep = 4;
CocoonStudio.DHtml.LinkStyle02.FadeStep = 5;
CocoonStudio.DHtml.LinkStyle02.FadeMax = 25;
CocoonStudio.DHtml.LinkStyle02.OffsetWidth = 16;
CocoonStudio.DHtml.LinkStyle02.OffsetHeight = 8;
CocoonStudio.DHtml.LinkStyle02.Timer = 0;
CocoonStudio.DHtml.LinkStyle02.ToX = 0;
CocoonStudio.DHtml.LinkStyle02.ToY = 0;
CocoonStudio.DHtml.LinkStyle02.CurrentX = 0;
CocoonStudio.DHtml.LinkStyle02.CurrentY = 0;
CocoonStudio.DHtml.LinkStyle02.StepWidth = 0;
CocoonStudio.DHtml.LinkStyle02.StepHeight = 0;
CocoonStudio.DHtml.LinkStyle02.IsMoving = false;
CocoonStudio.DHtml.LinkStyle02.Initial = function(){
with(CocoonStudio.DHtml.LinkStyle02.TemplteDiv){
with(style){
position = "absolute"; width = height = left = top = 0; display = "none";
backgroundColor = "#80FF00"; border = "1px solid #008000"; cursor = "hand";
filter = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)";
zIndex = -1;
}
}
document.body.insertAdjacentElement("beforeEnd",CocoonStudio.DHtml.LinkStyle02.TemplteDiv);
}
CocoonStudio.DHtml.LinkStyle02.MouseOver = function(sender){
with(CocoonStudio.DHtml.LinkStyle02){
var iAddSize = this.ActionCount * this.SizeStep * 2;
var oSrc = event.srcElement;
var o = CocoonStudio.DHtml.LinkStyle02.TemplteDiv;
this.CurrentX = o.offsetLeft; CurrentY = o.offsetTop;
ToX = event.x + document.body.scrollLeft - event.offsetX - (OffsetWidth / 2);
ToY = event.y + document.body.scrollTop - event.offsetY - (OffsetHeight / 2);
//StepWidth = 0.08*(ToX - CurrentX) ;
//StepHeight = 0.08*(ToY - CurrentY) ;
StepWidth = (ToX - CurrentX) / ActionCount ;
StepHeight = (ToY - CurrentY) / ActionCount ;
if(StepWidth>0) StepWidth = Math.ceil(StepWidth); else StepWidth = Math.floor(StepWidth);
if(StepHeight>0) StepHeight = Math.ceil(StepHeight); else StepHeight = Math.floor(StepHeight);
o.style.width = oSrc.scrollWidth + OffsetWidth;
o.style.height = oSrc.scrollHeight + OffsetHeight;
o.style.display = '';
oSrc.onmouseout = MouseOut;
//o.onmouseout = MouseOut;
//o.onclick = oSrc.click;
IsMoving = true;
FadeIn();
}
}
CocoonStudio.DHtml.LinkStyle02.MouseOut = function(){
with(CocoonStudio.DHtml.LinkStyle02){
if(IsMoving) return;
IsMoving = true;
FadeOut();
}
}
CocoonStudio.DHtml.LinkStyle02.FadeIn = function(){
with(CocoonStudio.DHtml.LinkStyle02){
with(TemplteDiv){
var iFade = filters[0].opacity;
if(iFade<=(this.FadeMax-this.FadeStep)) filters[0].opacity += this.FadeStep;
with(style){
pixelTop += this.StepHeight; pixelLeft += this.StepWidth;
if(Math.abs(pixelTop - this.ToY) <= Math.abs(this.StepHeight)) pixelTop = this.ToY;
if(Math.abs(pixelLeft - this.ToX) <= Math.abs(this.StepWidth)) pixelLeft = this.ToX;
if(pixelTop == this.ToY && pixelLeft == this.ToX && iFade >= this.FadeMax){
this.IsMoving = false;
return;
}
}
}
clearTimeout(Timer); Timer = setTimeout("CocoonStudio.DHtml.LinkStyle02.FadeIn()", 25);
}
}
CocoonStudio.DHtml.LinkStyle02.FadeOut = function(){
with(CocoonStudio.DHtml.LinkStyle02){
with(TemplteDiv){
var iFade = filters[0].opacity;
if(iFade>=FadeStep) filters[0].opacity -= FadeStep;
else{
CocoonStudio.DHtml.LinkStyle02.IsMoving = false;
filters[0].opacity = 0; style.display='none';
return;
}
}
clearTimeout(Timer); Timer = setTimeout("CocoonStudio.DHtml.LinkStyle02.FadeOut()",25);
}
}
window.onload = CocoonStudio.DHtml.LinkStyle02.Initial;
</SCRIPT>
<script language="JavaScript" event="onmouseover" for="CcLS02Menu">
CocoonStudio.DHtml.LinkStyle02.MouseOver(this);
</script>
<style>
body, td{
font-size: 9pt;
}
td{cursor: hand;}
</style>
</head>
<body>
<TABLE cellpadding=0 cellspacing=10>
<TR>
<TD id="CcLS02Menu"><a href="http://club.pchome.net/forum.php?topic=19">PCHOME.net Club - ASP</a></TD>
<TD><a href="http://www.ccopus.com" id="CcLS02Menu">Our Cocoon Studio</a></TD>
</TR>
<TR>
<TD id="CcLS02Menu">Sunrise_Chen</TD>
<TD id="CcLS02Menu" onclick="alert('我的工作室')">Cocoon Studio</TD>
</TR>
<TR>
<TD id="CcLS02Menu">Cocoon Counter 6</TD>
<TD id="CcLS02Menu">Cocoon asp 探针</TD>
</TR>
<TR>
<TD id="CcLS02Menu">PCHOME.net Club - ASP</TD>
<TD id="CcLS02Menu" id="CcLS02Menu"></TD>
</TR>
<TR>
<TD id="CcLS02Menu">
这是一个单元格
</TD>
<TD>
<a id="CcLS02Menu" href="javascript:alert('Welcome to our Cocoon Studio');">这是一个连接</a>
</TD>
</TR>
<TR>
<TD><div id="CcLS02Menu">这是一个DIV</div></TD>
<TD><STRONG id="CcLS02Menu">这是一个STRONG标签</STRONG></TD>
</TR>
</TABLE>
<div style="position:absolute;top:200;left:200;width:200;text-align:center;cursor:hand;border:1px solid gray" id="CcLS02Menu">这是一个浮动的层</div>
</body>
</html>
資料來源
引用通告地址:
點擊獲取引用地址
廣告專區：
收入網摘
部落格上的這一天
發表評論
