1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

JS漂浮广告代码 浮动广告代码效果实现

这个JavaScript漂浮广告代码是我自己学习的时候写的,不过一次只有漂一个,复制就能用了。也可以根据自已的需要修改成多个飘浮的效果(差不多每一行代码我都注释了,很容易看得懂,写得也比较完善了)。希望站长朋友喜欢。

这个是前端开发的必备的技能,实现思路及方法下面都写得很详细。Js漂浮广告代码比较经典的浮动广告,到现还很实用,如果你是一位站长的话,这种代码是必备的,希望对你有用处。 

<!DOCTYPE html>      <html>      	<head>      		<meta charset="UTF-8">      		<title></title>      		<style type="text/css">      			*{      				padding: 0;      				margin: 0;      			}      			#dd{      				width: 700px;      				height: 450px;      				border: 1px solid blue;      				background: url(../zb_users/upload/2019/04/201904151555302161716963.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,20);        //				给dd加移入事件     onmouseover 用户鼠标移入元素时触发的事件      				dd.onmouseover = function(){      //					停止定时器    当鼠标移动到就停止      					clearInterval(nn);      				}      //				给dd加移出事件      				dd.onmouseout = function(){      //					恢复定时器  这个用全局定时器      				nn = setInterval(ww,20);	        				}      //			做一个点击关闭      //			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/201904151555302357204596.jpg" alt=""  id="tt"/>      		</div>      	</body>      </html>

原文链接:https://www.qiquanji.com/post/7108.html

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

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: