- 教程-java

[菜单类特效]-带有滑动效果的菜单1

12380178@qq.com(wzgirl) — Thu,26 Jan 2006 23:55:56 +0800

非常棒的菜单效果，有点FLASH的味道，上个版本的页面中，曾用过这个效果，那时向偶要代码的人粉多哦。所以现在提供下载。
相关图片下载:

查看效果图:

复制CSS到head

程序代码

BODY
A:link {TEXT-DECORATION: none}
A:hover {BORDER-BOTTOM: #000000 2px dotted}
A {TEXT-DECORATION: none}
A {cursor:e-resize}

.alpha {
FILTER: Alpha(Opacity=80)
}
.td1 {
FONT-SIZE: 10px; font-family: "tahoma"}
.td2 {
FONT-SIZE: 10px; CURSOR: hand; BACKGROUND-COLOR: #98CCC9
; font-family: "tahoma"}
.maskl {
OVERFLOW: hidden
}
.cardtitle {
BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; FONT-SIZE: 10px; BORDER-LEFT: black 0px solid; CURSOR: default; TEXT-INDENT: 4pt; BORDER-BOTTOM: black 0px solid
; font-family: "tahoma"}
.cardbottom {
BORDER-RIGHT: black 1px solid; BORDER-TOP: black 0px solid; FILTER: Alpha(Opacity=90); BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid; BACKGROUND-COLOR: #ffffff
}

其中.td1和.td2是控制鼠标滑过菜单时出现的背景色横条的。.cardtitle和.cardbottom是控制选项卡的颜色和边框的

接着复制代码到之间

程序代码

//用数组来存储多个timeOut标识.
tBack=new Array(6);
tOut=new Array(6);
//激活当前选项卡.
function menuOut(whichMenu){
var curMenu=eval("menu"+whichMenu);
curMenu.runtimeStyle.zIndex=6;
clearTimeout(tBack[whichMenu]);
moveOut(whichMenu);
}
//恢复初始状态.
function menuBack(whichMenu){
var curMenu=eval("menu"+whichMenu);
curMenu.runtimeStyle.zIndex=curMenu.style.zIndex;
clearTimeout(tOut[whichMenu]);
moveBack(whichMenu);
}
//移动当前选项卡
function moveOut(curNum){
var curMenu=eval("menu"+curNum);
if(curMenu.style.posLeft>0) {
  curMenu.style.posLeft-=2;
  tOut[curNum]=setTimeout("moveOut('"+curNum+"')",1);
  }
}
//移回选项卡.
function moveBack(curNum){
var curMenu=eval("menu"+curNum);
if(curMenu.style.posLeft<30) {
  curMenu.style.posLeft+=2;
  tBack[curNum]=setTimeout("moveBack('"+curNum+"')",1);
  }

}
//鼠标移过时改变表格单元式样。
function swapClass(){
var o=event.srcElement;
if(o.className=="td1") o.className="td2"
  else if(o.className=="td2") o.className="td1";
}
document.onmouseover=swapClass;
document.onmouseout=swapClass;

如文字提示，如果增加选项卡的数量，则只需要增加数组的数字即可，比如现在是tBack=new Array(6);tOut=new Array(6);就代表有六个选项卡

复制代码到body

程序代码

style="Z-INDEX: 1; LEFT: 12px; WIDTH: 132px; POSITION: absolute; TOP: 14px; HEIGHT: 236px">
  style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 0px; HEIGHT: 20px"
onmouseout=menuBack(1)>
style="Z-INDEX: 1; LEFT: 0px; WIDTH: 100px; POSITION: absolute; TOP: 17px; HEIGHT: 115px">


    option1

    option2

    option3

    option4

          width=14>
    height=14>MENUCARD1

style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 20px; HEIGHT: 20px"
onmouseout=menuBack(2)>
style="Z-INDEX: 1; LEFT: 0px; WIDTH: 100px; POSITION: absolute; TOP: 17px; HEIGHT: 115px">


    option1

    option2

    option3

    option4




          width=14>
    height=14>MENUCARD2

style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 40px; HEIGHT: 20px"
onmouseout=menuBack(3)>
style="Z-INDEX: 1; LEFT: 0px; WIDTH: 100px; POSITION: absolute; TOP: 17px; HEIGHT: 115px">


    option1

    option2

    option3

    option4




          width=14>
    height=14>MENUCARD3

style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 60px; HEIGHT: 20px"
onmouseout=menuBack(4)>
style="Z-INDEX: 1; LEFT: 0px; WIDTH: 100px; POSITION: absolute; TOP: 17px; HEIGHT: 115px">


    option1

    option2

    option3

    option4




          width=14>
    height=14>MENUCARD4

  style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 80px; HEIGHT: 134px"
onmouseout=menuBack(5)>
    style="Z-INDEX: 1; LEFT: 0px; WIDTH: 100px; POSITION: absolute; TOP: 17px; HEIGHT: 115px">


          option1


          option2


          option3


          option4








              width=14>
    height=14>MENUCARD5



就是单个选项卡的代码，如果是第七个选项卡，那么div的id就应该是menu7，后面的6都改成7,最后就是调整个层的距离，现在默认是距离20px，所以新的层中top值就应该增加20px，同时开头的

style="Z-INDEX: 1; LEFT: 12px; WIDTH: 132px; POSITION: absolute; TOP: 14px; HEIGHT: 236px"> 中的height也要相应增加20px，否则选项卡不会显示完全的.

[菜单类特效]-带有滑动效果的菜单

12380178@qq.com(wzgirl) — Thu,26 Jan 2006 23:49:07 +0800

比较喜欢这个菜单，可随意修改图片或者文字。

查看演示：./attachments/up/js/j014.htm
下载JS：

隐藏内容

该内容已经被作者隐藏,只有会员才允许查阅登录 | 注册

复制代码到之间

程序代码

.submenu {
Z-INDEX: 2; LEFT: 0px; VISIBILITY: hidden; WIDTH: 500px; POSITION: absolute; TOP: 69px; HEIGHT: 22px; BACKGROUND-COLOR: #eaeaea
}
a { font-family: "Tahoma"; font-size: 12px; color: #000000; text-decoration: none}
a:hover { font-family: "Tahoma"; font-size: 12px; color: #00CCFF; text-decoration: none}

修改body为以下代码

程序代码

复制代码到body

程序代码

      →
   菜单一 |
   菜单二 |
   菜单三 |       href="#">菜单四 |       href="#">菜单五 |       href="#">菜单六

    → 菜单一 |
   菜单二 |
   菜单三 |

    → 菜单一 |
   菜单二 |
   菜单三 |



    → 菜单一 |
   菜单二 |
   菜单三 |



    → 菜单一 |
   菜单二 |
   菜单三 |



    → 菜单一 |
   菜单二 |
   菜单三 |



    →菜单一 |
   菜单二 |
   菜单三 |



    → 菜单一 |
   菜单二 |
   菜单三 |


                onMouseOut="rollOut('m00');"
            href="#">
                onMouseOut="rollOut('m01');"
            href="#">
                onMouseOut="rollOut('m02');" href="#">
                onMouseOut="rollOut('m03');" href="#">
                onMouseOut="rollOut('m04');"
            href="#">
                onMouseOut="rollOut('m05');" href="#">
                onMouseOut="rollOut('m06');" href="#">
                onMouseOut="rollOut('m07');"
            href="#">

[菜单类特效]-渐变菜单

12380178@qq.com(wzgirl) — Thu,26 Jan 2006 23:46:43 +0800

这个效果网上也算比较流行的了，效果很普通但实用。

查看演示：./attachments/up/js/j013.htm

--------------------------------------------------------------------------------

在里插入

程序代码

在body里插入到你想要的显示位置

程序代码

[菜单类特效]-下拉菜单2

12380178@qq.com(wzgirl) — Thu,26 Jan 2006 23:43:49 +0800

下拉的菜单内容可修改成文字或者图片，这效果可用于一般的的菜单或者友情链接等地方。

查看演示：./attachments/up/js/j012.htm

--------------------------------------------------------------------------------

复制代码到

程序代码

.selectBdr {
BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: #000000 1px solid
}
.selectedText {
FONT-SIZE: 12px; OVERFLOW: hidden; WIDTH: 100%; TEXT-INDENT: 2px; HEIGHT: 14px
}
.listText {
FONT-SIZE: 12px; TEXT-INDENT: 2pt
}
.listText2 {
FONT-SIZE: 12px; TEXT-INDENT: 2pt; BACKGROUND-COLOR: #FFCCCC
}

复制代码到之间

程序代码

             l i n k

style="Z-INDEX: 2; LEFT: 0px; VISIBILITY: hidden; OVERFLOW: hidden; WIDTH: 163px; POSITION: absolute; TOP: 19px; HEIGHT: 166px"
onclick=doSelect()>
    style="Z-INDEX: 2; LEFT: 0px; WIDTH: 160px; POSITION: absolute; TOP: -160px">


                value="#" height="20">http://www.wzgirl.com/photo/pic/icon/20/4/next-2.gif" width="23" height="10">
            www.wzgirl.com


                value="#">http://www.wzgirl.com/photo/pic/icon/20/4/next-2.gif" width="23" height="10">
            www.wzgirl.com


          http://www.wzgirl.com/photo/pic/icon/20/4/next-2.gif" width="23" height="10">
            www.wzgirl.com


          http://www.wzgirl.com/photo/pic/icon/20/4/next-2.gif" width="23" height="10">
            www.wzgirl.com


          value="#" height="20">http://www.wzgirl.com/photo/pic/icon/20/4/next-2.gif" width="23" height="10">
            www.wzgirl.com


            value="#" height="20">http://www.wzgirl.com/photo/pic/icon/20/4/next-2.gif" width="23" height="10">
            www.wzgirl.com


    修改表格中的文字内容就可以了，别忘了修改value里的网址哟，呵呵

[菜单类特效]-下拉菜单

12380178@qq.com(wzgirl) — Thu,26 Jan 2006 23:41:03 +0800

菜单中可以用图片或者文字来展现菜单的内容。添加和更新起来也比较方便。虽然简单，但是有些重复，总体还是可以的.
添加下面代码到中

程序代码

.menutitle{
cursor:pointer;
margin-bottom: 5px;
background-color:#ECECFF;
color:#000000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}

.submenu{
margin-bottom: 0.5em;
}
a {  font-family: "Tahoma"; font-size: 10px; line-height: 14px; color: #999999; text-decoration: none}

if (document.getElementById){ //DynamicDrive.com change
document.write('\n')
document.write('.submenu{display: none;}\n')
document.write('\n')
}

function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
  if(el.style.display != "block"){ //DynamicDrive.com change
   for (var i=0; i    if (ar[i].className=="submenu") //DynamicDrive.com change
    ar[i].style.display = "none";
   }
   el.style.display = "block";
  }else{
   el.style.display = "none";
  }
}
}

添加如下代码到body，并按需要修改

程序代码

- www.sohu.com
- www.sina.com.cn

- www.163.com


- www.sohu.com
- www.sina.com.cn

- www.163.com


- www.sohu.com
- www.sina.com.cn

- www.163.com

[图片类特效]--图片以透明渐变轮番显示

12380178@qq.com(wzgirl) — Thu,26 Jan 2006 10:32:24 +0800

可以任意的定制增减图片的数量，显示的时候带点透明的渐变效果，动感十足，效果不错。

查看演示：./attachments/up/js/007.htm

复制代码到head

程序代码

// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000;
// Duration of crossfade (seconds)
var crossFadeDuration = 3;
// Specify the image files
var Pic = new Array();
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = '1.jpg'
Pic[1] = '2.jpg'
Pic[2] = '3.jpg'
Pic[3] = '4.jpg'
Pic[4] = '5.jpg'

// do not edit anything below this line
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}

修改body

程序代码

复制代码到之间

程序代码

[连接类效果]-点击文字链接时显示图片

12380178@qq.com(wzgirl) — Thu,26 Jan 2006 00:25:42 +0800

鼠标点击显示图片，具有透明的渐现，效果很棒。代码简单。

查看演示：

隐藏内容

该内容已经被作者隐藏,只有会员才允许查阅登录 | 注册

--------------------------------------------------------------------------------

复制代码到head

程序代码

把下面代码复制到

程序代码

点击此处

[鼠标类特效]-鼠标跟随物（带透明）

12380178@qq.com(wzgirl) — Thu,26 Jan 2006 00:23:18 +0800

鼠标跟随用到了透明，这样移动鼠标的时候因为图片透明的缘故，就有了慧尾的效果，渐变透明的尾巴跟在后面，效果不错。

查看演示：./attachments/up/js/j021.htm

--------------------------------------------------------------------------------

复制代码到head

程序代码

BODY {overflow: scroll; overflow-x: hidden;}

复制代码到body

程序代码

注明：

var trailLength = 8 // The length of trail (8 by default; put more for longer "tail")
var path = "cursor.gif" // URL of your image

在此处修改属性

[按钮类特效]-提交按钮的样式

12380178@qq.com(wzgirl) — Thu,26 Jan 2006 00:20:04 +0800

这个脚本可以定制over和out的背景图片,是不是很漂亮的说？把鼠标移到按纽上就可以看到哦！

查看演示：./attachments/up/js/j018.htm

--------------------------------------------------------------------------------

加代码到head

程序代码

把下面代码加入到css中去

程序代码

INPUT {
BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; COLOR: #000000; BORDER-BOTTOM: #000000 1px solid; BACKGROUND-COLOR: #adcede
}

修改from即可

程序代码

注意：记得修改上面的图片地址，否则是看不到效果的哦！

[连接类效果]-文字链接效果1

12380178@qq.com(wzgirl) — Thu,26 Jan 2006 00:15:49 +0800

当链接很多的时候,效果会很棒，颜色可在JS里修改。

查看演示：

隐藏内容

该内容已经被作者隐藏,只有会员才允许查阅登录 | 注册

加代码到之间

程序代码

下面代码加入

程序代码

温州女孩网站欢迎你！

                    温州女孩网站欢迎你！

                    温州女孩网站欢迎你！

                    温州女孩网站欢迎你！

                    温州女孩网站欢迎你！

更改链接，要注意，每个链接的name不能相同，要一次顺延下去，比如name＝a、name＝b.......