热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

这篇文章主要为大家详细介绍了原生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引用

var $ = function(id){
return document.getElementById(id);
 }

2)绑定事件的函数

function addEvent(obj,event,fn){ //要绑定的元素对象,要绑定的事件,触发的回调函数
if(obj.addEventListener){ //非IE,支持冒泡和捕获
obj.addEventListenner(event,fn,false);
}else if(obj.attachEvent){ //IE,只支持冒泡
obj.attachEvent('on'+event,fn);
}
}

效果如图:




  
  




原生Javascript实现ToolTip效果

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

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

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

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

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


推荐阅读
author-avatar
让生活洒满阳光_622
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有