全部

100分赠送想要这种 js 效果来者有分，分不够我再加1000分也可以，在线等急

神龙摆尾无拘束正量网科技有限公司项目经理 2009-03-30 10:44:33

想要这个js 效果，，，鼠标划过显示相应图片。
这个网站的效果：http://www.brown.edu/

分不够，我再加，1000分也可以。两天内揭帖
先谢了 ---

...全文

190 点赞收藏 20

写回复

20 条回复

切换为时间正序

当前发帖距今超过3年，不再开放新的回复

发表回复

神龙摆尾无拘束 2009-03-31

再次，感谢楼上的各位，我也会，尽我一份力，分担大家遇到的问题

回复赞

神龙摆尾无拘束 2009-03-31

已接的帖子不能加分啦，，，楼上的几位，，，实在抱歉，我刚刚知道这个规则

回复赞

skycc999 2009-03-30

大体差不多了，楼主再稍稍改改，应该能用！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>测试</title>

<script language="javascript">

var rand = 0;
var useRand = 0;
var imgnum = 1;

images = new Array;
images[1] = new Image();
images[1].src = "images/down01.png";
images[2] = new Image();
images[2].src = "images/up01.png";

var imgnum = images.length - 1;

function showtitle1(hideme)
{
var AX1=document.all(hideme);

do {
var randnum = Math.random();
rand = Math.round((imgnum - 1) * randnum) + 1;
} while (rand == useRand);
useRand = rand;

if(AX1.style.display=='none')
{
AX1.style.display = '';
tt1.src = images[1].src;

tt2.src = images[2].src;
AX2.style.display = 'none';
}
else
{

tt1.src = images[2].src;
AX1.style.display = 'none';
}

//tt1.src = images[useRand].src;
//AX1.style.display=AX1.style.display=="none"?"":"none"; //判断是否隐藏

}

function showtitle2(hideme2)
{
var AX2=document.all(hideme2);

do {
var randnum = Math.random();
rand = Math.round((imgnum - 1) * randnum) + 1;
} while (rand == useRand);
useRand = rand;

if(AX2.style.display=='none')
{
AX2.style.display = '';
tt2.src = images[1].src;

tt1.src = images[2].src;
AX1.style.display = 'none';
}
else
{

tt2.src = images[2].src;
AX2.style.display = 'none';

}

}

</script>

</head>

<body bottommargin="0" leftmargin="0" rightmargin="0" topmargin="0">

<table width="1024" height="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td width='1' bgcolor='#999999'></td>
<td align="center" valign="top" ><table width="75%" border="0">
<tr>
<td height="40"> </td>
</tr>
<tr onMouseOver="showtitle1('show1');">
<td align="left" valign="middle">
<input name="tt1" type="image" src="images/up01.png" width="16" height="16" border="0">标题11111111111111</td>
</tr>
<tr id="show1" style="display:none">
<td align="left" valign="top"><img src="http://www.brown.edu/web/images/windows/090325-0309-zubaida.jpg" alt="More about The Peter Green Lectures" width="765" height="170" /></td>
</tr>

<tr onMouseOver="showtitle2('show2');">
<td align="left" valign="middle">
<input name="tt2" type="image" src="images/up01.png" width="16" height="16" border="0">标题222222222222222</td>
</tr>
<tr id="show2" style="display:none">
<td align="left" valign="top"><img src="http://www.brown.edu/web/images/windows/090324-0903-Shepard_Krech_III.jpg" alt="More about Shepard Krech III" width="765" height="170" />
</td>
</tr>

<tr>
<td align="center" valign="bottom"><table width="100%" height="40%" border="0" cellpadding="0" cellspacing="0" bgcolor="3E73B7" >
<tr>
<td height="3 " align="center" bgcolor="#003399" class="foot_bg1"></td>
</tr>

</table>
</body>
</html>

回复赞

xrythy 2009-03-30

...很复杂

回复赞

inspurxin 2009-03-30

js控制div的属性display：none或者display：block就行了

回复赞

