1.index.html文件
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div class="div" id="div">
<h3>测试文章</h3>
<p>这是测试的</p>
<a class="tooltip" id="weibo">微博</a>
<a class="tooltip" id="weixin">微信</a>
<a class="tooltip" id="crow">十六乌鸦</a>
<a class="tooltip" id="test">百度链接</div>
</div>
<script src="js/app.js"></script>
</body>
</html>
2.style.css文件
*{
margin:0;/*外边距*/
padding: 0;/*左右边距*/
font-size: 14px;/*字体大小*/
line-height: 1.8;/*行高*/
font-family: "microsoft yahei","微软雅黑";/*字体样式*/
}
.div{
width: 500px;
margin:30px auto;/*外边距自适应*/
padding:20px 30px ;
position:relative;/*定位*/
background-color: #fff;
border-radius: 10px;/*该属性允许您为元素添加圆角边框*/
box-shadow: 0px 0px 0px 10px rgba(0,0,0,1);
}
.div h3{
clolor:#000fff;
font-size: 20px;
}
.div .tooltip{
color: #099FFF;
cursor: pointer;/*鼠标点击事件*/
}
.tooltip-box{
display: block;
background: #fff;
line-height: 1.6;
border: 1px solid #66ccff;/*边框*/
color: #333;
padding: 20px;
font-size: 12px;
border-radius: 5px;
overflow: auto;/*滚动条*/
}
3.app.js文件
在编程中我们可以将公共的部分提取出来打包成一个类这样子便于维护和减少代码量。其中我们在div中多次使用提示框的情况下我们可以使用冒泡的方式也就是switch来简写代码；其中注意不要把"<img src='img/part4.png'>"中的写成"<img src="img/part4.png">"
var className = "tooltip-box";
//提取公共部分
var getDID = function(id){
return document.getElementById(id);
}
//div中的事件冒泡
var parentdiv = getDID("div");
function showTooltip(obj,id,html,width,height){
if(getDID(id) == null){
var tooltipBox;
tooltipBox = document.createElement("div");//创建div
tooltipBox.className = className;
tooltipBox.id = id ;
tooltipBox.innerHTML=html;//添加html内容
obj.appendChild(tooltipBox);//事件产生
//判断传入的宽度是否超过，是就让其自适应
tooltipBox.style.width = width?width+"px":"auto";
//判断高度
tooltipBox.style.height = height?height+"px":"auto";
//防止内容被挤到下面对提示框进行位置定位
tooltipBox.style.position="absolute";
tooltipBox.style.display="block";
//准确定位提示框位置
var left = obj.offsetLeft;
var top = obj.offsetTop+20;//防止挡到内容
//定义提示框的位置
tooltipBox.style.left = left+"px";
tooltipBox.style.top = top+"px";
//当鼠标移开时候的事件监听
obj.addEventListener("mouseout",function(){
setTimeout(function(){
getDID(id).style.display="none";//隐藏
},200)
});
// obj.onmouseout = function(){
// //延时操作
// setTimeout(function(){
// getDID(id).style.display="none";//隐藏
// },500);
// }
}
else{
getDID(id).style.display="block";
}
}
//监听鼠标事件当鼠标移动到上面的时候
parentdiv.addEventListener("mouseover",function(e){
var target = e.target;
if(target.className == "tooltip"){
var _html;
var _id;
var _width;
switch(target.id){
case"weibo":
_id="wb";
_html="这是微博";
_width=150;
break;
case"weixin":
_id="wx";
_html="这是微信";
_width=150;
break;
case"crow":
_id="slwy";
_html="<img src='img/part4.png'>";
_width=350;
break;
case"test":
_id="t";
_html="<iframe src='http://www.baidu.com' width='500' height='300'></iframe>";
_width=500;
break;
}
showTooltip(target,_id,_html,_width);
}
});
// var wb = getDID("weibo");
// var wx = getDID("weixin");
// var slwy = getDID("crow");
// var t = getDID("test");
//
// wb.onmousemove = function(){
// showTooltip(this,"wb","这是微博",150);
// }
//
// wx.onmousemove = function(){
// showTooltip(this,"wx","这是微信",150);
// }
//
// slwy.onmousemove = function(){
// showTooltip(this,"slwy","<img src='img/part4.png'>",350);
// }
//
// t.onmousemove = function(){
// var geek = "<iframe src='http://www.baidu.com' width='500' height='300'></iframe>"
// showTooltip(this,"t",geek,500);
// }
网友评论