注册 登录
编程论坛 ASP技术论坛

当鼠标移动上去,会出现一个浮动的层。这个效果怎么做??

piaoxue 发布于 2007-01-24 09:54, 6628 次点击
当鼠标移动上去,会出现一个浮动的层。这个效果怎么做??比如这个网站:http://www.3-v.cn/ 里面的作品展示。鼠标经过这个图片的时候,会出现一个详细的说明,请问这个效果怎么做呀? 谢谢了!!!
27 回复
#2
google2007-01-24 09:56
不知道,

当鼠标划过的时候,层的可见属性=true
#3
suyongtao2007-01-24 10:04
我原来做出来,但是现在找不到了..我一会给你找找.
#4
piaoxue2007-01-24 10:08
好的   谢谢呀!  这个效果挺重要的。 我现在做了一个地图,用热点做的链接,我现在想让他移动到链接点的位置,出现链接点的详细信息。  就是这样一个效果。谁知道的帮帮忙呀   谢谢了!!
#5
suyongtao2007-01-24 10:12
<a href=dis_article.asp?classid=<%=rs("id")%> target="_blank" title="<%response.write "<img src=images/wz.gif width=11 height=12 hspace=5 align=absmiddle>"&htmlout(ChkBadWords(rs("title")))%>" class="6hui_l"><%=left(htmlout(ChkBadWords(rs("title"))),13)%></a>
这个就可以搞出来,,自己研究一下.
#6
piaoxue2007-01-24 10:16
哦   好的!  谢谢   我看看
#7
piaoxue2007-01-24 10:22
我看了一下   效果是这样的,但是这个里面显示的内容不能换行,而且也不能控制显示的格式。  我要的不是这样的。请问还有没有其他的方法实现这样的效果呀??
#8
suyongtao2007-01-24 10:29
别的我不知道了.
#9
piaoxue2007-01-24 11:07
别人有知道的吗?  请教呀!!  其他人说句话!  谢谢了   指点一下。着急等!!
#10
做人很低调2007-01-24 11:14

