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

神龙摆尾无拘束 2009-03-30 10:44:33
想要这个js 效果,,,鼠标划过 显示相应图片。
这个网站的效果:http://www.brown.edu/

分不够,我再加,1000分 也可以。 两天内揭帖
先谢了 ---
...全文
251 20 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
20 条回复
切换为时间正序
请发表友善的回复…
发表回复
  • 打赏
  • 举报
回复
再次,感谢楼上的各位,我也会,尽我一份力,分担大家遇到的问题
  • 打赏
  • 举报
回复
已接的帖子不能加分啦,,,楼上的几位,,,实在抱歉,我刚刚知道这个规则
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代码都是可以看到的
参考着做就没有问题的:)
  • 打赏
  • 举报
回复
楼上的兄弟 们,,我揭帖了。没给分的,明天加了分,在给补上,现在还不能加分,系统要一天后 才行,,,谢谢啦
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控制好就行了
  • 打赏
  • 举报
回复
问题已经解决:
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>
如果不是的话,我在给你弄别的
  • 打赏
  • 举报
回复
具体效果 ,就是这个网站的 这个网站的效果:http://www.brown.edu/
  • 打赏
  • 举报
回复
一楼的兄弟,,帮忙呀,,,能附上完整的 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;
}

81,122

社区成员

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