WEB开发网
开发学院网页设计JavaScript 卷帘一样的文字显示效果,为你的网页增加不少生色... 阅读

卷帘一样的文字显示效果,为你的网页增加不少生色哦!

 2007-11-27 17:56:04 来源:WEB开发网   
核心提示:<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Transitional//EN><HTML><HEAD><TITLE>卷帘一样的文字显示效果,为你的网页增加不少生色哦!</TITLE><STYLE>.a1 &

<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Transitional//EN>
<HTML><HEAD><TITLE>卷帘一样的文字显示效果,为你的网页增加不少生色哦!</TITLE>
<STYLE>.a1 {
 COLOR: #000080; FONT-FAMILY: ms sans-serif; TEXT-DECORATION: none
}
.a1:hover {
 CURSOR: hand; COLOR: #ff2200; FONT-FAMILY: ms sans-serif; TEXT-DECORATION: none
}
.a2 {
 COLOR: #000080; FONT-FAMILY: ms sans-serif; TEXT-DECORATION: none
}
.a2:hover {
 CURSOR: hand; COLOR: #ff2200; FONT-FAMILY: ms sans-serif; TEXT-DECORATION: underline
}
DIV.clTopMenu {
 Z-INDEX: 31; VISIBILITY: hidden; WIDTH: 80px; CLIP: rect(0px 80px 14px 0px); POSITION: absolute; HEIGHT: 150px; BACKGROUND-COLOR: #eeeeee; layer-background-color: #EEEEEE
}
DIV.clTopMenuBottom {
 Z-INDEX: 2; WIDTH: 80px; CLIP: rect(0px 80px 3px 0px); POSITION: absolute; TOP: 21px; HEIGHT: 3px; BACKGROUND-COLOR: #cecfce; layer-background-color: #CECFCE
}
DIV.clTopMenuText {
 FONT-SIZE: 11px; Z-INDEX: 1; LEFT: 5px; WIDTH: 80px; FONT-FAMILY: arial,helvetica; POSITION: absolute; TOP: 21px; BACKGROUND-COLOR: #eeeeee
}
</STYLE>