sjkof 2009-03-30



<script type="text/javascript">

        var record;

        function omo(id) {

            if (record != null) {

                document.getElementById(record).style.display = "none";

            }

            record = id;

            document.getElementById(id).style.display = "";

        }

    </script>

    <div>

        <div onmouseover="omo('google')" style="background-color:Fuchsia">google</div>

        <div id="google" style="display:none;"><img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" /></div>

        <div onmouseover="omo('baidu')" style="background-color:Lime">baidu</div>

        <div id="baidu" style="display:none;"><img src="http://www.baidu.com/img/baidu_logo.gif" /></div>

    </div>

回复赞

sjkof 2009-03-30

image不是动态加载的，而是一上来就加载了
它是放在一个div里，通过display:none; ->display:;来实现的

回复赞

simpledong 2009-03-30

楼主，你打开那个网站，然后保存所有网页内容，就可以看到现成的JS代码的啊
我刚才已经试过了，JS以及CSS代码都是可以看到的
参考着做就没有问题的：）

回复赞

神龙摆尾无拘束 2009-03-30

楼上的兄弟们，，我揭帖了。没给分的，明天加了分，在给补上，现在还不能加分，系统要一天后才行，，，谢谢啦

回复赞

lishxi 2009-03-30

接分
function showDialog(src)
{
var shadow = document.createElement("div");
var dialog = document.createElement("div");
shadow.setAttribute("id", "shadow");
dialog.setAttribute("id", "dialog");
dialog.onclick = hideDialog;

dialog.style.left=((document.documentElement.clientWidth-563)/2);
dialog.style.top=document.documentElement.scrollTop+(document.documentElement.clientHeight-450)/2;

shadow.style.width = document.body.scrollWidth;
shadow.style.height = document.body.scrollHeight;

var img = document.createElement("img");
img.setAttribute("src", src);
img.alt="点单关闭"

dialog.appendChild(img);

var page =document.body;

page.appendChild(shadow);
page.appendChild(dialog);

}
function hideDialog()
{
var page = document.body;
var shadow = $("shadow");
var dialog = $("dialog");
page.removeChild(shadow);
page.removeChild(dialog);
}

#dialog
{
position: absolute;
width: 563px;
height: 450px;
text-align: center;
background: #ffffff;
border: 1px #000 solid;
z-index: 999;
font-size: 12px;
}
#shadow
{
position: absolute;
left: 0;
top: 0;
background: #cccccc;
z-index: 998;
filter: alpha(opacity=80);
opacity: 0.8;
}

回复赞

seaman_xh 2009-03-30

他就是一个 tree，
把onclick改成onmouseover就行了，
把css控制好就行了

回复赞

神龙摆尾无拘束 2009-03-30

问题已经解决：
1：进入http://www.brown.edu/
2：文件另存为，保存的时候选择网页全部
3：保存的内容分为一个hmtl文件和，一个与html同名的文件夹，里面有相应的js

至此，js就得到了，，，一个完整的例子也得到了。。。
谢谢楼上的几位，揭帖

回复赞

adown 2009-03-30

这个效果和 js.alixixi.com网站上的一个名称叫（一款动感十足的div+css下滑导航竖条）效果一样！它提供了源代码，你把灵敏度降低，就一样了！

回复赞

無名VF 2009-03-30

使用onmouseout和onmouseover事件调用js【给div传值，document.getElementById("**").value="**";】
然后写个<div id="**"></div>

回复赞

三月暖阳 2009-03-30

