JS特效代码--一个很Cool的JS菜单效果

JavaScript025

JS特效代码--一个很Cool的JS菜单效果,第1张

<script>

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

<script language="JavaScript">

<!-- Hide the script from old browsers --

function compute(obj) //定义一个函数 名字叫compute 他接收了一个参数 obj

{obj.expr.value = eval(obj.expr.value)} //当前的参数的值和下文参数值所用的方法相同

var one = '1' //定义一个字符型的1

var two = '2' //定义一个字符型的2

var three = '3' //定义一个字符型的3

var four = '4' //定义一个字符型的4

var five = '5' //定义一个字符型的5

var six = '6' //定义一个字符型的6

var seven = '7' //定义一个字符型的7

var eight = '8' //定义一个字符型的8

var nine = '9' //定义一个字符型的9

var zero = '0' //定义一个字符型的0

var plus = '+' //定义一个字符型的+

var minus = '-' //定义一个字符型的*

var multiply = '*' //定义一个字符型的*

var divide = '/' //定义一个字符型的/

var decimal = '.' //定义一个字符型的.

function enter(obj, string) //定义一个函数 名字叫enter 他接收了一个参数 obj

{obj.expr.value += string} //让 obj的值加上 '+'后面的值

function clear(obj) //定义一个函数 名字叫clear 他接收了一个参数 obj

{obj.expr.value = ''} //让obj的值等于空

// --End Hiding Here -->

</script>

<form name="calc">

<table border=1>

<td colspan=4><input type="text" name="expr" size=30 action="compute(this.form)"><tr>

<!--提交表单-->

<td><input type="button" value=" 7 " onClick="enter(this.form, seven)"><!--当鼠标点击

按钮的时候提交给函数按钮中的值-->

<td><input type="button" value=" 8 " onClick="enter(this.form, eight)"><!--当鼠标点击

按钮的时候提交给函数按钮中的值-->

<td><input type="button" value=" 9 " onClick="enter(this.form, nine)"><!--当鼠标点击

按钮的时候提交给函数按钮中的值-->

<td><input type="button" value=" / " onClick="enter(this.form, divide)"><!--当鼠标点

击按钮的时候提交给函数按钮中的值-->

<tr><td><input type="button" value=" 4 " onClick="enter(this.form, four)"><!--当鼠标

点击按钮的时候提交给函数按钮中的值-->

<td><input type="button" value=" 5 " onClick="enter(this.form, five)"><!--当鼠标点击

按钮的时候提交给函数按钮中的值-->

<td><input type="button" value=" 6 " onClick="enter(this.form, six)"><!--当鼠标点击按

钮的时候提交给函数按钮中的值-->

<td><input type="button" value=" * " onClick="enter(this.form, multiply)"><!--当鼠标

点击按钮的时候提交给函数按钮中的值-->

<tr><td><input type="button" value=" 1 " onClick="enter(this.form, one)"><!--当鼠标点

击按钮的时候提交给函数按钮中的值-->

<td><input type="button" value=" 2 " onClick="enter(this.form, two)"><!--当鼠标点击按

钮的时候提交给函数按钮中的值-->

<td><input type="button" value=" 3 " onClick="enter(this.form, three)"><!--当鼠标点击

按钮的时候提交给函数按钮中的值-->

<td><input type="button" value=" - " onClick="enter(this.form, minus)"><!--当鼠标点

击按钮的时候提交给函数按钮中的值-->

<tr><td colspan=2><input type="button" value=" 0 " onClick="enter

(this.form, zero)"><!--当鼠标点击按钮的时候提交给函数按钮中的值-->

<td><input type="button" value=" . " onClick="enter(this.form, decimal)"><!--当鼠标

点击按钮的时候提交给函数按钮中的值-->

<td><input type="button" value=" + " onClick="enter(this.form, plus)"><!--当鼠标点击

按钮的时候提交给函数按钮中的值-->

<tr><td colspan=2><input type="button" value=" = " onClick="compute(this.form)"><!

--提交表单在javascript中进行运算-->

<td colspan=2><input type="button" value="AC" size= 3 onClick="clear(this.form)"><!--

点击此按钮调用此函数-->

</table>

</form>