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

发布网友发布时间：2022-05-03 11:47

共2个回答

热心网友时间：2022-04-20 12:31

<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/html; charset=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>

热心网友时间：2022-04-20 13:49

【跨浏览器的固定定位】

首先要先说说这个东西position:fixed，它的作用是跨浏览器的固定定位。

摘自详解定位与定位应用：
“如让一个元素可能随着网页的滚动而不断改变自己在浏览器的位置。而现在我可以通过CSS中的一个定位属性来实现这样的一个效果，这个元素属性就是曾经不被支持的position:fixed; 他的含义就是：固定定位。这个固定与绝对定位很像，唯一不同的是绝对定位是被固定在网页中的某一个位置，而固定定位则是固定在浏览器的视框位置。”

程序中很多地方利用了这个css，ie7、ff都支持这个css，但ie6不支持，程序中只能是在ie6模拟这个效果。

参考资料：http://www.blueidea.com/common/shoutbox/redir.asp?9=u&id=11421