请选择 进入手机版 | 继续访问电脑版
收藏本站腾讯微博新浪微博
邮件列表客服QQ 800003860切换到窄版
点点网模板设计大赛 phpchina

经典论坛

 找回密码
 注册

QQ登录

只需一步，快速开始

蓝色理想 最新研发动态 用悬赏 三天解决问题 解决访问速度慢 论坛支持农历生日 - 给官方提建议

论坛活动及任务 归纳网站最新活动 地图任务 邮件更新任务:保护帐号安全

积分换实物，来参加蓝色理想积分兑换吧！ 联系招聘客服 蓝色理想帮你找工作！ 万元奖励等你拿——点点网模板设计大赛

经典论坛 › 论坛 › 网站开发区 › 前台制作与脚本专栏 › 漂亮的提示信息（带箭头）
返回列表 发新帖
查看: 19612|回复: 29

漂亮的提示信息（带箭头） [复制链接]

booucn　楼主

天空遨游的鱼

高级会员 手机认证 

帖子
437
体力
889
威望
2
发表于 2006-12-12 16:41:07 |显示全部楼层
以前见过一个很漂亮的网页提示信息，就是把鼠标放到网页的文字或者图片上面就会有提示的那种，透明的，还带个箭头，很漂亮，不知道谁在哪见过没有，感谢了。
http://design-studio.cn/blog
西部数码顶级域名注册商39元抢注！

使用道具 举报

Sheneyan　

子虚乌有

荣誉管理 手机认证 

帖子
8391
体力
26707
威望
187
居住地
江苏省 苏州市
发表于 2006-12-12 22:44:57 |显示全部楼层
http://web-graphics.com/mtarchive/BubbleTooltips.html
子叶：子乌的叶子
子乌书简
租服务器，上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具 举报

ljlyy　
帖子
116
体力
490
威望
1
居住地
广东省 广州市
发表于 2006-12-21 16:29:18 |显示全部楼层
看看这个！


<HTML>

<HEAD>

<title>一种很酷的文字提示效果演示</title>

