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程序设计有所帮助。
相关推荐
-
轻量级 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
-
js提示信息jtip封装代码,可以是图片或文章
话说本人转行做了前端,于是乎每天都是些div+css啥的.今天就讲讲这个用js实现类似于A标签里的title或alt功能,至于这个功能有什么好处呢,你听我慢慢道来,首先title或alt属性所带来的提示太过于简单,样式也无法修改,而且鼠标要移到元素上等待1至3秒钟才会显示出来,内容也只有简单的文字,无法加入html内容.所以呢,综上所述,只好自己封装一个属于自己的js提示框了.或许你会说jquery不是有个jtip组件吗?不错,那说明你的思想还挺前卫.如果用得习惯的话那就用吧,反正用谁不是用呢?
-
JS仿百度搜索自动提示框匹配查询功能
1. 添加动态加载css文件 不需要引入css css全部在JS动态生成.2. 不需要额外的标签 只需要一个input输入框 并且默认指定一个class类名为 "inputElem" 当然也可以自己配置参数 还需要一个当前父级容器增加一个默认类名 parentCls(也可以自己配置),因为输入框匹配值后需要一个隐藏域 所以需要隐藏域增加一个class "hiddenCls" 当然也支持自己配置参数. 如下代码: 复制代码 代码如下: <div class=&q
-
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
-
JS组件Bootstrap实现弹出框和提示框效果代码
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的系统有一个友好的弹出提示框,自然能给用户很好的页面体验.前面几章介绍了bootstrap的几个常用组件,这章来看看bootstrap里面弹出框和提示框的处理.总的来说,弹出提示主要分为三种:弹出框.确定取消提示框.信息提示框.本篇就结合这三种类型分别来介绍下它们的使用. 一.Bootstrap弹出框
-
jquery.cvtooltip.js 基于jquery的气泡提示插件
序 1.插件名cvtooltip中的cv是ChinaValue的首字母缩写,而tooltip就是提示啦. 2.适用于新功能的提示,引导用户的提示,即时类消息的提示,操作失败提示(操作成功了也没人拦着)等等等,使用css实现,不附带任何图片文件. 3.目前发现的问题,在Chorme中表现的不给力,是由于Chrome对页面的解析与IE和FF不同,导致jquery的position或者offset返回值不同. 4.该插件依然是练习之作,一人之力,错误难免. 实例演示 1.载入页面的同时,气泡提示也显示
-
新鲜出炉的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)实现源码解读
而对于图片标签img也有一个alt属性可以起到类似的作用.但很显然这种提示框太单调了,为此有人用JavaScript实现了漂亮的提示框效果,这种效果常用在WEB游戏中,其中下图的网易邮箱与迅雷影视页面就用到这种效果,虽然彼此实现效果有些差异,但整体实现思路是不变的.为了方便大家了解实现的细节,以方便定制自己想要的效果,我上网找了一段不错的源码,并对其进行了详细的注释,希望对大家有帮助. 含注释代码: 复制代码 代码如下: /************************************
-
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实现延时显示提示框效果
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提示框效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!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实现跟随鼠标的链接文字提示框效果.分享给大家供大家参考.具体如下: 这里使用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实现简单的拖拽效果的具体代码,供大家参考,具体内容如下 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> <
随机推荐
- JS组件Bootstrap Select2使用方法解析
- 详解在spring boot中配置多个DispatcherServlet
- MVC+EasyUI+三层新闻网站建立 实现登录功能(四)
- 使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
- php+Mysqli利用事务处理转账问题实例
- img的src地址是一个请求的方式来显示图片方法
- Android实现分享功能
- 我的论坛源代码(四)
- Android开发方式之Java+html+javascript混合开发
- Linux 命令每天必学(34)之du命令
- javascript学习笔记(十) js对象 继承
- Android 简易手势密码开源库详解
- Android N多窗口支持
- python中的文件打开与关闭操作命令介绍
- 代码详解java里的“==”和“equels”区别
- Ajax异步检查用户名是否存在
- 你可能从未使用过的11+个JavaScript特性(小结)
- Python中实现输入超时及如何通过变量获取变量名
- Java反射技术原理与用法实例分析
- 解决echarts数据二次渲染不成功的问题