| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 2649 人关注过本帖
标题:鼠标放上去出现一具漂亮的层怎么实现啊!
只看楼主 加入收藏
melack
Rank: 1
等 级:新手上路
帖 子:230
专家分:0
注 册:2006-9-27
收藏
 问题点数:0 回复次数:6 
鼠标放上去出现一具漂亮的层怎么实现啊!
就象QQ形象页面 把鼠标放在图片上会出现一个层 里面有一些详细介绍 这个效果怎么弄啊 谢谢了
图片附件: 游客没有浏览图片的权限,请 登录注册

搜索更多相关主题的帖子: 鼠标 漂亮 效果 形象 页面 
2007-10-26 09:53
Gojo_JS
Rank: 1
等 级:新手上路
帖 子:15
专家分:0
注 册:2007-10-25
收藏
得分:0 

<style>
.test{position:relative;color:#0000cc;text-decoration:none;font-size:12px;}
.test:hover{background:none;}
.test span {display: none;}
.test:hover span{display:block;position:absolute;top:20px;left:8px;border-bottom:2px solid #eee;border-right:2px solid #eee;}
.test:hover span p{border:1px solid #ccc;background:#fff;color:#000;padding:5px;text-align:left;font-size:12px;}
</style>
<a class="test" href="#">链接一<span><p>Gojo_JS</p></span></a>

不知道你要的是不是这个效果,你可以在<p></p>之间写你需要的代码


天使之所以会飞,是因为他们把自己看的很轻。
2007-10-26 15:37
huige34
Rank: 1
等 级:新手上路
帖 子:16
专家分:0
注 册:2007-10-26
收藏
得分:0 

支持一下

2007-10-27 09:27
zhulei1978
Rank: 16Rank: 16Rank: 16Rank: 16
等 级:版主
威 望:53
帖 子:1351
专家分:1200
注 册:2006-12-17
收藏
得分:0 

<html>
<head>
<style type="text/css">
body, p, td, th {font-size:12px; color:#000000 }
.bg_td { background-color:#f7f7f7; }
.td { background-image: url('http://www.thuayuan.com/skin/skin_1/bg_td.gif'); color: #996699; height: 23px; font-weight:bold }

</style>

<script language=javascript>

//***********默认设置定义.*********************
var tPopWait=50; //停留tWait豪秒后显示提示。
var tPopShow=6000; //显示tShow豪秒后关闭提示
var showPopStep=20;
var popOpacity=95;
var tfontcolor="#000000";
var tbgcolor="#000000";
var tbordercolor="#666666";

//***************内部变量定义*****************
var pltsPop=null;
var pltsoffsetX = 10; // 弹出窗口位于鼠标左侧或者右侧的距离;3-12 合适
var pltsoffsetY = 15; // 弹出窗口位于鼠标下方的距离;3-12 合适
var pltsPopbg="#FF0099"; //背景色
var pltsPopfg="#880000"; //前景色
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="『GuYeR』 提示信息";
else{
re=/\{(.[^\{]*)\}(.*)/ig;
pltsTitle=Msg.replace(re,"$1")+" ";
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=90) shadow(color=#bbbbbb,direction=135);" id=toolTipTalbe border=0><tr><td width="100%"><table class=td cellspacing="0" cellpadding="0" style="width:100%">'+
'<tr id=pltsPoptop ><th height=18 valign=bottom><b><p id=topleft align=left>↖'+pltsTitle+'</p><p id=topright align=right style="display:none">'+pltsTitle+'↗</font></b></th></tr>'+
'<tr><td "+attr+" class=bg_td style="padding-left:14px;padding-right:14px;padding-top: 6px;padding-bottom:6px;line-height:135%">'+Msg+'</td></tr>'+
'<tr id=pltsPopbot style="display:none"><th height=18 valign=bottom><b><p id=botleft align=left>↙'+pltsTitle+'</p><p id=botright align=right style="display:none">'+pltsTitle+'↘</font></b></th></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();

</script>

</head>
<body>
<table class='bkx'><tr><td height='20'>·&nbsp;<a href='news_view.asp?id=1033' target=_blank alt='新闻标题:飞轮海范晓萱等出席活动--吴尊<br>发 布 人:站长<br>浏览次数:67 人次<br>整理时间:2007-5-6 9:26:43'>飞轮海范晓萱等出席活动--吴尊</a></td></tr></table>
<table class='bkx'><tr><td height='20'>·&nbsp;<a href='news_view.asp?id=1032' target=_blank alt='新闻标题:陈好化身美丽蝴蝶大使 娇美可人引蝴蝶驻留<br>发 布 人:站长<br>浏览次数:59 人次<br>整理时间:2007-5-6 9:23:41'>陈好化身美丽蝴蝶大使 娇美可人...</a></td></tr></table>

</body></html>


其实我就是改变社会风气,提高少女素质,刺激电影市道,提高年轻人内涵,玉树临风,风度翩翩的整蛊专家,我名叫古晶,英文名叫JingKoo!
2007-10-30 20:43
独孤幽灵
Rank: 1
等 级:新手上路
帖 子:115
专家分:0
注 册:2005-11-24
收藏
得分:0 
如果我的数据是从数据库中读取出来的,那要怎么显示呢


这个直接放在a的alt上,太死板了吧

2007-11-07 10:08
suncf1985
Rank: 2
等 级:论坛游民
威 望:1
帖 子:158
专家分:35
注 册:2007-10-11
收藏
得分:0 
应该是动态生成的...

以后:独自享受着快乐、品味着孤独、体会着没有回忆的回忆....
2007-11-08 08:16
矿泉水wz
Rank: 1
等 级:新手上路
帖 子:61
专家分:0
注 册:2007-11-6
收藏
得分:0 
用&lt;onMouseover&gt;事件呀!!!!
2007-11-08 15:55
快速回复:鼠标放上去出现一具漂亮的层怎么实现啊!
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.016756 second(s), 8 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved