轻量级射流研究…工具提示提示效果

鼠标经过出现的提示效果，比标题更漂亮，可订制JS:复制代码代码如下： //-工具提示效果开始- //获取某个超文本标记语言元素的定位函数GetPos(obj){ var pos=new Object()；pos。x=obj。offsetleftpos。y=obj。偏移；while(obj=obj。offsetparent){ pos。x=obj。offsetleftpos。y=obj。偏移；}退货单；};//提示工具var ToolTip={ _ tipPanel:null，init : FuncTion(){ if(null==this ._ Tipanel){ var TempDiv=document。create element(' div ')；文件。尸体。在(tempDiv，文档)之前插入。尸体。子节点[0])；tempDiv.id=' tipPaneltempdiv。风格。display=" none' tempDiv.style.position='绝对；tempdiv。风格。zindex=' 999} }，AttachTip:function(){}，//添加提示绑定DetachTip:function(){}，//移除提示绑定show tip :函数(Otarget){ if($(' Tipanel ')==null)返回；/*操作流程*1、构建新的超文本标记语言片段*2、设置提示框新位置*3、显示提示框*///1.var tempStr=//html片段if(参数。长度1){ for(var I=1；长度；i ){ tempStr='p '参数[I]'/p '；} } $(' Tipanel ').innerHTML=TempStr//2 . var pos=GetPoS(Otarget)；$(' Tipanel ')。风格。左=(Otarget。在第/2个位置之间。x)' px '；$(' Tipanel ')。风格。top=(Otarget。偏移右侧位置。y)' px '；//3.$(' Tipanel ')。风格。display=}，hidetip :函数(){ if($(' Tipanel ')==null)返回；$(' Tipanel ')。风格。显示='无'；} };//-工具提示效果结束- CSS:复制代码代码如下： # Tipanel {背景：白色；padding:6px 8px宽度width :300 pxborder : solid 4px # 09 cfont-size :14 px；color : # 555 } # Tipanel p { margin 33600 px } # Tipanel b { color : redfont-size :14 px；} HTML调用：复制代码代码如下：正文输入类型='按钮'值='悬停我'在mouseover='工具提示上.ShowTip(这个，)日期：2010-7-19');'onmouseout=“工具提示”.HideTip()；style=' margin :200 px 100 px '//正文脚本类型=' text/JavaScript '//initialize tooltip控件工具提示.init()；/script使用效果

上面的$(“id”)作用等价于文件。getelementbyid(' id ')attachtip : function(){ }，//添加提示绑定DetachTip:function(){}，//移除提示绑定这两行，可以用动态绑定事件完成，因为项目里面用不着，所以暂时没加