<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
height: 1000px;
}
.dv {
width: 80px;
height: 80px;
position: fixed;
right: 40px;
bottom: 50px;
background-size: 80px;
cursor: pointer;
z-index: 9999999;
}
.dv_font {
margin-top: 72px;
text-align: center;
font-weight: bold;
}
.dv_font span {
color: black;
}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/layer-v3.1.1/layer/layer.js"></script>
</head>
<body>
<div class="dv" style="background-image: url(images/AI.png);">
<div class="dv_font">
<span>AI客服</span>
<a id="a_font" href="javascript:void(0);" onclick="gotoAI();" style="display:none;">AI客服</a>
</div>
</div>
<script>
//獲取元素
var dv = document.getElementsByClassName('dv')[0];
var x = 0;
var y = 0;
var l = 0;
var t = 0;
var isDown = false;
var isDrag = false; //默認非拖動
var timmerHandle = null;
//鼠標按下事件
dv.onmousedown = function(e) { //獲取x座標和y座標
x = e.clientX;
y = e.clientY;
//獲取左部和頂部的偏移量
l = dv.offsetLeft;
t = dv.offsetTop; //開關打開
isDown = true; //設置樣式
isDrag = false; //鼠標down，設置爲非拖動，設置時間器，時間超過200ms，設置成拖動
timmerHandle = setTimeout(setDragTrue, 200);
dv.style.cursor = 'move';
}
function setDragTrue() {
isDrag = true;
}
//鼠標移動
window.onmousemove = function(e) {
if (isDown == false) {
return;
}
//獲取x和y
var nx = e.clientX;
var ny = e.clientY; //計算移動後的左偏移量和頂部的偏移量
var nl = nx - (x - l);
var nt = ny - (y - t);
dv.style.left = nl + 'px';
dv.style.top = nt + 'px';
}
//鼠標擡起事件
dv.onmouseup = function() { //開關關閉
isDown = false;
dv.style.cursor = 'pointer';
clearTimeout(timmerHandle); //鼠標up,清空時間器，如果是非拖動，彈出AI
if (!isDrag) {
$('#a_font').click();
}
}
function gotoAI() {
var AI_URL = 'https://blog.csdn.net/chadcao';
layer311.open({
type: 2,
title: 'AI客服',
shadeClose: true,
shade: 0.8,
area: ['800px', '600px'],
content: AI_URL //iframe的url
});
}
</script>
</body>
</html>
