实现图片浮动

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>


<body >

<div id="moveLayer" style="position:absolute;
left:24px;
top:256px;
width:81px;
height:54px;
z-index:4;"/><a href="http://www.baidu.com" target="_blank"><img src="D:\\Program Files\\Tencent\\QQ\\85839593\\QQPhoto\\9284595_1.jpg" width="80" height="52" /></a></div>
<script language="javascript">

var xpos=0;//x轴的坐标像素
var ypos=0;//y轴的坐标像素
var xon=0;//控制在x轴上的方向
var yon=0;//控制y轴上的方向
var step=0.3;//移动速度
function aa(){alert('aa');}
function randomMove()
{
var width=document.documentElement.offsetWidth;//浏览器宽度
// alert(width);
var height=document.documentElement.offsetHeight;//浏览器高度
//var width=document.documentElement.offsetWidth;//浏览器宽度 (这里用offsetWidth也行,但在dreamweaver中必须用documentElement,不能用body!因为dreamweaver所做//的是xhtml,而不是html)
//var height=document.documentElement.offsetHeight;//浏览器高度
var layerWidth=document.getElementById("moveLayer").offsetWidth;//层宽度
var layerHeight=document.getElementById("moveLayer").offsetHeight;//层高度
document.getElementById("moveLayer").style.pixelTop=ypos+document.documentElement.scrollTop;
//随滚动条移动(同时也刷新层移动后的位置)(如果div对象中没有style样式的话,将不会移动.因为找不到document.getElementById("moveLayer").style.这种style样式!)
document.getElementById("moveLayer").style.pixelLeft=xpos+document.documentElement.scrollLeft;//随滚动条移动

//if(moveLayer.onmouseover){return false;}


if(xon==0)//在x方向上移动(右移)
{
xpos+=step;
}
else//左移
{
xpos-=step;
}
if(xpos<0)
{
xon=0;
xpos=0;
}
else if(xpos>=(width-layerWidth))//如果碰到浏览器的右端时,要左移
{
xon=1;
xpos=(width-layerWidth);
}



if(yon==0)//y轴上向下移动
{
ypos+=step;
}
else//y轴向上移动
{
ypos-=step;
}

if(ypos<0)//当图片遇到浏览器上边框时要转动方向
{
yon=0;
ypos=0;
}
else if(ypos>=(height-layerHeight))//遇到下边界时要上移
{
yon=1;
ypos=(height-layerHeight);
}



moveLayerStop=setTimeout("randomMove()",30);
}
moveLayer.onload=randomMove();
</script>
</body>

</HTML>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值