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

2023-03-06 14:00:02JavaScript029

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

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 XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Semiall.com</title>

#index_yp {

width: 240px

height: 300px

float: left

border: 1px solid #71B3C6

}

.index_yp_card {

width: 225px

height: 33px

float: left

padding-left: 15px

}

.yp_card_0 {

width: 70px

height: 33px

float: left

text-align: center

color: #003366

font-weight: bold

line-height: 32px

cursor: pointer

}

.yp_card_1 {

width: 71px

height: 33px

float: left

background-position: 0px 2px

background-repeat: no-repeat

text-align: center

color: #333333

line-height: 32px

cursor: pointer

}

.yp_card_2 {

float: left

height: 33px

background-position: 0px 2px

background-repeat: no-repeat

}

.index_yp_main {

width: 240px

height: 270px

float: left

}

.yp_main_content {

width: 201px

height: 33px

float: left

border: 1px solid #BCDCE4

background-color: #F1F8FA

margin-bottom: 7px

padding: 3px 6px 3px 6px

overflow: hidden

}

.yp_main_content dt {

width: 201px

height: 13px

float: left

font-weight: normal

margin: 0px

font-size: 12px

padding-top: 2px

}

.yp_main_content dd {

width: 201px

line-height: 13px

float: left

font-weight: normal

margin: 0px

font-size: 12px

padding-top: 3px

text-align: right

}

.yp_main_content img {

padding: 0px 0px 2px 3px

}

.yp_main_list {

width: 215px

float: left

}

</style>

</head>

<body>

</div>

<tr>

<td>

</div>

</div>

</div>

11111111111111

</div>

<p>

if(9>=1){

SwapPaiHangShopDiv('DivShopPaiHangFlag1','1')

}

</script>

</p>

</td>

</tr>

</table>

</div>

</div>

<div onmouseover="changeMc(2,2)" class="index_yp_main">生产(sdf

dsfsd

)</div>

</div>

</div>

</div>

</div>

<!--

var s=3

var timer

function changeMc(x,y){

if (x!=y){

document.getElementById('yp_card'+x).style.display = "none"

document.getElementById('yp_card'+y).style.display = "block"

s=y

}

-->

</script>

</body>

</html>

#mainMenu{

background-color: #FFF/* Background color of main menu */

font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif/* Fonts of main menu items */

font-size:1.2em/* Font size of main menu items */

border-bottom:1px solid #000000/* Bottom border of main menu */

height:30px/* Height of main menu */

position:relative/* Don't change this position attribute */

visibility: hidden

}

#mainMenu a{

padding-left:20px/* Spaces at the left of main menu items */

padding-right:20px/* Spaces at the right of main menu items */

font-weight: bold

/* Don't change these two options */

position:absolute

bottom:-1px

}

#submenu{

font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif/* Font of sub menu items */

background-color:#E2EBED/* Background color of sub menu items */

visibility: hidden

width:778px/* Don't change this option */

}

html>body #clearmenu{ /* non IE browsers menu bottom spacing */

margin-bottom: 2px

}

#submenu div{

white-space:nowrap/* Don't change this option */

}

Style attributes of active menu item

#mainMenu .activeMenuItem{

/* Border options */

border-left:1px solid #000000

border-top:1px solid #000000

border-right:1px solid #000000

background-color: #E2EBED/* Background color */

cursor:pointer/* Cursor like a hand when the user moves the mouse over the menu item */

}

Style attributes of inactive menu items

#mainMenu .inactiveMenuItem{

color: #000/* Text color */

cursor:pointer/* Cursor like a hand when the user moves the mouse over the menu item */

}

#submenu a{

text-decoration:none/* No underline on sub menu items - use text-decoration:underlineif you want the links to be underlined */

padding-left:5px/* Space at the left of each sub menu item */

padding-right:5px/* Space at the right of each sub menu item */

color: #000/* Text color */

}

#submenu a:hover{

color: #FF0000/* Red color when the user moves the mouse over sub menu items */

}

</style>

//more javascript from http://www.smallrain.net

var topMenuSpacer = 15// Horizontal space(pixels) between the main menu items

var activateSubOnClick = false// if true->Show sub menu items on click, if false, show submenu items onmouseover

var leftAlignSubItems = false // left align sub items t

var activeMenuItem = false// Don't change this option. It should initially be false

var activeTabIndex = 0// Index of initial active tab (0 = first tab) - If the value below is set to true, it will override this one.

var rememberActiveTabByCookie = true// Set it to true if you want to be able to save active tab as cookie

These cookie functions are downloaded from

http://www.mach5.com/support/analyzer/manual/html/General/CookiesJavaScript.htm

