按效果付费

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">

#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>




您可能还会对下面的文章感兴趣: