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

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

分不够，我再加，1000分 也可以。 两天内揭帖
先谢了 ---
...全文
251 20 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
20 条回复
切换为时间正序
请发表友善的回复…
发表回复
神龙摆尾无拘束 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;

}
依赖治理、灰度发布、故障演练，阿里电商故障演练系统的设计与实战经验
作者｜中亭编辑｜小智2016 年，阿里巴巴研发了故障演练系统，把故障以场景化的方式沉淀到系统中，在线上主动回放故障，验证监控报警、限流降级、故障迁移、容灾策略、故障处理的有效性。本文将探讨经典的故障类型，...
TowardsDataScience 博客中文翻译 2016~2018（三百零二）
在这篇文章中，我们将分析美国最热门的政治话题之一，包括从制度种族主义到执法人员在社会中的角色等问题。但首先，我想请你帮个忙。在接下来的 10 分钟里，让我们把我们先入为主的关于什么是真的观念留在门口。先前...
PythonLibrary 博客中文翻译（二十四）
我想我最常用的库是 PIL，Python 图像库。我用它作为 PhotoShop 的脚本版本。作为一只恐龙，我生活在命令行中。我总是突然进入命令行解释器来查看图像的大小，或改变格式，或制作缩略图。作为一名音乐家， 我扫描我...
FirstRound 博客中文翻译（三十一）
鉴于我们与餐厅合作伙伴的关系非常密切，顾客服务做出...Reserve 向其合作伙伴提供餐厅运营经理和总经理的手机号码，以便他们可以立即与某人联系，并即时解决问题。“这本身就代表了我们希望他们拥有的安全感和重要感。
TowardsDataScience 博客中文翻译 2020（四百零四）
[## 来自 OGC 的新冠肺炎资源在本文中，您将了解什么是地质统计学，以及如何使用克里金法(一种插值方法)利用地理位置数据进行估算。在我们的示例中，我们将获取纽约的房地产销售价格，并创建一个模型，为我们提供...
Web 开发

81,122

社区成员

341,744

社区内容

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

加载中

查看更多榜单
社区公告
暂无公告

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

+ 用AI写文章