function Get_Cookie(name) {

var start = document.cookie.indexOf(name+"=")

var len = start+name.length+1

if ((!start) &&(name != document.cookie.substring(0,name.length))) return null

if (start == -1) return null

var end = document.cookie.indexOf("",len)

if (end == -1) end = document.cookie.length

return unescape(document.cookie.substring(len,end))

}

// This function has been slightly modified

function Set_Cookie(name,value,expires,path,domain,secure) {

expires = expires * 60*60*24*1000

var today = new Date()

var expires_date = new Date( today.getTime() + (expires) )

var cookieString = name + "=" +escape(value) +

( (expires) ? "expires=" + expires_date.toGMTString() : "") +

( (path) ? "path=" + path : "") +

( (domain) ? "domain=" + domain : "") +

( (secure) ? "secure" : "")

document.cookie = cookieString

}

function showHide()

{

if(activeMenuItem){

activeMenuItem.className = 'inactiveMenuItem'

var theId = activeMenuItem.id.replace(/[^\d]/g,'')

document.getElementById('submenu_'+theId).style.display='none'

}

activeMenuItem = this

this.className = 'activeMenuItem'

var theId = this.id.replace(/[^\d]/g,'')

document.getElementById('submenu_'+theId).style.display='block'

if(rememberActiveTabByCookie){

Set_Cookie('dhtmlgoodies_tab_menu_tabIndex','index: ' + (theId-1),100)

}

function initMenu()

{

var mainMenuObj = document.getElementById('mainMenu')

var subMenuObj = document.getElementById('submenu')//DD added line

mainMenuObj.style.visibility=subMenuObj.style.visibility="visible" //DD added line

var menuItems = mainMenuObj.getElementsByTagName('A')

if(document.all){

mainMenuObj.style.visibility = 'hidden'

document.getElementById('submenu').style.visibility='hidden'

}

if(rememberActiveTabByCookie){

var cookieValue = Get_Cookie('dhtmlgoodies_tab_menu_tabIndex') + ''

cookieValue = cookieValue.replace(/[^\d]/g,'')

if(cookieValue.length>0 &&cookieValue<menuItems.length){

activeTabIndex = cookieValue/1

}

var currentLeftPos = 15

for(var no=0no<menuItems.lengthno++){

if(activateSubOnClick)menuItems[no].onclick = showHideelse menuItems[no].onmouseover = showHide

menuItems[no].id = 'mainMenuItem' + (no+1)

menuItems[no].style.left = currentLeftPos + 'px'

currentLeftPos = currentLeftPos + menuItems[no].offsetWidth + topMenuSpacer

if(no==activeTabIndex){

menuItems[no].className='activeMenuItem'

activeMenuItem = menuItems[no]

}else menuItems[no].className='inactiveMenuItem'

if(!document.all)menuItems[no].style.bottom = '-1px'

}

var mainMenuLinks = mainMenuObj.getElementsByTagName('A')

var subCounter = 1

var parentWidth = mainMenuObj.offsetWidth

while(document.getElementById('submenu_' + subCounter)){

var subItem = document.getElementById('submenu_' + subCounter)

if(leftAlignSubItems){

// No action

}else{

var leftPos = mainMenuLinks[subCounter-1].offsetLeft

document.getElementById('submenu_'+subCounter).style.paddingLeft = leftPos + 'px'

subItem.style.position ='absolute'

if(subItem.offsetWidth >parentWidth){

leftPos = leftPos - Math.max(0,subItem.offsetWidth-parentWidth)

}

subItem.style.paddingLeft = leftPos + 'px'

subItem.style.position ='static'

}

if(subCounter==(activeTabIndex+1)){

subItem.style.display='block'

}else{

subItem.style.display='none'

}

subCounter++

}

if(document.all){

mainMenuObj.style.visibility = 'visible'

document.getElementById('submenu').style.visibility='visible'

}

document.getElementById('submenu').style.display='block'

}

window.onload = initMenu

</script>

</div>

</div>

<a href="http://www.smallrain.net/plug.asp?type=DreamWeaver插件">DreamWeaver插件</a>

<a href="http://www.smallrain.net/plug.asp?type=PhotoShop插件">PhotoShop插件</a>

<a href="http://www.smallrain.net/plug.asp?type=FLASH组件">FLASH组件</a>

</div>

<a href="http://www.smallrain.net/study.asp?type=多媒体制作">多媒体制作</a>

</div>

</div>

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

# 上一篇：R语言建模参数初始值

# 下一篇：苹果电脑怎么截图

推荐阅读

热门文章

最新发布

标签列表

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

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