<head>
<script language="javascript">
function moveImage(){
document.getElementById("div1").style.left = 0
document.getElementById("div1").style.top = document.body.scrollTop
}
var t1 = window.setInterval("moveImage()",100)
</script>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>图片位移</title>
</head>
<body bgcolor="#CCCC00">
<div id="div1" style="position:absolute"><img src="images/hair.png" id="image1" /></div>
</body>
</html>
上面的是你的要求。下面是一个小例子。可以实现图片在页面上滚动。
<script language="javascript">
var left = 0
var top = 0
function moveImage(){
if(left >(document.body.clientWidth)-(document.getElementById("div1").offsetWidth)-4){
left = -left
}
if(top >(document.body.clientHeight)-(document.getElementById("div1").offsetHeight)-4){
top = -top
}
left += 4
top += 4
document.getElementById("div1").style.left = Math.abs(left)
document.getElementById("div1").style.top = Math.abs(top)
}
var t1 = window.setInterval("moveImage()",100)
</script>
<div id="img" style="position:absolute"><a href="#" target="_blank">
<img src="test.gif" >
</a>
</div>
<SCRIPT LANGUAGE="JavaScript1.2">
<!-- Begin
var xPos = 20
var yPos = document.body.clientHeight
var step = 1
var delay = 30
var height = 0
var Hoffset = 0
var Woffset = 0
var yon = 0
var xon = 0
var pause = true
var interval
img.style.top = yPos
function changePos() {
width = document.body.clientWidth
height = document.body.clientHeight
Hoffset = img.offsetHeight
Woffset = img.offsetWidth
img.style.left = xPos + document.body.scrollLeft
img.style.top = yPos + document.body.scrollTop
if (yon) {
yPos = yPos + step
}
else {
yPos = yPos - step
}
if (yPos <0) {
yon = 1
yPos = 0
}
if (yPos >= (height - Hoffset)) {
yon = 0
yPos = (height - Hoffset)
}
if (xon) {
xPos = xPos + step
}
else {
xPos = xPos - step
}
if (xPos <0) {
xon = 1
xPos = 0
}
if (xPos >= (width - Woffset)) {
xon = 0
xPos = (width - Woffset)
}
}
function start() {
img.visibility = "visible"
interval = setInterval(�0�7changePos()�0�7, delay)
}
start()
// End -- >
</script >
JS动态效果，参考如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=UTF-8">
<title>浮动图片</title>
<script type="text/javascript">
var step = 1 // 移动的像素
var y = -1 // 垂直移动的方向，-1表示向上，1表示向下
var x = 1 // 水平移动的方向，-1表示向左，1表示向右
function myFloat()
{
var img = document.getElementById("myImg")
// 获取图片和当前浏览器窗口上边距，由于img.style.top获取的值带px单位
var top = img.style.top.replace("px", "")
// top = top - 100
// img.style.top = top + "px"
// 获取图片和当前浏览器窗口左边距
var left = img.style.left.replace("px", "")
// left = left - 100
// img.style.left = left + "px"
// 上下移动
if(top <= 0)
{
y = 1
}
if(top >= document.body.clientHeight)
{
y = -1
}
top = (top*1) + (step * y)
img.style.top = top + "px"
// 左右移动
if(left <= 0)
{
x = 1
}
// alert(img.clientWidth)
if(left >= (document.body.clientWidth - img.clientWidth))
{
x = -1
}
left = (left*1) + (step * x)
img.style.left = left + "px"
setTimeout("myFloat()", 20)
}
</script>
</head>
<body onload="myFloat()" style="height: 400px">
<img id="myImg" src="IP.gif"
style="position: absolute left: 500px top: 400px border: solid 1px black" />
</body>
</html>
