JS实现图片的浮动,当鼠标向下滑动时,图片始终位于页面的上方,图片随鼠标滑动而动.

JavaScript024

JS实现图片的浮动,当鼠标向下滑动时,图片始终位于页面的上方,图片随鼠标滑动而动.,第1张

<html>

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