html+javascript实现广告窗自由浮动

Posted 2022-07-28 yayun0516

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html+javascript实现广告窗自由浮动相关的知识，希望对你有一定的参考价值。

首先介绍一种设置div初始位置的定位方法：

.html代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=gbk"/>
<title>层的移动</title>
<style type="text/css">
#adwidth:120px;height:120px;background:url(images/default.gif);position:relative;
</style>
<script type="text/javascript">
	
	var obj = null;
	
	
	function init()
		obj = document.getElementById("ad");
		obj.style.left="10px";//设置初始位置
		obj.style.top="10px";
		alert(obj.style.posLeft);//获得方式一
		alert(parseInt(obj.style.left));//获得方式二
	
	
	function move()
		
	

</script>

</head>
<body οnlοad="init()" >

<div id="ad"  >
	
</div>
</body>
</html>

实现广告窗口在可视范围内浮动代码如下：

</pre><pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=gbk"/>
<title>层的移动</title>
<style type="text/css">
#adwidth:120px;height:120px;background:url(images/default.gif);position:relative;
</style>
<script type="text/javascript">
	var id;
	var directionX=true,directionY=true;
	var x=10,y=10;
	var obj = null;
	
	
	function init()
		obj = document.getElementById("ad");//获得对象
		obj.style.posLeft = x;//对象属性设置
		obj.style.posTop = y;
		id = setInterval(move,100);//100ms重复执行move方法
	
	
	function move()
		var width=document.documentElement.clientWidth-obj.offsetWidth;
		var height= document.documentElement.clientHeight-obj.offsetHeight;
		if(x>=width )//说明移动到最右边
			directionX = false;
		
		if(x==0)//移动到最左边
			directionX = true;
		
		if(y >= height)
			directionY = false;
		
		if(y==0)
			directionY = true;
		
		if(directionX) 
			x += 10;
		else 
			x -= 10;
		
		if(directionY) 
			y += 10;
		else 
			y -= 10;
		obj.style.posLeft = x;
		obj.style.posTop = y;
	

</script>

</head>
<body οnlοad="init()" >

<div id="ad">
	
</div>
</body>
</html>

以上是关于html+javascript实现广告窗自由浮动的主要内容，如果未能解决你的问题，请参考以下文章