我现在有页面有个DIV,里面包着一些数据集,然后我想DIV可以像小广告一样随着滚动条的上下移动而移动,不断漂浮在页面的顶端,就是下面的表格随着滚动条的移动而移动 DIV的样式如下代码:
<div id="d1" style="width:100%;margin-top:10px;margin-bottom:10px;">
<table>
<tr><th>测试</th><th>测试3</th><th>测试2</th></tr>
<tr><td>数据1</td><td>数据2</td><td>数据3</td></tr>
<tr><td>数据1</td><td>数据2</td><td>数据3</td></tr>
</table>
</div>
该DIV外面还有2个DIV包着,有没有代码我只需要传入要漂浮的DIV的id就可以实现跟随滚动条的功能急!
<div id="d1" style="width:100%;margin-top:10px;margin-bottom:10px;">
<table>
<tr><th>测试</th><th>测试3</th><th>测试2</th></tr>
<tr><td>数据1</td><td>数据2</td><td>数据3</td></tr>
<tr><td>数据1</td><td>数据2</td><td>数据3</td></tr>
</table>
</div>
该DIV外面还有2个DIV包着,有没有代码我只需要传入要漂浮的DIV的id就可以实现跟随滚动条的功能急!
<html xmlns="http://www.w3.org/1999/xhtml"><style>
html,body{margin:0;padding:0;}
#d1{position:fixed;top:82px;right:2px;width:100%;margin-top:10px;margin-bottom:10px}
</style>
<!--[if lte IE 6]>
<style>
#d1{position:absolute;top:82px;right:2px;}
</style>
<![endif]-->
<body>
<div id="d1">
<table>
<tr><th>测试</th><th>测试3</th><th>测试2</th></tr>
<tr><td>数据1</td><td>数据2</td><td>数据3</td></tr>
<tr><td>数据1</td><td>数据2</td><td>数据3</td></tr>
</table>
</div>
<script>
if(navigator.userAgent.indexOf("MSIE 6") >-1){
window.onscroll=function(e){
var t = document.documentElement?document.documentElement.scrollTop:document.body.scrollTop;
document.getElementById("d1").style.top = t+82+"px";
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jQuery.js"></script></head><body>
<div id="d1">
<table>
<tr><th>测试</th><th>测试3</th><th>测试2</th></tr>
<tr><td>数据1</td><td>数据2</td><td>数据3</td></tr>
<tr><td>数据1</td><td>数据2</td><td>数据3</td></tr>
</table>
</div>
</body>
<script type="text/javascript">
var x=true,y=true //设置飘动方向
$("#d1").css({
'position':'absolute',
'top':50,
'left':50
})
function float(){
var offset=$("#d1").offset(); if(offset.left==1000){x=false;}
if(offset.left==50){x=true;}
if(offset.top==700){y=false;}
if(offset.top==50){y=true;}
if (x&&y){
$("#d1").css({top:'+=1'}).css({left:'+=1'})
}
if (x&&!y){
$("#d1").css({top:'-=1'}).css({left:'+=1'})
}
if (!x&&!y){
$("#d1").css({top:'-=1'}).css({left:'-=1'})
}
if (!x&&y){
$("#d1").css({top:'-=1'}).css({left:'-=1'})
}
}
var MyMar
var speed=30
MyMar2=setInterval(float,speed);
</script>
</html>
</script>
<div id="d1" style="position:absolute;background:#eeeeee;border:1px dotted #000;">
<table>
<tr><th>测试</th><th>测试3</th><th>测试2</th></tr>
<tr><td>数据1</td><td>数据2</td><td>数据3</td></tr>
<tr><td>数据1</td><td>数据2</td><td>数据3</td></tr>
</table>
</div>
<script type="text/javascript">
function scrollImg(){
var posX,posY;
if (window.innerHeight) {
posX = window.pageXOffset;
posY = window.pageYOffset;
}
else if (document.documentElement && document.documentElement.scrollTop) {
posX = document.documentElement.scrollLeft;
posY = document.documentElement.scrollTop;
}
else if (document.body) {
posX = document.body.scrollLeft;
posY = document.body.scrollTop;
} var ad=document.getElementById("d1");
ad.style.top=(posY+100)+"px";
ad.style.left=(posX+50)+"px";
setTimeout("scrollImg()",100);
}
scrollImg();
</script>