[CODE]
<form method="POST" name="from" action="">
<a style='CURSOR:hand' onmouseover='showmenu(event,"<img name=LogoPic onload=\"javascript:if(this.width>200)this.style.width=200;\">");document.images.LogoPic.src=document.from.Logo.value;' onmouseout='delayhidemenu()' >[预览]</a>
<div class="menuskin" id="popmenu" onmouseover="clearhidemenu();highlightmenu(event,'on')" onmouseout="highlightmenu(event,'off');dynamichide(event)" style="Z-index:100"></div>
<style>.menuskin {Border: #666666 1px solid; Visibility: hidden; Position: absolute; Font: 12px Verdana; Background-Color:#EFEFEF; background-repeat : repeat-y;}</style>
<input type="hidden" name="Logo" value="http://bbs.bc-cn.net/UploadFace/27761.jpg"></form>

<script language="javascript">
var menuOffX=0 //菜单距连接文字最左端距离
var menuOffY=18 //菜单距连接文字顶端距离
var fo_shadows=new Array()
var linkset=new Array()
////No need to edit beyond here
var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1
var ns6=document.getElementById&&!document.all
var ns4=document.layers
function openScript(url, width, height){
var Win = window.open(url,"openScript",'width=' + width + ',height=' + height + ',resizable=1,scrollbars=yes,menubar=no,status=no' );
}
function showmenu(e,vmenu,mod){
if (!document.all&&!document.getElementById&&!document.layers)
return
which=vmenu
clearhidemenu()
ie_clearshadow()
menuobj=ie4? document.all.popmenu : ns6? document.getElementById("popmenu") : ns4? document.popmenu : ""
menuobj.thestyle=(ie4||ns6)? menuobj.style : menuobj

if (ie4||ns6)
menuobj.innerHTML=which
else{
menuobj.document.write('<layer name=gui bgColor=#E6E6E6 width=165 onmouseover="clearhidemenu()" onmouseout="hidemenu()">'+which+'</layer>')
menuobj.document.close()
}
menuobj.contentwidth=(ie4||ns6)? menuobj.offsetWidth : menuobj.document.gui.document.width
menuobj.contentheight=(ie4||ns6)? menuobj.offsetHeight : menuobj.document.gui.document.height

eventX=ie4? event.clientX : ns6? e.clientX : e.x
eventY=ie4? event.clientY : ns6? e.clientY : e.y

var rightedge=ie4? document.body.clientWidth-eventX : window.innerWidth-eventX
var bottomedge=ie4? document.body.clientHeight-eventY : window.innerHeight-eventY
if (rightedge<menuobj.contentwidth)
menuobj.thestyle.left=ie4? document.body.scrollLeft+eventX-menuobj.contentwidth+menuOffX : ns6? window.pageXOffset+eventX-menuobj.contentwidth : eventX-menuobj.contentwidth
else
menuobj.thestyle.left=ie4? ie_x(event.srcElement)+menuOffX : ns6? window.pageXOffset+eventX : eventX

if (bottomedge<menuobj.contentheight&&mod!=0)
menuobj.thestyle.top=ie4? document.body.scrollTop+eventY-menuobj.contentheight-event.offsetY+menuOffY-23 : ns6? window.pageYOffset+eventY-menuobj.contentheight-10 : eventY-menuobj.contentheight
else
menuobj.thestyle.top=ie4? ie_y(event.srcElement)+menuOffY : ns6? window.pageYOffset+eventY+10 : eventY
menuobj.thestyle.visibility="visible"
ie_dropshadow(menuobj,"#999999",3)
return false
}
function ie_y(e){
var t=e.offsetTop;
while(e=e.offsetParent){
t+=e.offsetTop;
}
return t;
}
function ie_x(e){
var l=e.offsetLeft;
while(e=e.offsetParent){
l+=e.offsetLeft;
}
return l;
}
function ie_dropshadow(el, color, size)
{
var i;
for (i=size; i>0; i--)
{
var rect = document.createElement('div');
var rs = rect.style
rs.position = 'absolute';
rs.left = (el.style.posLeft + i) + 'px';
rs.top = (el.style.posTop + i) + 'px';
rs.width = el.offsetWidth + 'px';
rs.height = el.offsetHeight + 'px';
rs.zIndex = el.style.zIndex - i;
rs.backgroundColor = color;
var opacity = 1 - i / (i + 1);
rs.filter = 'alpha(opacity=' + (100 * opacity) + ')';
//el.insertAdjacentElement('afterEnd', rect);
fo_shadows[fo_shadows.length] = rect;
}
}
function ie_clearshadow()
{
for(var i=0;i<fo_shadows.length;i++)
{
if (fo_shadows[i])
fo_shadows[i].style.display="none"
}
fo_shadows=new Array();
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}
function hidemenu(){
if (window.menuobj)
menuobj.thestyle.visibility=(ie4||ns6)? "hidden" : "hide"
ie_clearshadow()
}
function dynamichide(e){
if (ie4&&!menuobj.contains(e.toElement))
hidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
hidemenu()
}
function delayhidemenu(){
if (ie4||ns6||ns4)
delayhide=setTimeout("hidemenu()",500)
}
function clearhidemenu(){
if (window.delayhide)
clearTimeout(delayhide)
}
function highlightmenu(e,state){
if (document.all)
source_el=event.srcElement
else if (document.getElementById)
source_el=e.target
if (source_el.className=="menuitems"){
source_el.id=(state=="on")? "mouseoverstyle" : ""
}
else{
while(source_el.id!="popmenu"){
source_el=document.getElementById? source_el.parentNode : source_el.parentElement
if (source_el.className=="menuitems"){
source_el.id=(state=="on")? "mouseoverstyle" : ""
}
}
}
}
</script>[/CODE]

#11
做人很低调2007-01-24 11:14
不知道是不是LZ你想要的效果
#12
piaoxue2007-01-24 11:15
哈哈  就是这个效果   谢谢呀!!  研究一下  谢谢
#13
hangxj2007-01-24 12:47
先收藏,有空再慢慢看
#14
piaoxue2007-01-24 13:30
晕!   这个效果太复杂了   我的那个地图上做这种样式的特别多,用这个方法不太和乎实际。  有没有简单的方法可以实现这样的效果呀?
#15
做人很低调2007-01-24 13:31
无语了
#16
piaoxue2007-01-24 13:35
我是想在地图上做MAP链接  当鼠标指向链接的地方时候,出现这个地方的简单介绍。  我的地图是按地区分的,好多需要加这个效果的地方,所以这个效果不太实用! 还有没有别的方法,请大家指点呀!
#17
做人很低调2007-01-24 13:41

[CODE]<a href="#" title="&lt;img src='http://bbs.bc-cn.net/UploadFace/86043.gif'/&gt;">帅哥</a>   
<a href="#" title="&lt;img src='http://bbs.bc-cn.net/UploadFace/27761.jpg'/&gt;">美女</a>
<script language="javascript">
//***********默认设置定义.*********************
tPopWait=50; //停留tWait豪秒后显示提示。
tPopShow=5000; //显示tShow豪秒后关闭提示
showPopStep=2; //显示渐变快慢
popOpacity=99; //消失渐变快慢
//***************内部变量定义*****************
sPop=null;
curShow=null;
tFadeOut=null;
tFadeIn=null;
tFadeWaiting=null;
document.write("<style type='text/css'id='defaultPopStyle'>");
document.write(".cPopText { background-color: #F8F8F5;color:#000000; border: 1px #000000 solid;font-color: font-size: 12pt; padding-right: 4px; padding-left: 4px; height: 20px; padding-top: 2px; padding-bottom: 2px; filter: Alpha(Opacity=0)}");
document.write("</style>");
document.write("<div id='dypopLayer' style='position:absolute;z-index:1000;font-size: 9pt;' class='cPopText'></div>");
function showPopupText()
{
var o=event.srcElement;
MouseX=event.x;
MouseY=event.y;
if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};
if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""};
if(o.dypop!=sPop)
{
sPop=o.dypop;
clearTimeout(curShow);
clearTimeout(tFadeOut);
clearTimeout(tFadeIn);
clearTimeout(tFadeWaiting);
if(sPop==null || sPop=="")
{
dypopLayer.innerHTML="";
dypopLayer.style.filter="Alpha()";
dypopLayer.filters.Alpha.opacity=0;
}
else
{
if(o.dyclass!=null) popStyle=o.dyclass
else popStyle="cPopText";
curShow=setTimeout("showIt()",tPopWait);
}
}
}
function showIt()
{
dypopLayer.className=popStyle;
dypopLayer.innerHTML=sPop;
popWidth=dypopLayer.clientWidth;
popHeight=dypopLayer.clientHeight;
if(MouseX+12+popWidth>document.body.clientWidth) popLeftAdjust=-popWidth-24
else popLeftAdjust=0;
if(MouseY+12+popHeight>document.body.clientHeight) popTopAdjust=-popHeight-24
else popTopAdjust=0;
dypopLayer.style.left=MouseX+12+document.body.scrollLeft+popLeftAdjust;
dypopLayer.style.top=MouseY+12+document.body.scrollTop+popTopAdjust;
dypopLayer.style.filter="Alpha(Opacity=0)";
fadeOut();
}
function fadeOut()
{
if(dypopLayer.filters.Alpha.opacity<popOpacity)
{
dypopLayer.filters.Alpha.opacity+=showPopStep;
tFadeOut=setTimeout("fadeOut()",1);
}
else
{
dypopLayer.filters.Alpha.opacity=popOpacity;
tFadeWaiting=setTimeout("fadeIn()",tPopShow);
}
}
function fadeIn()
{
if(dypopLayer.filters.Alpha.opacity>0)
{
dypopLayer.filters.Alpha.opacity-=1;
tFadeIn=setTimeout("fadeIn()",1);
}
}
document.onmouseover=showPopupText;
function opwin()
{
if(IsLogin)
{
dypopLayer.filters.Alpha.opacity-=1;
tFadeIn=setTimeout("fadeIn()",1);
}
else
{
}
}
</script>[/CODE]

