JavaScript实现简单Tip提示框效果

本文实例讲述了JavaScript实现简单Tip提示框效果。分享给大家供大家参考，具体如下：

// JavaScript Document
document.write("<div id='tip' style='position:absolute; width:300px; z-index:1; background-color: #ffffff; border: 1px solid gray; overflow: visible;visibility: hidden;font-size:12px;padding:12px;color:#333333'></div>")
function showtip(w){
 var x=event.x;
 var y=event.y;
 tip.innerHTML=w;
 tip.style.visibility="visible";
 tip.style.left=x+10;
  tip.style.pixelTop=y+document.body.scrollTop+10;
}
function hidetip(){
 tip.style.innerHTML=""
 tip.style.visibility="hidden";
}

以上另存为： showtip.js

<table width="100%" border="0" cellspacing="0" cellpadding="0" background="#F7F7F0">
<tr height="25">
<td background="images/line-dot.gif" height="20" align="left"><IMG height="5" src="images/dot2.gif" width="5">
<a
 onmousemove="showtip('<b>标题：</b><br>毕业女生 自信更在包装外<br>')"
 onmouseout=hidetip()
 href='Common/NewsDetails.aspx?id=1035'
 target=_blank>
 毕业女生 自信更在包装外
 </a>
</td>
</tr>
<tr>
<td background="images/point_h.gif" height="1"></td>
</tr>
</table>

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • js提示信息jtip封装代码，可以是图片或文章

    话说本人转行做了前端,于是乎每天都是些div+css啥的.今天就讲讲这个用js实现类似于A标签里的title或alt功能,至于这个功能有什么好处呢,你听我慢慢道来,首先title或alt属性所带来的提示太过于简单,样式也无法修改,而且鼠标要移到元素上等待1至3秒钟才会显示出来,内容也只有简单的文字,无法加入html内容.所以呢,综上所述,只好自己封装一个属于自己的js提示框了.或许你会说jquery不是有个jtip组件吗?不错,那说明你的思想还挺前卫.如果用得习惯的话那就用吧,反正用谁不是用呢?

  • 新鲜出炉的js tips提示效果

    兼容性已经测过:IE6\IE7\IE8\FF3\CHROME10 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

  • JavaScript Title、alt提示（Tips）实现源码解读

    JavaScript Title、alt提示（Tips）实现源码解读

    而对于图片标签img也有一个alt属性可以起到类似的作用.但很显然这种提示框太单调了,为此有人用JavaScript实现了漂亮的提示框效果,这种效果常用在WEB游戏中,其中下图的网易邮箱与迅雷影视页面就用到这种效果,虽然彼此实现效果有些差异,但整体实现思路是不变的.为了方便大家了解实现的细节,以方便定制自己想要的效果,我上网找了一段不错的源码,并对其进行了详细的注释,希望对大家有帮助. 含注释代码: 复制代码 代码如下: /************************************

  • JS仿百度搜索自动提示框匹配查询功能

    1. 添加动态加载css文件 不需要引入css css全部在JS动态生成.2. 不需要额外的标签 只需要一个input输入框 并且默认指定一个class类名为 "inputElem" 当然也可以自己配置参数 还需要一个当前父级容器增加一个默认类名 parentCls(也可以自己配置),因为输入框匹配值后需要一个隐藏域 所以需要隐藏域增加一个class "hiddenCls" 当然也支持自己配置参数. 如下代码: 复制代码 代码如下: <div class=&q

  • JavaScript基础教程之alert弹出提示框实例

    JavaScript基础教程之alert弹出提示框实例

    alert 命令弹出一个提示框 为便于对 JavaScript 有一个直观的认识,本节会提供几个简单的实例供 JavaScript 入门学习之用.下面的代码是一个弹出提示框的例子: 复制代码 代码如下: <script type="text/javascript"> alert("我是提示文字!"); </script> 将上面部分代码,用文本编辑器(如写字板或其他更高级的编辑器,如 EditPlus 等)保存为 alert.html(或 a

  • javascript tips提示框组件实现代码

    tip.js 复制代码 代码如下: function tips(obj,tag){ var tip = document.createElement('div'),arg= arguments[2],left,top; //创建tipbox var bodywid= document.documentElement.clientWidth; //这里也可以替换为容器的宽度$(id).outerWidth(); var abs = obj.getElementsByTagName(tag); ti

  • jquery.cvtooltip.js 基于jquery的气泡提示插件

    序 1.插件名cvtooltip中的cv是ChinaValue的首字母缩写,而tooltip就是提示啦. 2.适用于新功能的提示,引导用户的提示,即时类消息的提示,操作失败提示(操作成功了也没人拦着)等等等,使用css实现,不附带任何图片文件. 3.目前发现的问题,在Chorme中表现的不给力,是由于Chrome对页面的解析与IE和FF不同,导致jquery的position或者offset返回值不同. 4.该插件依然是练习之作,一人之力,错误难免. 实例演示 1.载入页面的同时,气泡提示也显示

  • JS组件Bootstrap实现弹出框和提示框效果代码

    JS组件Bootstrap实现弹出框和提示框效果代码

    前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的系统有一个友好的弹出提示框,自然能给用户很好的页面体验.前面几章介绍了bootstrap的几个常用组件,这章来看看bootstrap里面弹出框和提示框的处理.总的来说,弹出提示主要分为三种:弹出框.确定取消提示框.信息提示框.本篇就结合这三种类型分别来介绍下它们的使用. 一.Bootstrap弹出框

  • 轻量级 JS ToolTip提示效果

    轻量级 JS ToolTip提示效果

    鼠标经过出现的提示效果,比title更漂亮,可订制.JS: 复制代码 代码如下: //---------------------------tooltip效果 start----------------------------------- //获取某个html元素的定位 function GetPos(obj){ var pos=new Object(); pos.x=obj.offsetLeft; pos.y=obj.offsetTop; while(obj=obj.offsetParent

  • JavaScript实现简单Tip提示框效果

    本文实例讲述了JavaScript实现简单Tip提示框效果.分享给大家供大家参考,具体如下: // JavaScript Document document.write("<div id='tip' style='position:absolute; width:300px; z-index:1; background-color: #ffffff; border: 1px solid gray; overflow: visible;visibility: hidden;font-size

  • javascript 实用的文字链提示框效果

    效果要基本实现以下功能: (1)鼠标滑过文章中的链接文字,要在相应位置弹出提示框,提示框的样式由css来控制,高度自适应:鼠标可以点击提示框的中的链接,滑离提示框时,框自动消失: (2)把提示框的位置控制在文本域范围之内,如果链接文字处在文本域左侧,提示框要居右显示,使其不会出离文本域:反之,如果链接文字处在文本域右侧,提示框要居左显示: (3)如果文本域内容很多,而链接文字恰巧处于浏览器底部,为了使提示框不出离于浏览器的可视范围,提示框的位置要自动调整到链接文字的上面: 1.css 复制代码

  • javascript实现延时显示提示框效果

    javascript实现延时显示提示框效果

    js延时提示框效果演示: 实现方法 移入显示,移出隐藏 移除延时隐藏,可以实现从第一个div移入第二个div,仍然可以显示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/x

  • javascript弹出带文字信息的提示框效果

    本文实例讲述了javascript弹出带文字信息的提示框效果.分享给大家供大家参考,具体如下: tooltips.js: // position of the tooltip relative to the mouse in pixel // var offsetx = 12; var offsety = 8; function newelement(newid) { if(document.createElement) { var el = document.createElement('di

  • jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)

    jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)

    本文实例讲述了jQuery实现漂亮实用的商品图片tips提示框效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script type="text/javascript&

  • JS实现跟随鼠标的链接文字提示框效果

    JS实现跟随鼠标的链接文字提示框效果

    本文实例讲述了JS实现跟随鼠标的链接文字提示框效果.分享给大家供大家参考.具体如下: 这里使用JavaScript与CSS实现链接提示效果,不会改变你原来的链接结构,使用链接原有的title标签来实现,如果之前你使用有title标签,那你几乎只需把JS代码拷贝到你的网页中即可.你会发现,运行本效果后,鼠标在链接上移动的话,文字提示框会跟随鼠标而移动位置. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran

  • jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析

    本文实例讲述了jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法.分享给大家供大家参考,具体如下: 实现效果如上图,当鼠标放置到名字上时,则显示出内容详情. 实现具体过程如下: 1.需要加这句js <!--实现鼠标放置名字上显示气泡说明的js--> <script> $(function () { $('[data-toggle="popover"]').popover() }); </script> 2.html代码如下: <td

  • JavaScript实现简单的拖拽效果

    JavaScript实现简单的拖拽效果

    本文实例为大家分享了JavaScript实现简单的拖拽效果的具体代码,供大家参考,具体内容如下 1.先搭架子: * { margin: 0; padding: 0; } p { background: skyblue; text-align: center; } html, body { width: 100%; height: 100%; } .mask { width: 100%; height: 100%; position: fixed; left: 0; top: 0; backgro

  • javascript实现简单的鼠标拖动效果实例

    本文实例讲述了javascript实现简单的鼠标拖动效果.分享给大家供大家参考.具体分析如下: 用鼠标拖动一个元素,放到网页的任意一个位置上,这是很常见的,例如很多博客模板版块位置可以自己拖动到相应位置. 下面先写一个简单的可以实现鼠标拖动的效果. 当鼠标按下的时候,记录鼠标当前位置和元素左边距离的差值. 当鼠标移动的时候,给元素的位置赋值,就是鼠标的位置,减去刚才的差值. 当鼠标放开的时候,给鼠标移动和鼠标放开赋值null,让它们不要再有任何动作. 要点一: disx = oevent.cli

  • js实现搜索提示框效果

    本文实例为大家分享了js实现搜索提示框效果的具体代码,供大家参考,具体内容如下 首先写静态页面 <div class="container"> <!-- 搜索框 --> <input type="text" id="search" /> <!-- 动态提示的数据框liebia --> <div id="alert"> <ul></ul> <

随机推荐