<SCRIPT>
/********************************************************************************
Copyright (C) 1999 Thomas Brattli
This script is made by and copyrighted to Thomas Brattli at www.bratta.com
********************************************************************************
Browsercheck:*/
ie=document.all?1:0
n=document.layers?1:0
//How many menus do you have? (remember to copy and add divs in the body if you add menus)
var numberOfMenus=1
//The width on the menus (set the width in the stylesheet as well)
var mwidth=90
//Pixels between the menus
var pxBetween=10
//The first menus left position
var fromLeft=120
//The top position of the menus
var fromTop=300
//The bgColor of the bottom mouseover div
var bgColor=#CECFCE
//The bgColor to change to
var bgColorChangeTo=#6380BC
//The position the mouseover line div will stop at when going up!
var imageHeight=21
/***************************************************************************
Do not change anything below this line!
****************************************************************************/
//Object constructor
function makeNewsMenu(obj,nest){
 nest=(!nest) ? :document.+nest+.   
 this.css=(n) ? eval(nest+document.+obj):eval(document.all.+obj+.style) 
 this.scrollHeight=n?this.css.document.height:eval(document.all.+obj+.offsetHeight)
 this.moveIt=b_moveIt;this.bgChange=b_bgChange;
 this.slideUp=b_slideUp; this.slideDown=b_slideDown;
 this.clipTo=b_clipTo;
   this.obj = obj + Object;  eval(this.obj + =this) 
}
//Objects methods
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y}
function b_bgChange(color){if(ie) this.css.backgroundColor=color; else this.css.bgColor=color}
function b_clipTo(t,r,b,l){
 if(n){this.css.clip.top=t; this.css.clip.right=r; this.css.clip.bottom=b; this.css.clip.left=l
 }else this.css.clip=rect(+t+,+r+,+b+,+l+);
}
function b_slideUp(ystop,moveby,speed,fn,wh){
 if(!this.slideactive){
 if(this.y>ystop){
  this.moveIt(this.x,this.y-5); eval(wh)
  setTimeout(this.obj+.slideUp(+ystop+,+moveby+,+speed+,+fn+,+wh+),speed)
 }else{
  this.slideactive=false; this.moveIt(0,ystop); eval(fn)
 }
 }
}
function b_slideDown(ystop,moveby,speed,fn,wh){
 if(!this.slideactive){
 if(this.y<ystop){
  this.moveIt(this.x,this.y+5); eval(wh)
  setTimeout(this.obj+.slideDown(+ystop+,+moveby+,+speed+,+fn+,+wh+),speed)
 }else{
  this.slideactive=false; this.moveIt(0,ystop); eval(fn)
 }
 }
}
//Initiating the page, making cross-browser objects
function newsMenuInit(){
 oTopMenu=new Array()
 for(i=0;i<=numberOfMenus;i++){
 oTopMenu[i]=new Array()
 oTopMenu[i][0]=new makeNewsMenu(divTopMenu+i)
 oTopMenu[i][1]=new makeNewsMenu(divTopMenuBottom+i,divTopMenu+i)
 oTopMenu[i][2]=new makeNewsMenu(divTopMenuText+i,divTopMenu+i)
 oTopMenu[i][1].moveIt(0,imageHeight)
 oTopMenu[i][0].clipTo(0,mwidth,imageHeight+3,0)
 oTopMenu[i][0].moveIt(i*mwidth+fromLeft+(i*pxBetween),fromTop)
 oTopMenu[i][0].css.visibility=visible
 }
}
//Moves the menu
function topMenu(num){
 if(oTopMenu[num][1].y==imageHeight) oTopMenu[num][1].slideDown(oTopMenu[num][2].scrollHeight+20,10,40,oTopMenu[+num+][0].clipTo(0,mwidth,oTopMenu[+num+][1].y+3,0),oTopMenu[+num+][0].clipTo(0,mwidth,oTopMenu[+num+][1].y+3,0))
 else if(oTopMenu[num][1].y==oTopMenu[num][2].scrollHeight+20) oTopMenu[num][1].slideUp(imageHeight,10,40,oTopMenu[+num+][0].clipTo(0,mwidth,oTopMenu[+num+][1].y+3,0),oTopMenu[+num+][0].clipTo(0,mwidth,oTopMenu[+num+][1].y+3,0))
}
//Changes background onmouseover
function menuOver(num){oTopMenu[num][1].bgChange(bgColorChangeTo)}
function menuOut(num){oTopMenu[num][1].bgChange(bgColor)}
//Calls the init function onload
onload=newsMenuInit;
</SCRIPT>
</head>

<body bgcolor=#FFFFFF text=#000000>
 <DIV class=clTopMenu id=divTopMenu0><A onmouseover=menuOver(0)
       onclick=topMenu(0); if(ie)this.blur(); return false
       onmouseout=menuOut(0)
       href=#><IMG alt=
       src=http://www.chinageren.com/chengxu/Javascript/logo.gif
       width=86 align=top border=0></A>
       <DIV class=clTopMenuText id=divTopMenuText0
       style=WIDTH: 75px; HEIGHT: 112px>欢迎访问无忧脚本 <A
       href=51JS.COM>http://www.51js.com>51JS.COM </A>  </DIV>
       <DIV class=clTopMenuBottom id=divTopMenuBottom0></DIV></DIV>
       <DIV class=clTopMenu id=divTopMenu1><A onmouseover=menuOver(1)
       onclick=topMenu(1); if(ie)this.blur(); return false
       onmouseout=menuOut(1)
       href=#><IMG
      alt=
       src=http://www.chinageren.com/chengxu/Javascript/logo.gif
       width=86 align=top border=0></A>
       <DIV class=clTopMenuText id=divTopMenuText1
       style=WIDTH: 75px; HEIGHT: 112px>把我们的网站加入了收藏夹没有呢? <A
       href=#>51JS.COM</A> 也可要记得我们的网址啊 51JS.COM! </DIV>
       <DIV class=clTopMenuBottom id=divTopMenuBottom1></DIV></DIV>
      

</body>
</html>

Tags:卷帘 一样 文字

编辑录入:coldstar [复制链接] [打 印]
赞助商链接