#18
做人很低调2007-01-24 13:41
这个可以了不??
要是还不成
我的神啊 我没招了
#19
做人很低调2007-01-24 13:45
这上不好使
代码粘回去试试吧
#20
piaoxue2007-01-24 16:14
哦 谢谢   我研究以下!!
#21
sfzheng20072007-01-24 16:16
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
.info {position:relative;background:#fff;color:#666; text-decoration:none;font-size:12px;text-align:left;border:1px solid #ccc;height:25px;line-height:25px;padding:5px 30px;}
.info:hover {background:#eee;color:#333;}
.info span {display: none; }
.info:hover span {display:block;position:absolute;top:30px;left:40px;width:100px;border:1px solid #ff0000; background:#fff; color:#000; padding:5px 10px;text-align:center;}
</style>
</head>

<body>
<a class="info" href="http://www.cnad.com" target="_blank">菜单一<span>这个是菜单一
</span></a>
<a class="info" href="http://www.cnad.com" target="_blank">菜单二<span>这个是菜单二
</span></a>
<a class="info" href="http://www.cnad.com" target="_blank">菜单三<span>这个是菜单三
</span></a>
<a class="info" href="http://www.cnad.com" target="_blank">菜单四<span>这个是菜单四
</span></a>
<a class="info" href="http://www.cnad.com" target="_blank">菜单五<span>这个是菜单五
</span></a>
</body>
</html>
#22
w文武w2007-01-30 10:05
回复:(piaoxue)当鼠标移动上去,会出现一个浮动的层...

在想显示效果的图片附近做一个层,在层里写上想要提示的话或是插入图片,用鼠标选中图片,然后在Dreamweaver 的行为属性里找到“显示—隐藏层”选项,第一次选择“隐藏”选项,在列表中会出现“onLoad 显示—隐藏层”,再做一次上面的操作,但是这次选择“显示”选项,在列表中会出现“onLoad 显示—隐藏层”,将onload改为onMouseOver, 再做一次上面的操作,这次选择“隐藏”选项,在列表中会出现“onLoad 显示—隐藏层”,将onload改为onMouseOut, 你要的效果就出现了。

#23
guyer2007-01-31 14:54
版主的效果跟 http://www.3-v.cn/ 不一样啊~
他的那个层的位置.可以跟这鼠标移动的~
#24
guyer2007-01-31 15:14
var pltsPop=null;
var pltsoffsetX = 10;
var pltsoffsetY = 12;
var pltsPopbg="#FFFFEE";
var pltsPopfg="#111111";
var pltsTitle="";
document.write('<div id=pltsTipLayer style="display: none;position: absolute; z-index:10001"></div>');
function pltsinits()
{
document.onmouseover = plts;
document.onmousemove = moveToMouseLoc;
}
function plts()
{ var o=event.srcElement;
if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};
if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""};
pltsPop=o.dypop;
if(pltsPop!=null&&pltsPop!=""&&typeof(pltsPop)!="undefined")
{
pltsTipLayer.style.left=-1000;
pltsTipLayer.style.display='';
var Msg=pltsPop.replace(/\n/g,"<br>");
Msg=Msg.replace(/\0x13/g,"<br>");
var re=/\{(.[^\{]*)\}/ig;
if(!re.test(Msg))pltsTitle="┥HtTp://WwW.3-v.cN┝";
else{
re=/\{(.[^\{]*)\}(.*)/ig;
pltsTitle=Msg.replace(re,"$1")+"&nbsp;";
re=/\{(.[^\{]*)\}/ig;
Msg=Msg.replace(re,"");
Msg=Msg.replace("<br>","");}
var attr=(document.location.toString().toLowerCase().indexOf("list.asp")>0?"nowrap":"");
var content =
'<table style="FILTER:alpha(opacity=100) shadow(color=#000000,direction=135);" id=toolTipTalbe border=0><tr><td width="100%"><table bgcolor="#ffffff" cellspacing="1" cellpadding="0" style="width:100%" style="font-size:12px;">'+
'<tr id=pltsPoptop><td valign=bottom bgcolor="#000000" style="font-size:11.5px; FONT-FAMILY:Verdana,Tahoma, arial, helvetica; color:#ffffff; padding-left:3px; padding-right:3px; padding-top:0px; padding-bottom:0px; line-height:135%;font-weight: bold"><p id=topleft align=left>↖'+pltsTitle+'</p><p id=topright align=right style="display:none">'+pltsTitle+'↗</font></td></tr>'+
'<tr><td "+attr+" bgcolor="#d4d4d4" style="padding-left:10px; padding-right:10px; padding-top:4px; padding-bottom:4px; line-height:135%;color:#000;FONT:11.5px Verdana, Tahoma, arial, helvetica">'+Msg+'</td></tr>'+
'<tr id=pltsPopbot style="display:none"><td valign=bottom bgcolor="#000000" style="font-size:11.5px; FONT-FAMILY:Tahoma, arial, helvetica; color:#ffffff; padding-left:3px; padding-right:3px; padding-top:0px; padding-bottom:0px; line-height:135%"><p id=botleft align=left>↙'+pltsTitle+'</p><p id=botright align=right style="display:none">'+pltsTitle+'↘</font></td></tr>'+
'</table></td></tr></table>';
pltsTipLayer.innerHTML=content;
toolTipTalbe.style.width=Math.min(pltsTipLayer.clientWidth,document.body.clientWidth/2.2);
moveToMouseLoc();
return true;
}
else
{
pltsTipLayer.innerHTML='';
pltsTipLayer.style.display='none';
return true;
}
}

function moveToMouseLoc()
{
if(pltsTipLayer.innerHTML=='')return true;
var MouseX=event.x;
var MouseY=event.y;
//window.status=event.y;
var popHeight=pltsTipLayer.clientHeight;
var popWidth=pltsTipLayer.clientWidth;
if(MouseY+pltsoffsetY+popHeight>document.body.clientHeight)
{
popTopAdjust=-popHeight-pltsoffsetY*1.5;
pltsPoptop.style.display="none";
pltsPopbot.style.display="";
}
else
{
popTopAdjust=0;
pltsPoptop.style.display="";
pltsPopbot.style.display="none";
}
if(MouseX+pltsoffsetX+popWidth>document.body.clientWidth)
{
popLeftAdjust=-popWidth-pltsoffsetX*2;
topleft.style.display="none";
botleft.style.display="none";
topright.style.display="";
botright.style.display="";
}
else
{
popLeftAdjust=0;
topleft.style.display="";
botleft.style.display="";
topright.style.display="none";
botright.style.display="none";
}
pltsTipLayer.style.left=MouseX+pltsoffsetX+document.body.scrollLeft+popLeftAdjust;
pltsTipLayer.style.top=MouseY+pltsoffsetY+document.body.scrollTop+popTopAdjust;
return true;
}
pltsinits();



这个是他 Js/Mouse.js 里的文件.
那个效果应该是他来实现的

#25
bafnje2007-01-31 17:08
把那个页面保存下来,看一下不就知道了!
#26
zfyhome2007-01-31 18:58
不错,又学了一招
#27
做人很低调2007-02-01 15:29
他说的那个网站效果我不清楚怎么做
我想应该是层在跟随鼠标的坐标吧。。。
#28
金牛座燕子2012-12-18 23:37
回复 楼主 piaoxue
这个教我一下吧   
1