我目前是用css的固定定位来实现不同位置向不同方向弹气泡，请问如何实现用js脚本计算来实现相同效果，不要使用jquery的，就是普通的js脚本
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<link rel="stylesheet" type="text/css" href="css/css_specific/navigation.css"/>
</head>
<body>
<div class="bubble_position lowerright fixed-btn border">
<a href="javascript:void(0)" title="返回顶部"><img class="img size" src="img/顶部.png"></a>
<a href="javascript:void(0)" title="关注我们"><img class="img size" src="img/二维码.png">
<div class="qrcode qrcode_right">
<div class="absolute_positioning arrow arrow_right"></div>
<img src="img/二维码.png" alt="" style="display:block">
</div>
</a>
<a class="font-size background" href="javascript:void(0)" title="标记/收藏"><img class="img size" src="img/收藏.png"></a>
</div>
<div class="bubble_position upperleft fixed-btn">
<a href="javascript:void(0)" title="返回顶部"><img class="img size" src="img/顶部.png"></a>
<a href="javascript:void(0)" title="关注我们"><img class="img size" src="img/二维码.png">
<div class="qrcode qrcode_left">
<div class="absolute_positioning arrow arrow_left"></div>
<img src="img/二维码.png" alt="" style="display:block">
</div>
</a>
<a class="font-size background" href="javascript:void(0)" title="标记/收藏"><img class="img size" src="img/收藏.png"></a>
</div>
<div class="bubble_position upperright fixed-btn">
<a href="javascript:void(0)" title="返回顶部"><img class="img size" src="img/顶部.png"></a>
<a href="javascript:void(0)" title="关注我们"><img class="img size" src="img/二维码.png">
<div class="qrcode qrcode_right">
<div class="absolute_positioning arrow arrow_right"></div>
<img src="二维码.png" alt="" style="display:block">
</div>
</a>
<a class="font-size background" href="javascript:void(0)" title="标记/收藏"><img class="img size" src="img/收藏.png"></a>
</div>
<div class="bubble_position lowerleft fixed-btn">
<a href="javascript:void(0)" title="返回顶部"><img class="img size" src="img/顶部.png"></a>
<a href="javascript:void(0)" title="关注我们"><img class="img size" src="img/二维码.png">
<div class="qrcode qrcode_left">
<div class="absolute_positioning arrow arrow_left"></div>
<img src="img/二维码.png" alt="" style="display:block">
</div>
</a>
<a class="font-size background" href="javascript:void(0)" title="标记/收藏"><img class="img size" src="img/收藏.png"></a>
</div>
<div class="bubble_position middle fixed-btn">
<a href="javascript:void(0)" title="返回顶部"><img class="img size" src="img/顶部.png"></a>
<a href="javascript:void(0)" title="关注我们"><img class="img size" src="img/二维码.png">
<div class="qrcode qrcode_left">
<div class="absolute_positioning arrow arrow_left"></div>
<img src="img/二维码.png" alt="" style="display:block">
</div>
</a>
<a class="font-size background" href="javascript:void(0)" title="标记/收藏"><img class="img size" src="img/收藏.png"></a>
</div>
</body>
</html>
.border{
border:1px solid gray;
}
.margin{
margin:0px 0px 10px 10px;
}
span{
color:red;
}
.size{
width:300px;
height:300px;
}
.display{
overflow: hidden;
}
.background{
background: teal;
}
.font-size{
font-size: 18px;
}
.absolute_positioning{
position: absolute;
}
.relative_positioning{
position: relative;
}
.bubble_position{
position: fixed;
}
.lowerright{
right: 1%;
bottom: 5%;
}
.upperleft{
left: 1%;
top: 5%;
}
.upperright{
right: 1%;
top: 5%;
}
.lowerleft{
left: 1%;
bottom: 5%;
}
.middle{
left: 50%;
bottom: 50%;
}
button{
width: 130px;
height: 30px;
margin: 0 7px;
background-color: white;
border: 1px solid gray;
border-radius: 8px;
}
button:hover{
background-color:#ff6a00;
color: white;
border-color: #ff6a00;
}
.border{
border:1px solid #eee;
}
.size{
width:30px;
height:30px;
padding: 2px;
}
.background{
background: #96b97d;
}
img{
width: 150px;
}
.qrcode{
display: none;
position: relative;
width: 150px;
height: 150px;
color: #fff;
line-height: 50px;
text-align: center;
border: 1px solid grey;
border-radius: 5px;
background: white;
}
.qrcode_right{
right:165px;
bottom:100px;
}
.qrcode_left{
left:50px;
top:-90px;
}
.arrow{
content: '';
width: 0;
height: 0;
top: 60px;
}
.arrow_right{
right: -10px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid grey;
}
.arrow_left{
left:-10px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid grey;
}
.fixed-btn a:hover .qrcode{
display: block;
}
.fixed-btn {
width: 40px;
background-color: white;
font-size: 24px;
z-index: 999;
}
a{
display: inline-block;
width: 40px;
height: 40px;
text-align: center;
}
首先，尽量避免使用中文命名文件和目录
其次，你没提供效果图，也没提供图片，根本没法知道你到底要干什么