js效果之漂浮广告

最新推荐文章于 2024-03-15 11:32:13 发布

li3196672779

最新推荐文章于 2024-03-15 11:32:13 发布

阅读量419

点赞数

分类专栏： js效果

js效果专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="1.js"></script>
		<style type="text/css">
			*{
				padding: 0;
				margin:  0;
			}
			#box{
				width: 100px;
				height: 100px;
			}
			#X{
				position: absolute;
				right: 0;
				top: 0;
				width: 20px;
				height: 20px;
				text-align: center;
				line-height: 20px;
				background: rgba(0,0,0,.3);
				display: none;
				cursor: pointer;
			}
			#X:hover{
				background: rgba(0,0,0,.7);
			}
			#Box{
				position: relative;
			}
			
		</style>
	</head>
	<body id="Body">
	<div id="box"style="position: absolute; left: 0; top: 0;">
		<div id="Box">
			<span id="X">
				X
			</span>
			
			<img src="img/1.jpg" id='imgs' width="100px" height="100px"/>
		</div>
	</div>
	</body>
</html>

window.onload = function()
{
	//抓最外层盒子
	var box = document.getElementById("box");
	
	//先获取飘来飘去盒子的宽高
	var boxW = box.offsetWidth;
	var boxH = box.offsetHeight;
	
	//抓body
	var Body = document.getElementById("Body");
	
	//抓X
	var X = document.getElementById("X");
	
	//获取可视区域宽高
	var Dwidth = document.documentElement.clientWidth;
	var Dheight = document.documentElement.clientHeight;
	
	//定义递增变量
	var i = 1;
	var j = 1;
	var Imgs;   //定义图片
	var timer = setInterval(aa,2); // 让盒子移动
	
	box.onmousemove = function()
	{                                 //鼠标经过盒子触发事件
		clearInterval(timer);		//清楚移动
		X.style.display = 'block';  //让X显示
		clearInterval(Imgs);    //清楚 图片变换
		
	}
	X.onclick = function()    //点击X触发
	{
		Body.removeChild(box);   //关掉所有
	}
	box.onmouseout = function()    //鼠标移除触发事件
	{
		X.style.display = 'none';   //让X消失
		timer = setInterval(aa,2);   // 继续让盒子移动
		Imgs = setInterval(function(){
		c++;
		if(c == 30)
		{
			c = 1;
		}
		imgs.setAttribute('src','img/'+c+'.jpg');  //继续img变化
	},400)
		
	}
	function aa()
	{
		//获取原来的偏移值
		var oldX = parseInt(box.style.left);
		var oldY = parseInt(box.style.top);
		
		//设置新的偏移值
		box.style.left = oldX + i + 'px';
		box.style.top = oldY + j + 'px';
		
		if(oldY + j >= Dheight - boxH)  //如果旧的偏移Y轴值+1 >= 可视区域高度 - 盒子高度
		{
			j = -1;		// 就让 移动变-1， 向上移动
		}
		if(oldY + j <= 0)
		{
			j = 1;
		}
		
		if(oldX + i >= Dwidth - boxW)
		{
			i = -1;
		}
		if(oldX + i <= 0)
		{
			i = 1;
		}
	}
	
	var imgs = document.getElementById("imgs");
	var c = 0;
	Imgs = setInterval(function(){
		c++;
		if(c == 30)
		{
			c = 1;
		}
		imgs.setAttribute('src','img/'+c+'.jpg');
	},400)   //让图片 变化
}