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); } }
效果如图:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> body{ font-size: 14px; line-height: 1.8; background: url("img/bg.jpg") no-repeat center top; font-family: "微软雅黑"; } #demo{ width: 500px; margin: 30px auto; padding: 20px 30px; position: relative; background-color: #fff; border-radius: 10px; -moz-border-radius: 10px;/*这个属性 主要是专门支持Mozilla Firefox 火狐浏览器的CSS属性*/ -webkit-border-radius: 10px;/*苹果;谷歌,等一些浏览器认,因为他们都用的是webkit内核*/ box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.2); } #demo h2{ color: #03f; } #demo .tooltip{ color: #03f; cursor: help; } .tooltip-box{ display: block; background: #fff; line-height: 1.6; border: 1px solid #66CCFF; color: #333; padding: 20px; font-size: 12px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; overflow: auto; } #mycard img{ float: left; width: 100px; height: 100px; padding: 10px; } #mycard p{ float: left; width: 150px; padding: 0 10px; } </style> <script type="text/javascript"> window.onload=function(){ //绑定事件的函数 function addEvent(obj,event,fn){ //要绑定的元素对象,要绑定的事件,触发的回调函数 if(obj.addEventListener){ //非IE,支持冒泡和捕获 obj.addEventListener(event,fn,false); }else if(obj.attachEvent){ //IE,只支持冒泡 obj.attachEvent('on'+event,fn); } } //通过用户代理的方式判断是否是IE的方法,不能判断出IE11 var isIE = navigator.userAgent.indexOf("MSIE") > -1; var $ = function(id){ return document.getElementById(id); } var demo = $("demo"); //obj - ToolTip超链接元素 //id - ToolTip提示框id //html - ToolTip提示框HTML内容 //width - ToolTip提示框宽度(可选) //height - ToolTip提示框高度(可选) function showTooltip(obj,id,html,width,height){ if($(id)==null){ //创建 <div class="tooltip-box" id="xx">xxxxxxxx</div> var toolTipBox; toolTipBox = document.createElement('div'); toolTipBox.className = "tooltip-box"; toolTipBox.id = id; toolTipBox.innerHTML = html; obj.appendChild(toolTipBox); toolTipBox.style.width = width ? width + 'px':"auto"; toolTipBox.style.height = height ? height + 'px':"auto"; if(!width && isIE){ toolTipBox.style.width = toolTipBox.offsetWidth;//因为IE不支持auto属性 } toolTipBox.style.position = 'absolute'; toolTipBox.style.display = 'block'; var left = obj.offsetLeft; var top = obj.offsetTop + 20; //当浏览器窗口缩小时不让提示框超出浏览器 if(left + toolTipBox.offsetWidth > document.body.clientWidth){ var demoLeft = demo.offsetLeft; left = document.body.clientWidth - toolTipBox.offsetWidth - demoLeft; if(left < 0) left = 0; } toolTipBox.style.left = left + 'px'; toolTipBox.style.top = top + 'px'; addEvent(obj,"mouseleave" ,function(){ setTimeout(function(){ $(id).style.display = 'none'; },300); }); } else{ //显示 $(id).style.display = 'block'; } } //事件冒泡 addEvent(demo,'mouseover',function(e){ var event = e || window.event; var target = event.target || event.srcElement; if(target.className == "tooltip"){ var _html; var _id; var _width = 200; switch (target.id){ case "tooltip1": _id = "t1"; _html = "中华人民共和国"; break; case "tooltip2": _id = "t2"; _html = "美国篮球职业联赛"; break; case "tooltip3": _id = "t3"; _html = "<h2>春晓</h2><p>春眠不觉晓,</p><p>处处闻啼鸟。</p><p>夜来风雨声,</p><p>花落知多少。</p>"; _width = 100; break; case "tooltip4": _id = "t4"; _html = "<img src='img/1.jpg' width='500' /> "; _width = 520; break; case "tooltip5": _id = "t5"; _html = "<div id='mycard'><img src='img/2.jpg' alt=''/><p><strong>昵称一定要长</strong></p><p>我的简介我的简介</p></div>"; _width = 300; break; case "tooltip6": _id = "t6"; _html = "<iframe src='http://www.imooc.com/' width='480' height='300'></iframe>"; _width = 500; break; } showTooltip(target,_id,_html,_width); } }); /* var t1 = $("tooltip1"); var t2 = $("tooltip2"); var t3 = $("tooltip3"); var t4 = $("tooltip4"); var t5 = $("tooltip5"); var t6 = $("tooltip6"); t1.onmouseenter = function () { showTooltip(this, "t1", '中华人民共和国', 200); }; t2.onmouseenter = function () { showTooltip(this, "t2", '美国篮球职业联赛', 200); }; t3.onmouseenter = function () { showTooltip(this, "t3", '<h2>春晓</h2><p>春眠不觉晓,</p><p>处处闻啼鸟。</p><p>夜来风雨声,</p><p>花落知多少。</p>', 100); }; t4.onmouseenter = function () { showTooltip(this, "t4", '<img src="img/1.jpg" width="500" /> ', 520); }; t5.onmouseenter = function () { var _html = '<div id="mycard"><img src="img/2.jpg" alt=""/><p><strong>昵称一定要长</strong></p><p>我的简介我的简介</p></div>'; showTooltip(this, "t5", _html, 300); }; t6.onmouseenter = function () { var _html = '<iframe src="http://www.imooc.com/" width="480" height="300"></iframe>' showTooltip(this, "t6", _html, 500); };*/ } </script> <body> <div id="demo"> <h2>原生JavaScript实现ToolTip效果</h2> <p>ToolTip效果是非常常见的网页特效,它可以在用户将指针放置在控件上时为用户显示提示信息。 比如简称文字显示一行文字全称,例:<a class="tooltip" id="tooltip1">中国</a>, <a class="tooltip" id="tooltip2">NBA</a>。 又比如显示一段文字,例:唐诗三百首中的<a class="tooltip" id="tooltip3">春晓</a>你会么?如果不看tooltip提示你背不出来的话,那么你 可要加油了。 </p> <p> ToolTip效果还可以用来显示图片,例:<a class="tooltip" id="tooltip4">西湖美景</a>。当然显示一块儿带格式的内容也不在话下,例: <a class="tooltip" id="tooltip5">我的资料</a>。 </p> <p> 甚至你可以显示一整个网站:例:<a class="tooltip" id="tooltip6">慕课网</a>。 </p> <p> 注意好的ToolTip需要考虑样式、效果、页面的边界等信息,希望你可以做出更漂亮的ToolTip效果。 </p> </div> </body> </html>
Tooltip浮动提示框效果(掌握里面的小知识)的更多相关文章
- tip浮动提示框
今天工作中碰到要弹出tip浮动提示框,如服务器控件的ToolTip属性. 通过GOOGLE搜到了一个很好用的tip浮动提示框:TipTip jQuery Plugin. 例子如下: <!DOCT ...
- 【转】提示框第三方库之MBProgressHUD iOS toast效果 动态提示框效果
原文网址:http://www.zhimengzhe.com/IOSkaifa/37910.html MBProgressHUD是一个开源项目,实现了很多种样式的提示框,使用上简单.方便,并且可以对显 ...
- JS组件Bootstrap实现弹出框和提示框效果代码
这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码,对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编 ...
- WPF提示框效果
WPF提示框效果 1,新建WPF应用程序 2,添加用户控件Message 3,在Message中编写如下代码 <Border x:Name="border" BorderTh ...
- div+css实现圆形div以及带箭头提示框效果
.img{ width:90px; height:90px; border-radius:45px; margin:0 40%; border:solid rgb(100,100,100) 1px;& ...
- 基于JQuery 的消息提示框效果代码
提示框效果 一下是封装到 Jquery.L.Message.js 中的JS文件内容 var returnurl = ''; var messagebox_timer; $.fn.messagebox ...
- 单一按钮显示/隐藏&&提示框效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS组件系列——Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
- Bootstrap:弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
随机推荐
- 滚动时div的背景图片随之滚动
在浏览一些网站时发现有一种效果是当滚动时看到某一DIV的背景也会随之滚动,如下: 当滚动时内容位置保持不变,但是内容后面的背景却在随着滚动.随之我通过审查元素看到了其是通过background-pos ...
- Centos rsync文件同步配置
一.服务器端配置: # yum -y install xinetd CentOS默认已经安装了rsync 服务.. 输入 rsync 命令可查看是否安装. # vi /etc/xinetd.d ...
- 百度api集合!
百度 api集市免费接口 IP地址查询 http://apistore.baidu.com/apiworks/servicedetail/114.html 频道新闻API_易源 http://apis ...
- PageRank——Google的民主表决算法
1.搜索和民主表决: 当大多数人认为一件事为真的时候,那么这件事就是为真:即搜索时,其他网页对认为此网页好时,那么此网页排名应该靠前 2.PageRank思想: i.起源: ...
- 微信小程序之----加载中提示框loading
loading loading只有一个属性hidden .wxml <view> <loading hidden="{{hidden}}"> 加载中... ...
- A股暴跌三日市值蒸发4.2万亿 股民人均浮亏超2万
A股暴跌三日市值蒸发4.2万亿 股民人均浮亏超2万 http://finance.qq.com/a/20150508/010324.htm?pgv_ref=aio2015&ptlang=205 ...
- java系列--批量处理
批量删除 批量更新 二.分页 1.基于sql语句 1).基于ROWID分页 2).基于RONUM分页 3).基于数据分析分页 2.基于结果集
- UITableView 之 取消选中
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { [table ...
- PAT1013 数素数
思路: 打印素数表 然后找出对应区间[m,n]中的素数 #include <iostream> #include <vector> #include <cmath> ...
- Unity UGUI —— 无限循环List
还记得大学毕业刚工作的时候是做flash的开发,那时候看到别人写的各种各样的UI组件就非常佩服,后来自己也慢慢尝试着写,发现其实也就那么回事.UI的开发其实技术的成分相对来说不算多,但是一个好的UI是 ...