超简单漂浮广告代码、网页漂浮广告代码、jQuery漂浮广告、div漂浮层

超简单漂浮广告代码、网页漂浮广告代码、jQuery漂浮广告、div漂浮层简单的漂浮广告,在网页可视区域飘动<!DOCTYPEhtml><htmllang=”en”><head> <metacharset=”UTF-8″&g

简单的漂浮广告,在网页可视区域飘动

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
	<style type="text/css">
		body{height: 10000px;width: 5000px;}
		#floatdivids{
			width: 200px;
			height: 200px;
			position: absolute;
			top: 0;
			left: 0;
			background-color: #ff8015;
			z-index: 1000;
			border: 1px solid #ccc;
		}
	</style>
	<script type="text/javascript">
		var isinter;
		var millisec = 25;//定时器间隔执行时间/毫秒
		var xflo = 0; //漂浮层x坐标
		var yflo = 0; //漂浮层y坐标
		var yistop = false;
		var xisleft = true;
		function floatadfun(){
			kwidth = $(window).width();//可视区域宽度
			kheight = $(window).height();//可视区域高度

			divwidth = $('#floatdivids').width();//div漂浮层宽度
			divheight = $('#floatdivids').height();//div漂浮层高度

			hstop = jQuery(window).scrollTop();//滚动条距离顶部的高度
			wsleft = jQuery(window).scrollLeft();//滚动条距离最左边的距离

			offwidth = (kwidth-divwidth);//div偏移的宽度
			offheight = (kheight-divheight);//div偏移的高度

			if (!yistop) {
				yflo++;
				if (yflo >= offheight) {
					yistop = true;
				}
			} else {
				yflo--;
				if (yflo <= 0) {
					yistop = false;
				}
			}

			if (xisleft) {
				xflo++;
				if (xflo >= offwidth) {
					xisleft = false;
				}
			} else {
				xflo--;
				if (xflo <= 0) {
					xisleft = true;
				}
			}

			$('#floatdivids').css({'top':yflo+hstop,'left':xflo+wsleft}); /* 如果使用固定定位,请把加上滚动条的距离去掉即可 */
		}

		$(function () {
			isinter = setInterval("floatadfun()",millisec);
			$('#floatdivids').mouseover(function () {
				clearInterval(isinter);
			}).mouseout(function () {
				isinter = setInterval("floatadfun()",millisec);
			});
			$('#ClickRemoveFlo').click(function () {
				$(this).parents("#floatdivids").slideUp(500,function(){
					clearInterval(isinter);
					$(this).remove();
				});
			});
		});
	</script>
</head>
<body>
<div id="floatdivids">
	<span id="ClickRemoveFlo" style="position: absolute;top: 0;right: 0;color: #fff;background-color: rgba(0, 0, 0, 0.5);padding: 0 5px;cursor: pointer;">X</span>
	小鹿乱撞!!<br>弹弹弹!
</div>
</body>
</html>

 

欢迎大家一起来学习!

 

今天的文章超简单漂浮广告代码、网页漂浮广告代码、jQuery漂浮广告、div漂浮层分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/63659.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注