JS实现AI广告功能，实现水印功能

最新推荐文章于 2023-09-25 15:21:29 发布

曹振华

最新推荐文章于 2023-09-25 15:21:29 发布

阅读量315

点赞数

分类专栏： javascript 文章标签： javascript AI 浮动广告水印

本文链接：https://blog.csdn.net/chadcao/article/details/106980314

版权

javascript 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

<!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>

曹振华

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS实现AI广告功能，实现水印功能

<!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: .
复制链接

扫一扫