哥们，看看这个是不是你想要的，
<html>
<head>
<title>QQ菜单</title>
<meta http-equiv='Content-Type' content='text/html; charset=gb2312'>
<script language='JavaScript'>
var headHeight = 22;var bodyHeight = 202;var objcount = 5;var step = 10;var moving = false;
function showme(obj1, obj2)
{
if (moving)
return;
moving = true;
for(i=0;i<document.all.tags('td').length;i++)
if (document.all.tags('td')[i].className.indexOf('headtd') == 0)
document.all.tags('td')[i].className = 'headtd1';
obj2.className = 'headtd2';
moveme(obj1);
}
function moveme(obj)
{
idnumber = parseInt(obj.id.substr(4));
objtop = headHeight * (idnumber - 1);
objbuttom = bodyHeight + headHeight * (idnumber - 2);
currenttop = parseInt(obj.style.top);
if (currenttop >= objbuttom)
{
countid = 1;
for(i=0;i<document.all.tags('div').length;i++)
if (document.all.tags('div')[i].id == 'item'+countid+'body')
{
obj = document.all.tags('div')[i];
objtop = headHeight * (countid - 1);
if (countid == idnumber)
{
moveup(obj,objtop,false);
break;
}
else
moveup(obj,objtop,true);
countid++;
}
}
else if ((currenttop <= objtop) && (idnumber < objcount))
{
idnumber++;
countid = objcount;
for(i=document.all.tags('div').length-1;i>=0;i--)
if (document.all.tags('div')[i].id == 'item'+countid+'body')
{
obj = document.all.tags('div')[i];
objbuttom = bodyHeight + headHeight * (countid - 2);
if (countid == idnumber)
{
movedown(obj,objbuttom,false);
break;
}
else
movedown(obj,objbuttom,true);
countid--;
}
}
}
function moveup(obj,objtop,ismove)
{
currenttop = parseInt(obj.style.top);
if (currenttop > objtop)
{
obj.style.top = currenttop - step;
setTimeout('moveup('+obj.id+','+objtop+','+ismove+')',1)
return;
}
moving = ismove;
}
function movedown(obj,objbuttom,ismove)
{
currenttop = parseInt(obj.style.top);
if (currenttop < objbuttom)
{
obj.style.top = currenttop + step;
setTimeout('movedown('+obj.id+','+objbuttom+','+ismove+')',1)
return;
}
moving = ismove;
}
</script>
</script>
<style type='text/css'>
.headtd1 { background: #00A4E1; border: 2px outset; border-color: #00BBFF #0077FF #0077FF #00BBFF; cursor: hand; font-size: 9pt}.headtd2 { background: #20C1FF; border: 2px outset; border-color: #60D3FF #0077FF #0077FF #60D3FF; cursor: hand; font-size: 9pt}.bodytd { background: #99CCFF; border: 2px outset; border-color: #B0D8FF #0077FF #0077FF #B0D8FF; font-size: 9pt}
</style>
</head>
<body bgcolor='#FFFFFF' text='#000000'>
<div id='mainboard' style='position:absolute; left:2px; top:2px; width:120px; height:290px; z-index:1; overflow: hidden; background: #99CCFF;'> <div id='item1body' style='position:absolute; left:0; top:0; width:120px; height:202px; z-index:2; overflow: hidden'><table width='100%' border='0' height='100%' cellpadding='2' cellspacing='0'><tr><td id='item1head' height='20' class='headtd2' onclick='showme(item1body,this)' align='center'>菜单1</td></tr><tr><td class='bodytd' align='center'>test</td></tr></table></div><div id='item2body' style='position:absolute; left:0; top:202; width:120px; height:202px; z-index:3; overflow: hidden'><table width='100%' border='0' height='100%' cellpadding='2' cellspacing='0'><tr><td id='item2head' height='20' class='headtd1' onclick='showme(item2body,this)' align='center'>菜单2</td></tr><tr><td class='bodytd' align='center'>test</td></tr></table></div><div id='item3body' style='position:absolute; left:0; top:224; width:120px; height:202px; z-index:4; overflow: hidden'><table width='100%' border='0' height='100%' cellpadding='2' cellspacing='0'><tr><td id='item3head' height='20' class='headtd1' onclick='showme(item3body,this)' align='center'>菜单3</td></tr><tr><td class='bodytd' align='center'>test</td></tr></table></div><div id='item4body' style='position:absolute; left:0; top:246; width:120px; height:202px; z-index:5; overflow: hidden'><table width='100%' border='0' height='100%' cellpadding='2' cellspacing='0'><tr><td id='item4head' height='20' class='headtd1' onclick='showme(item4body,this)' align='center'>菜单4</td></tr><tr><td class='bodytd' align='center'>test</td></tr></table></div><div id='item5body' style='position:absolute; left:0; top:268; width:120px; height:202px; z-index:6; overflow: hidden'><table width='100%' border='0' height='100%' cellpadding='2' cellspacing='0'><tr><td id='item5head' height='20' class='headtd1' onclick='showme(item5body,this)' align='center'>菜单5</td></tr><tr><td class='bodytd' align='center'>test</td></tr></table></div></div></body></html>
如果不是的话，我在给你弄别的

回复赞

神龙摆尾无拘束 2009-03-30

具体效果，就是这个网站的这个网站的效果：http://www.brown.edu/

回复赞

神龙摆尾无拘束 2009-03-30

一楼的兄弟，，帮忙呀，，，能附上完整的 js 吗可以的话，我愿意，把我所有的一千积分，全部赠送

回复赞

zhoushijin5201314 2009-03-30

<image src="" onmouseout="";onmouseover"" id="imageUser"/>
然后根据这两个调用方法啊，
方法里面就可以
document.getElementById("imageUser").src="";

回复赞

freedata915 2009-03-30

顶 13楼！

回复赞

jklot66 2009-03-30

我有一个类似的我的是一个按钮滑过显示使其背景变色





function MM_changeProp(objId,x,theProp,theValue) { 

  var obj = null; with (document){ if (getElementById)

  obj = getElementById(objId); }

  if (obj){

    if (theValue == true || theValue == false)

      eval("obj.style."+theProp+"="+theValue);

    else eval("obj.style."+theProp+"='"+theValue+"'");

  }

}

<div class="bt_y" id="bt_y"

											onMouseOver="MM_changeProp('bt_y_mid_arrage','','background','url(bt_y_mid.jpg) repeat-x','DIV');MM_changeProp('bt_y_left_arrage','','background','url(bt_y_left.jpg)','DIV');MM_changeProp('bt_y_right_arrage','','background','url(bt_y_right.jpg)','DIV')"

											onMouseOut="MM_changeProp('bt_y_mid_arrage','','background','url(wirt.jpg) repeat-x','DIV');MM_changeProp('bt_y_left_arrage','','background','url(wirt.jpg)','DIV'); MM_changeProp('bt_y_right_arrage','','background','url(wirt.jpg)','DIV')">

											<div id="bt_y_left_arrage" class="bt_y_left"></div>

											<div id="bt_y_mid_arrage" class="bt_y_mid">

												<div class="img">

													<img src="add.gif" width="26" height="26">

												</div>

												<a style=""

													href="javascript:submit();">确定</a>

											</div>

											<div id="bt_y_right_arrage" class="bt_y_right"></div>

										</div>

</div>



.bt_y {

	float: left;

	margin-left: 0px;

	width: 64px;

	height: 26px;

	text-align: center;

	line-height: 26px;

	color: #FFFFFF;

	text-decoration: none;

	font: "宋体"

}



.bt_y a {

	text-decoration: none;

	color: #333333;

	font-size: 9pt;

}



.bt_y_mid {

	height: 26px;

	width: 54px;

	float: left;

	background: repeat-x;

}



.bt_y_right {

	height: 26px;

	float: right;

	width: 5px;

}



.bt_y_left {

	height: 26px;

	float: left;

	width: 5px;

}



.bt_y_mid on {

	height: 26px;

	width: 54px;

	float: left;

	background: url(../images/newbt_y_mid.jpg) repeat-x

}



.bt_y_right on {

	height: 26px;

	float: right;

	width: 5px;

	background: url(../images/bt_y_right.jpg)

}



.bt_y_left on {

	height: 26px;

	float: left;

	width: 5px;

	background: url(../images/bt_y_left.jpg)

}



.img {

	float: left;

	width: 26px;

	height: 26px;

}