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

.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;}

//more javascript from http://www.jb51.net

');

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,"
");
Msg=Msg.replace(/\0x13/g,"
");
var re=/\{(.[^\{]*)\}/ig;
if(!re.test(Msg))pltsTitle="简介";
else{
re=/\{(.[^\{]*)\}(.*)/ig;
pltsTitle=Msg.replace(re,"$1")+" ";
re=/\{(.[^\{]*)\}/ig;
Msg=Msg.replace(re,"");
Msg=Msg.replace("
","");}
//var attr=(document.location.toString().toLowerCase().indexOf("list.asp")>0?"nowrap":"");
var content =
'

'+
'

'+
'

'+
'

'+
'

'+pltsTitle+'

'+pltsTitle+'

'+Msg+'

'+pltsTitle+'

'+pltsTitle+'

';
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();
//-->

蝶恋花

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

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

    无论是提示框还是导航栏都能看到如上图所示的带有箭头的框框,这种箭头可以通过背景图片或者是css来实现,本文介绍三种通过css实现带箭头的提示框. 1.通过border属性 思路:两个三角形,通过定位使两个三角形相差1px作为边框. 2.CSS3 transfrom 思路:先做一个两条边相同颜色的正方形,然后旋转一定角度就是三角形了 3.特殊字符'♦' 思路:特殊字符漏出上半部分,看上去就像三角形了 一.通过border属性: 我们先做一个宽和高都是10px的div,边框也是10px, width

  • jQuery带箭头提示框tooltips插件集锦

    摘要: 之前给大家介绍过用CSS来实现带箭头的提示框,今天我们来点不太一样的,本文将分享几款带箭头提示框. qtip qTip是一种先进的提示插件,基于jQuery框架.以用户友好,而且功能丰富,qTip为您提供不一般的功能,如圆角和语音气泡提示,并且最重要的是免费.支持ie6+以及其他主流浏览器 grumble.js grumble.js提供了特殊的提示,北/东/南/西定位的一般限制.可以围绕一个给定的元素以任意角度旋转,任何距离可以被指定,任何CSS样式可以应用.自动尺寸调整为本地化的文本使

  • 基于IOS实现带箭头的view

    我使用DrawRect进行的View的拉伸(是这样描述的吧??), 效果图也实现了类似于微信的View效果, 你可以看一看. 创建继承于UIView的视图 .h文件 // backGoundView @property (nonatomic, strong) UIView * _Nonnull backGoundView; // titles @property (nonatomic, strong) NSArray * _Nonnull dataArray; // images @proper

  • JavaScript实现带箭头标识的多级下拉菜单效果

    本文实例讲述了JavaScript实现带箭头标识的多级下拉菜单效果.分享给大家供大家参考.具体如下: 这是一个支持多级显示的JS菜单,鼠标移向带有小三角的菜单项,可下拉出二级子菜单项,在该主菜单的上方会显示标记,指引当前的位置,本菜单代码使用了一个JS类,可根据代码地址自行下载,这个菜单未在网上测试,用在自己的网站里可能要修改代码. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-focus-m-select-menu-nav-codes/

  • Android自定义ViewGroup实现带箭头的圆角矩形菜单

    本文和大家一起做一个带箭头的圆角矩形菜单,大概长下面这个样子: 要求顶上的箭头要对准菜单锚点,菜单项按压反色,菜单背景色和按压色可配置. 最简单的做法就是让UX给个三角形的图片往上一贴,但是转念一想这样是不是太low了点,而且不同分辨率也不太好适配,干脆自定义一个ViewGroup吧! 自定义ViewGroup其实很简单,基本都是按一定的套路来的. 一.定义一个attrs.xml 就是声明一下你的这个自定义View有哪些可配置的属性,将来使用的时候可以自由配置.这里声明了7个属性,分别是:箭头宽

  • Android 带箭头的指引tipLayout实现示例代码

    本文介绍了Android 带箭头的指引tipLayout实现示例代码,分享给大家,具体如下: 如上是从UI接过来的设计图,要求三角形指示器需要动态对齐上面的文本,需要动态的实现对其三角形. 引用方式 compile 'com.xiaowei:TriangleTipLayout:1.0.0' 实现思路 准备一个三角形指引的图片即可. 先上代码 final TextPaint textPaint = mTextView.getPaint(); final int textHeight = (int)

  • PHP开启目录引索+fancyindex漂亮目录浏览带搜索功能

    PHP开启目录引索 一. 前言 不知为何对nginx情有独钟, 最近练习php, 为了方便写代码, 便想要开启nginx的目录索引功能, 显然不如Apache开启的方便, 几次尝试都崩了... 我这个小白确实有点看不懂nginx的配置文件. 不过最后还是成功了, 记录一下, 万一哪天忘了, 回来看看. 我们都知道在apache下可以配置访问web服务器的某个路径时,自动显示其目录下面的文件列表的,其实Nginx一点也不比apache弱,它当然也可以实现这个功能,而且还非常容易和简单:(嗯, 确实

  • js实现带箭头的进度流程

    本文实例为大家分享了js实现带箭头进度流程的具体代码,供大家参考,具体内容如下 html <ul class="cssNav"> <li v-for="(item,i) in list" :class="[num==i?'active':'']" @click="tab(i)">{{item}}</li> </ul> css .cssNav { margin: 100px aut

  • 使用Matplotlib绘制不同颜色的带箭头的线实例

    周五的时候计算出来一条线路,但是计算出来的只是类似与 0->10->19->2->..0 这样的线路只有写代码的人才能看的懂无法直观的表达出来,让其它同事看的不清晰,所以考虑怎样直观的把线路图画出来. &esp; 当然是考虑用matplotlib了, 导入相关的库 import matplotlib.pyplot as plt import numpy import matplotlib.colors as colors import matplotlib.cm as cm

  • mapboxgl实现带箭头轨迹线的代码

    最近在使用mapboxgl实现轨迹展示时,想实现类似高德地图导航轨迹效果,然而并未在网上找到类似示例.经一番研究与尝试,最终解决,效果如下. 添加箭头核心代码如下,只需在配置layout中添加symbol-placement和symbol-spacing属性即可: // 添加箭头图层 function addArrowlayer() { map.addLayer({ 'id': 'arrowLayer', 'type': 'symbol', 'source': { 'type': 'geojso

随机推荐