`
朱嘉华
  • 浏览: 238330 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

漂亮的提示信息(带箭头)

阅读更多
<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>
0
0
分享到:
评论

相关推荐

    WPF:带阴影、带箭头的Popup提示框

    **箭头效果**则帮助用户明确Popup与关联元素的关系,指示出提示信息的方向。在WPF中,Popup的`Placement`属性决定了它的相对位置,而`PlacementTarget`或`PlacementRectangle`属性可以指定Popup相对于哪个元素或区域...

    css制作带箭头的css边框

    2. **提示框**:用于提示用户注意特定信息或操作时,增强交互性和美观性。 3. **内容区域划分**:为页面的不同部分划分边界,同时增加视觉效果。 4. **装饰元素**:为网站增添细节,提升整体设计感。 通过以上分析...

    仿QQ相册基本带箭头效果

    仿QQ相册的基本带箭头效果,主要是指在相册浏览过程中,通过箭头图标来实现前后翻页的功能,这在网页或移动应用的设计中是非常常见的。这种设计能够使用户直观地了解如何在相册中导航,提升用户体验。 要实现这个...

    三种带箭头提示框总结实例

    带箭头的提示框能够更直观地指示信息来源或指向目标位置,提高用户体验。本篇将详细介绍三种通过CSS实现带箭头提示框的方法。 1. 通过border属性: 这种方法利用了CSS边框的特性,通过调整不同边框的颜色,可以创建...

    ios-工具类自定义带箭头弹出视图.zip

    标题“ios-工具类自定义带箭头弹出视图.zip”所指的,是一个专为iOS平台设计的自定义弹出视图组件,它带有可调整方向的箭头,以增强用户体验和界面的导航性。这个组件的使用方法简单,能够方便地集成到各种项目中,...

    双线(带箭头)MACD指标及安装指南.rar

    总的来说,双线MACD指标以其直观的双线交叉和箭头提示,为交易者提供了更丰富的信息,帮助他们在交易中把握趋势和买卖时机。熟练掌握和应用这一工具,可以提升交易策略的有效性,但必须结合个人交易风格和市场环境...

    各式箭头动画

    首先,箭头作为一种指向性的图形符号,常用于指示方向、流程连接、操作提示等。在动画形式下,箭头可以变得更加生动和引人注意,帮助用户更好地理解和导航。例如,动态箭头可以用于引导用户完成步骤操作,或者在页面...

    一百多张gif箭头图标

    在软件应用中,箭头图标则可能用作按钮、工具提示、进度指示器或者状态指示。这些gif箭头图标提供的动画效果,能够更直观地展示交互过程,提升用户体验。 小图标(Tiny Icons),如箭头,通常尺寸小巧,但信息传递...

    快捷方式去图标箭头恢复箭头

    用户只需运行该程序,然后按照提示进行操作,就能快速完成快捷方式箭头的去除。同样,如果用户想要恢复原来的显示状态,只需再次运行该工具并选择“恢复箭头”选项即可。这样,用户不必担心因为一时的改变而永久失去...

    css向左箭头

    标签"tip"提示我们可以将这种方法应用于提示信息的设计中,例如,创建一个带有指向性箭头的提示框。 至于压缩包中的文件"arrow-left",很可能是包含了一个或多个示例代码或者CSS样式的文件,用于展示如何实现向左...

    DIV+CSS通过border样式制作带箭头提示框效果

    通过巧妙地运用CSS属性,可以创建出具有视觉引导性的箭头提示框,广泛应用于网站界面的元素提示或强调信息等场景。 要实现这样的效果,主要依赖于CSS的border属性。border属性由三个子属性组成:border-style、...

    android自定义带箭头对话框.pdf

    该对话框可以应用于各种 Android 应用程序中,例如信息提示、警示框等。 对话框组件的设计 在 Android 中,我们可以通过继承 `AppCompatTextView` 来创建一个自定义的对话框组件。在本示例中,我们创建了一个名为 ...

    淘宝全屏轮播箭头

    - 可设置提示,如初次加载时的箭头闪烁或短暂的使用说明,帮助用户了解其功能。 8. **无障碍性** - 考虑到无障碍性,箭头应支持键盘导航,以便视力障碍用户使用屏幕阅读器操作。 9. **测试与调试** - 在不同的...

    箭头图标打包

    这些图标的设计可以非常多样化,包括但不限于直线箭头、曲线箭头、双向箭头、虚线箭头、彩色箭头以及带有文字说明的箭头等。在"Arrow_PNG"这个文件列表中,我们可以推测包含的都是PNG格式的箭头图标,PNG是一种常见...

    数百个动态小箭头图片

    描述“数百个小箭头可以提升这一行信息的醒目效果”进一步强调了这些动态箭头在提升内容可读性和吸引用户关注方面的作用。在网页设计中,动态元素如小箭头能够有效地引导用户浏览页面,帮助他们理解流程或找到特定...

    200个矢量箭头图标

    例如,它们可能包括直线箭头、曲线箭头、双向箭头、循环箭头、带文字的箭头、手绘箭头等。每一种箭头都有可能有不同的大小和角度,以满足指向不同方向的需求。这些图标可能还分为不同的类别,比如基本箭头、流程图...

    网页箭头小图标

    在网页设计中,图标起着至关重要的作用,它们可以简洁明了地传达信息,增强用户体验。"网页箭头小图标"是一组专为网页设计准备的箭头图形资源,适用于各种网页布局、导航、交互元素等场景。这些图标通常以矢量格式...

Global site tag (gtag.js) - Google Analytics