JS漂浮广告完善效果

时间:4年前   阅读:4893

1、直接代码演示

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title></title>    
		<style type="text/css">    
			*{    
				padding: 0;    
				margin: 0;    
			}    
			#dd{    
				width: 540px;    
				height: 280px;    
				border: 1px solid blue;    
				background: url(../zb_users/upload/2019/03/201903251553520348126785.jpg) no-repeat;    
				position: absolute;    
				left: 0;    
				top: 0;    
			}    
		</style>    
		<script type="text/javascript">    
			window.onload = function(){    
				var dd = document.getElementById('dd');    
				var tt = document.getElementById('tt');    
//				clientHeight 获得可视区域的宽高    
				var ks1 = document.documentElement.clientHeight;    
//				获得可视区域的宽度    
				var ks2 = document.documentElement.clientWidth;    
//				计算可以达到的最大的top和left值    
//				可视的高度减去这个图片元素本身的高度offsetHeight(就是从上到底的高度)    
				var jd = ks1 - dd.offsetHeight;    
//				可视性的宽度减去这个元素本身的宽度(就是从左到右的宽度)    
				var kd = ks2- dd.offsetWidth;    
//				## 假如x=1或y=1; 1调成5就不能正常显示,因为假如比如高度是309,你一次加5就不能正好到309下面再做判断就不成立了,就控制不住了。所以要在将新值赋值回去之前先做一个判断    
//				var x=1,y=1;    
				var x=5,y=5;    
//				定时器调用的函数开始         为了方便调用,先把定时器独立出来    
//				先给取个名字叫ww    
				function ww(){    
//					获得旧的left和top值        offsetLeft;如果是没有定位的元素,参照于离它最近的有定位属性的元素来获得结果    
					var kk = dd.offsetLeft;    
					var ww = dd.offsetTop;    
//					计算新的left和top值    
//					var kkt = kk+1;    
//					把1改成x可变量  在抓元素上面写 x=1  ,y=1    
					var kkt = kk+x;    
//					var wwt = ww+1;    
					var wwt = ww+y;    
//					## 在这里先做一个判断    
//					假如新的值大过可视最大值  ,那么最新的值就等于最大的值    
					if (wwt>jd) {    
						wwt=jd;    
					}    
					if (kkt>kd) {    
						kkt=kd;    
					}    
//					判断最大的还要判断最小的才行,要不然小的时候控制不住变负数了    
					if (wwt<0) {    
						wwt=0;    
					}    
					if (kkt<0) {    
						kkt=0;    
					}    
//					将新值赋值回去    
					dd.style.left = kkt+'px';    
					dd.style.top = wwt+'px';    
					if (wwt==jd) {    
//						从上到下到底后减top值    
						y=-5;    
					}    
//					wwt==0到顶后又加1,把top变大    
					if (wwt==0) {    
						y=5;    
					}    
//					left走到最大最右后减1    
					if (kkt==kd) {    
						x=-5;    
					}    
//					left走回到最小最左后加1    
					if (kkt==0) {    
						x=5;    
					}    
				}    
//				定时器调用的函数结束	
    
//				调用定时器  这个可以用局部var    
				var nn = setInterval(ww,10);    
//				设置定时器,每隔一段时间就改变一下left和top    
//				 nn = setInterval(function(){    
////					获得旧的left和top值        offsetLeft;如果是没有定位的元素,参照于离它最近的有定位属性的元素来获得结果    
//					var kk = dd.offsetLeft;    
//					var ww = dd.offsetTop;    
//					
    
////					计算新的left和top值    
////					var kkt = kk+1;    
////					把1改成x可变量  在抓元素上面写 x=1  ,y=1    
//					var kkt = kk+x;    
////					var wwt = ww+1;    
//					var wwt = ww+y;    
////					将新值赋值回去    
//					dd.style.left = kkt+'px';    
//					dd.style.top = wwt+'px';    
//					if (wwt==jd) {    
////						从上到下到底后减top值    
//						y=-1;    
//					}    
////					wwt==0到顶后又加1,把top变大    
//					if (wwt==0) {    
//						y=1;    
//					}    
////					left走到最大最右后减1    
//					if (kkt==kd) {    
//						x=-1;    
//					}    
////					left走回到最小最左后加1    
//					if (kkt==0) {    
//						x=1;    
//					}    
//				},10)    
//				定时器结束    
//				给dd加移入事件     onmouseover 用户鼠标移入元素时触发的事件    
				dd.onmouseover = function(){    
//					停止定时器    当鼠标移动到就停止    
					clearInterval(nn);    
				}    
//				给dd加移出事件    
				dd.onmouseout = function(){    
//					恢复定时器  这个用全局定时器    
				nn = setInterval(ww,10);	
    
				}    
//			做一个点击关闭    
//			tt的单击事件    
			tt.onclick = function(){    
//				让广告隐藏    在抓元素那里先抓tt这个元素要不然关不掉    
				dd.style.display = 'none';    
			}    
//			浏览器窗口改变事件    onresize 事件会在窗口或框架被调整大小时发生    
			window.onresize = function(){    
//				让广告归位    
				dd.style.left = 0;    
				dd.style.top = 0;    
//				归位变0后,怕它-5成负数飘走    到0后加    为了严谨的写法    
				x=5,y=5;    
//				我们的窗口发生改变了,当然也要从新获得一下可视大小值重新计算可以到达最大的left和top值    
//				clientHeight 获得可视区域的宽高    
				var ks1 = document.documentElement.clientHeight;    
//				获得可视区域的宽度    
				var ks2 = document.documentElement.clientWidth;    
//				计算可以达到的最大的top和left值    
//				可视的高度减去这个图片元素本身的高度offsetHeight(就是从上到底的高度)    
//				上面要加到这个局部变量改一下var,设成全局变量要不然只能作用在这里上面抓不到    
				jd = ks1 - dd.offsetHeight;    
//				可视性的宽度减去这个元素本身的宽度(就是从左到右的宽度)    
				kd = ks2- dd.offsetWidth;	
    
			}    
		}    
		</script>    
	</head>    
	<body>    
		<div id="dd">    
			<img src="https://www.qiquanji.com/data/img/dmj/201903251553520411176789.jpg" alt=""  id="tt"/>    
		</div>    
	</body>    
</html>

上面代码效果图:

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

上一篇:期权交易需要注意哪些问题?

下一篇:Emlog实现文章隐藏内容登陆后可见的方法

网友评论

请先 登录 再评论,若不是会员请先 注册