javascript原生脚本代码（飘浮广告）
也算是给自己复习了一遍吧，下面飘浮广告的javascript原生代码和注释；加油程序猿们！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>飘浮广告</title>
		<style type="text/css">
			/**
			 *  设置样式
			 *  一 、 考虑内外填充；
			 *  二 、 飘浮广告必须是绝对定位；
			 *  三 、 根据功能需求 可添加关闭或超链接等功能；
			 */
			*{margin: 0;padding: 0;font-size: 10px;}
			#float{
				width: 135px;
				height: 138px;
				list-style: none;
				position: absolute;
				border: 1px dotted #BEBEBE;
			}
			#close{
				width: 20px;
				height: 20px;
				display: inline-block;
				float: right;
			}
			#float dd img{
				width: 135px;
			}
		</style>
		<!-- 以下为javascript原生代码 -->
		<script type="text/javascript">
			//通过点击叉号图片关闭飘浮广告弹窗
			function closeFloat(){
				document.getElementById('float').style.display='none';
			}
			//根据iD得到对象函数&方法
			function $(id){
				return document.getElementById(id);
			}
			// x轴 定义初始值为0px 可以让广告初始贴服浏览器窗口最左侧 此值需进行计算累加 单位px后续追加
			var xPos = 0 ;
			// y轴 定义初始值为0px 可以让广告初始贴服浏览器窗口最上侧 此值需进行计算累加 单位px后续追加
			var yPos = 0 ;
			// 定义变量xon 用于后续判断 飘浮广告是否达已在浏览器最左侧或者最右侧 如果是最左侧 赋值为0 最右侧 赋值为1
			var xon = 0 ;
			// 定义变量yon 用于后续判断 飘浮广告是否达已在浏览器最上方或者最下侧 如果是最上方 赋值为0 最下方 赋值为1
			var yon = 0 ;
			// 定义一个移动速度的变量
			var step = 1 ;
			/**
			 * 实现一次位移的方法（函数）
			 * 添加计时器循环此方法 即可完成飘浮窗口持续移动的功能
			 */
			function changePos(){
				//获取浏览器页面宽度
				var width = document.documentElement.clientWidth;
				//获取浏览器页面长度
				var height = document.documentElement.clientHeight;
				//获取飘浮广告层的宽度
				var Woffset = $('float').offsetWidth;
				//获取飘浮广告层的长度
				var Hoffset = $('float').offsetHeight;
				// 变化x轴坐标 注意单位的拼接
				$('float').style.left = (xPos+document.documentElement.scrollLeft||document.body.scrollLeft)+'px';
				// 变化y轴坐标 注意单位的拼接
				$('float').style.top = (yPos+document.documentElement.scrollTop||document.body.scrollTop)+'px';
				// xon 等于 0 代表已经飘浮广告层没有到达浏览器窗口的最右侧
				if(xon==0){
					// 那么 飘浮广告层应 从左往右 移动
					xPos = xPos + step ;
				}else{
					// 否则 取反
					xPos = xPos - step ;
				}
				// 如果 xPos 小于0 代表 漂浮广告窗口已经到达浏览器的最左侧
				if(xPos < 0){
					// 将x轴坐标更新 变为0 确保飘浮广告层不溢出浏览器屏幕
					xPos = 0 ;
					// xon等于0 后续飘浮广告将会从右往左移动
					xon = 0 ;
				}
				/**
				 * 如果飘浮广告层已到达最右侧
				 * xPos 飘浮广告的位置 已经大于等于 窗口大小减去飘浮广告层的位置
				 */
				if(xPos>=(width-Woffset)){
					// xon 等于 1 后续将会由右向左移动柜
					xon = 1 ;
					// 确保飘浮广告层不溢出浏览器界面
					xPos = (width-Woffset);
				}
				// yon 等于 0 代表漂浮广告没有到达浏览器最下方
				if(yon==0){
					//那么 飘浮广告 由上往下移动
					yPos = yPos + step ;
				}else{
					//否则 取反
					yPos = yPos - step ;
				}
				// yPos小于0 代表已经到达浏览器最上方
				if(yPos < 0){
					// yPos 等于0 确保飘浮广告层不溢出
					yPos = 0 ;
					// yon 等于0 后续由上至下移动
					yon = 0 ;
				}
				// 如果飘浮广告已经到达浏览器最下方
				if(yPos>=(height-Hoffset)){
					// 那么后续应该往上移动
					yon = 1 ;
					// yPos 等于0 确保飘浮广告不溢出
					yPos = (height-Hoffset) ;
				}
				/**
				 *  计时器 递归 
				 *  result 用于鼠标onmouseover事件
				 */
				result = window.setTimeout('changePos()',20) ;
			}
			// 当浏览器页面加载完成 调用changePos方法 用于后续飘浮广告层的执行
			window.onload=changePos ;
			// 鼠标onmouseover事件 用于暂停飘浮广告层移动
			function stop(){
				// 停止 飘浮广告的移动
				clearTimeout(result) ;
			}
			// 鼠标onmouseout事件 用户鼠标离开 再次启动飘浮广告的执行
			function goOn(){
				//引用 changePos 方法
				changePos() ;
			}
		</script>
	</head>
	<body>
		<dl id="float" onmouseover="stop()" onmouseout="goOn()">
			<img id="close" src="img/timg.jpg" onclick="closeFloat()" >
			<dt>英国新冠变异，传播性高出70%！伦敦紧急封锁！</dt>
			<dd><img src="img/u=888214850,2094894360&fm=173&app=49&f=JPEG.jpg" ></dd>
		</dl>
	</body>
</html>