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

最新推荐文章于 2021-12-03 23:45:51 发布

yayun0516

最新推荐文章于 2021-12-03 23:45:51 发布

阅读量1.3w

点赞数 5

分类专栏： javaScript 文章标签：广告浮动 javascript html

本文链接：https://blog.csdn.net/yayun0516/article/details/41545997

版权

javaScript 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

首先介绍一种设置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">
#ad{width: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">
#ad{width: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>

yayun0516

关注

5
点赞
踩
18

收藏

觉得还不错? 一键收藏
1
评论
html+javascript实现广告窗自由浮动

首先介绍一种设置div初始位置的定位方法：.html代码如下：层的移动#ad{width:120px;height:120px;background:url(images/default.gif);position:relative;} var obj = null; function init(){ obj = document.getElement
复制链接

扫一扫