<!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: 52px;
text-align: center;
font-weight: bold;
}
.dv_font span {
color: black;
}
div.close {
text-align: right;
margin-right: 5px;
}
</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>
<script type="text/javascript" src="js/watermark.js"></script>
<!--实现水印功能-->
<script type="text/javascript">
watermark.init({
watermark_txt: "watermark test",
watermark_width: 200
});
</script>
</head>
<body>
<div class="dv" style="background-image: url(images/AI.png);">
<div class="close">X</div>
<div class="dv_font">
<span>AI客服</span>
<a id="a_font" href="javascript:void(0);" onclick="gotoAI();" style="display:none;">
AI客服
</a>
</div>
</div>
<!--实现AI广告功能-->
<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坐标
if(e.target.className == 'close') { //单击关闭按钮
$('div.dv').hide();
}
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>