<style>
.tableBorder7{width:800;solid; background-color: #000000;}
TD{font-family: 宋体;font-size: 12px;line-height : 15px ;}
th{background-color: #f7f7f7;color: #000000;font-size: 12px;font-weight:bold;}
th.th1{background-color: #333333;}
td.TableBody7{background-color: #B1EA45;}
</style>
<script language="JavaScript">
//more javascript from http://www.51it.org
<!--
var pltsPop=null;
var pltsoffsetX = 10;   // 弹出窗口位于鼠标左侧或者右侧的距离；3-12 合适
var pltsoffsetY = 15;  // 弹出窗口位于鼠标下方的距离；3-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="<font color=#ffffff>简介</font>";
        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=tableBorder7 cellspacing="1" cellpadding="0" style="width:100%">'+
              '<tr id=pltsPoptop ><th height=18 valign=bottom class=th1 ><b><p id=topleft align=left><font color=#ffffff>↖</font>'+pltsTitle+'</p><p id=topright align=right style="display:none">'+pltsTitle+'<font color=#ffffff>↗</font></b></th></tr>'+
              '<tr><td "+attr+" class=tablebody7 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 class=th1><b><p id=botleft align=left><font color=#ffffff>↙</font>'+pltsTitle+'</p><p id=botright align=right style="display:none">'+pltsTitle+'<font color=#ffffff>↘</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>
<div title="醉别西楼醒不记，春梦秋云，聚散真容易。<br>斜月半窗还少睡。画屏闲展吴山翠。<br>衣上酒痕诗里字，点点行行，总是凄凉意。<br>红烛自怜无好计，夜寒空替人垂泪。">蝶恋花</div>
</BODY>
</HTML>

使用道具 举报

newsdyanshan　
帖子
16
体力
23
威望
0
发表于 2006-12-21 19:07:47 |显示全部楼层

 提示：您可以先修改部分代码再运行

使用道具 举报

Flyinghigher　

个性猪

银牌会员 手机认证 

帖子
458
体力
1215
威望
0
居住地
广东省 深圳市
发表于 2006-12-21 19:18:43 |显示全部楼层
强！~这种效果爽。
研究研究

使用道具 举报

lois2008　

我属猫

高级会员

帖子
168
体力
629
威望
0
居住地
浙江省 嘉兴市
发表于 2006-12-22 09:09:55 |显示全部楼层
漂亮！

使用道具 举报

cntanke　
帖子
27
体力
101
威望
0
发表于 2006-12-22 09:21:01 |显示全部楼层
楼上都是牛人,研究中

使用道具 举报

yjjx　
帖子
330
体力
759
威望
0
居住地
重庆市 江北区
发表于 2006-12-22 11:10:20 |显示全部楼层
不错,先收藏了
笑了吧

使用道具 举报

jaysonhe　
帖子
30
体力
134
威望
0
发表于 2006-12-27 13:16:27 |显示全部楼层
貌似在FF中不能显示.

使用道具 举报

aqhome　
帖子
123
体力
200
威望
0
发表于 2006-12-30 21:25:02 |显示全部楼层
还不错,支持了,不过不知道符合标准不
阿Q家园www.166s.com

使用道具 举报

flywings　
帖子
132
体力
695
威望
0
居住地
广东省 惠州市
发表于 2006-12-31 10:21:41 |显示全部楼层
别的不说在FF下就不显示...
心在那里...

使用道具 举报

gulu77　
帖子
297
体力
1080
威望
13
居住地
广东省 广州市
发表于 2006-12-31 10:56:23 |显示全部楼层

在FF不行唉,没用...

在FF不行唉,没用...
gulu77.com

使用道具 举报

dwcon　
帖子
181
体力
792
威望
0
发表于 2006-12-31 11:05:07 |显示全部楼层
很漂亮,收藏先~~~JS果然强大

使用道具 举报

hzwbl　

山治

银牌会员

帖子
1208
体力
1055
威望
0
居住地
山东省 济南市
发表于 2006-12-31 11:24:53 |显示全部楼层
很多论坛上都见过这种效果.
虚拟主机评测

使用道具 举报

manoen　

聆枫

银牌会员 手机认证 

帖子
639
体力
2432
威望
0
居住地
广东省 深圳市
发表于 2006-12-31 12:40:15 |显示全部楼层
http://www.manoen.com/web2/home/

在下一页中点“友情互助 ”就可以看到。。

[ 本帖最后由 manoen 于 2007-2-27 11:37 编辑 ]
附件: 你需要登录才可以下载或查看附件。没有帐号？注册
www.manoen.com 乐为

使用道具 举报

compaq2800　
帖子
29
体力
255
威望
0
发表于 2007-2-26 09:47:37 |显示全部楼层
这段代码如果现实的内容很长的话，就会显示不完全了，这个要怎么办呢？

而且还跑到上面去了。。。


 提示：您可以先修改部分代码再运行


[ 本帖最后由 compaq2800 于 2007-2-26 09:49 编辑 ]

使用道具 举报

7815480　
帖子
183
体力
276
威望
2
居住地
湖北省 武汉市
发表于 2007-2-27 09:06:05 |显示全部楼层
效果不错~~早用上了~~
www.yule521.com

使用道具 举报

suozi　

suozi

金牌会员 手机认证 

帖子
487
体力
3261
威望
0
发表于 2007-2-27 16:46:38 |显示全部楼层
恩，很有实用价值哦！
穷追不舍 死缠烂打
软硬兼施 真相大白

使用道具 举报

webren　
帖子
123
体力
202
威望
0
居住地
浙江省 杭州市
发表于 2007-2-27 16:53:47 |显示全部楼层
确实是好东西

使用道具 举报

compaq2800　
帖子
29
体力
255
威望
0
发表于 2007-3-1 21:44:16 |显示全部楼层
兄弟们，16楼那个怎么才能实现呢？

使用道具 举报

xingesoft　
帖子
109
体力
430
威望
0
发表于 2007-3-2 11:40:12 |显示全部楼层
看看http://www.gzfangzi.com首面里面人信息标题提示。
设计天空:http://www.sjsky.net

使用道具 举报

lhnlj2　

水舞流漠

银牌会员

帖子
441
体力
1393
威望
0
居住地
江苏省 徐州市
发表于 2007-3-2 14:57:25 |显示全部楼层
真是强人。。收藏

使用道具 举报

85cm　
帖子
3
体力
12
威望
0
发表于 2007-3-26 09:18:03 |显示全部楼层

回复 #15 manoen 的帖子

请问这个网页加载时部分栏目自动伸缩的功能是怎么实现的？
nextway.cn

使用道具 举报

manoen　

聆枫

银牌会员 手机认证 

帖子
639
体力
2432
威望
0
居住地
广东省 深圳市
发表于 2007-3-26 12:41:30 |显示全部楼层
原帖由 85cm 于 2007-3-26 09:18 发表
请问这个网页加载时部分栏目自动伸缩的功能是怎么实现的？



设置一个定时器。
www.manoen.com 乐为

使用道具 举报

Magic3　
帖子
136
体力
1796
威望
0
居住地
江苏省 苏州市
发表于 2007-6-22 13:09:50 |显示全部楼层
别老是ff下不行的,ff对js的支持应该不是很好,这个ff本身的问题啊
哎呦喂~哥在蓝色转了这么久，总算升级到银牌会员了啊

使用道具 举报

xingesoft　
帖子
109
体力
430
威望
0
发表于 2007-6-23 12:44:41 |显示全部楼层
FF是垃圾，不要管它。
设计天空:http://www.sjsky.net

使用道具 举报

kiangsu　
帖子
66
体力
251
威望
0
发表于 2007-7-10 11:10:53 |显示全部楼层
代码有个缺点，如果它前后有字的话它会把它前后的文字自动分成上下两行显示了。
点击这里给我发消息

使用道具 举报

thornyzhl　

sarten

高级会员

帖子
563
体力
904
威望
2
居住地
安徽省 合肥市
发表于 2007-7-31 08:20:17 |显示全部楼层
这个在FF下面不能显示，如果说是FF对JS支持不好，那如果别人用FF浏览你的网站的话那不就不能正常显示？？？晕  难道你做这个效果只是为了让用IE内核的人欣赏的？？？
http://www.055178.com/

使用道具 举报

j1984　
帖子
12
体力
38
威望
0
发表于 2007-7-31 09:55:01 |显示全部楼层
后面的字显示不正常,只有3个字,碟恋花,我是用TT的,其他没试过

使用道具 举报

bopooo　

榕树下的落叶

银牌会员 手机认证 

帖子
621
体力
1185
威望
12
居住地
湖北省 武汉市
发表于 2008-8-4 16:47:39 |显示全部楼层
FF 也只显示  3个字,碟恋花,

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Html Smilies
您需要登录后才可以回帖 登录 | 注册

Archiver|手机版|安久科技提供CDN|blueidea.com ( 京ICP备05002321号 )  

GMT+8, 2012-2-13 09:50 , Processed in 0.157967 second(s), 8 queries , Gzip On, Memcache On.

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部