原生JavaScript实现Tooltip浮动提示框特效

使用原生JavaScript设计和实现Tooltip浮动提示框特效,了解代码简化、事件绑定、事件冒泡等技巧和知识。

特效四个关键点:

显示:鼠标移到ToolTip超链接上时,ToolTip提示框可以显示出来 隐藏:鼠标移开时,ToolTip提示自动隐藏 定位:ToolTip提示框的位置需要根据ToolTip超链接的位置来设置 可配置:ToolTip提示框可以根据参数不同,改变尺寸和显示内容

注意点:

1)border-radius和 Box-shadow兼容写法

2)不论鼠标指针穿过被选元素或其子元素,都会触发 mouSEOver 事件。对应mouSEOut

只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。对应mouseleave

3)W3C规定不允许内联元素嵌套块级元素 ,其中的a链接嵌套了div,可能不符合W3C标准( tip:他是移入a链接的时候在a链接中创建的div )

简单的函数封装写法(便于引用,缩短代码量):

1)通过元素的id获得元素的DOM引用

2)绑定事件的函数

函数 if(obj.addEventListener){ //非IE,支持冒泡和捕获 obj.addEventListenner(event,fn,false); }else if(obj.attachEvent){ //IE,只支持冒泡 obj.attachEvent('on'+event,fn); } }

效果如图:

Meta charset="UTF-8">
原生JavaScript实现ToolTip效果

ToolTip效果是非常常见的网页特效,它可以在用户将指针放置在控件上时为用户显示提示信息。 比如简称文字显示一行文字全称,例:。 又比如显示一段文字,例:唐诗三百首中的你会么?如果不看tooltip提示你背不出来的话,那么你 可要加油了。

ToolTip效果还可以用来显示图片,例:。当然显示一块儿带格式的内容也不在话下,例:

甚至你可以显示一整个网站:例:

注意好的ToolTip需要考虑样式、效果页面的边界等信息,希望你可以做出更漂亮的ToolTip效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

相关文章

事件冒泡和事件捕获 起因:今天在封装一个bind函数的时候,发现el.addEventListener函数支持第三个参数...
js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型,number类型相当于其他强类型语言...
什么是跨域 跨域 : 广义的跨域包含一下内容 : 1.资源跳转(链接跳转,重定向跳转,表单提交) 2.资源...
@ "TOC" 常见对base64的认知(不完全正确) 首先对base64常见的认知,也是须知的必须有...
搞懂:MVVM模式和Vue中的MVVM模式 MVVM MVVM : 的缩写,说都能直接说出来 :模型, :视图, :视图模...
首先我们需要一个html代码的框架如下: 我们的目的是实现ul中的内容进行横向的一点一点滚动。ul中的内容...