网页中的DIV层随着页面移动而移动

急急急急啊用DIV+JS使DIV能随着页面上下滚动也跟着滚动(意思就是说,不管你把页面往下拉多远,DIV始终保持在你屏幕的同一个位置),请大家帮忙了,写一个简洁的。希望你... 急急急急啊用DIV+JS使DIV 能随着页面上下滚动也跟着滚动(意思就是说,不管你把页面往下拉多远,DIV始终保持在你屏幕的同一个位置),请大家帮忙了,写一个简洁的。希望你们把所有代码都写给我,让我学习学习,谢谢! 展开
 我来答
想恋一个人
2012-02-07 · 超过19用户采纳过TA的回答
知道答主
回答量:81
采纳率:0%
帮助的人:64.9万
展开全部
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
div{
text-decoration:none}
#Layer1 {
position:absolute;
width:56px;
height:17px;
z-index:1;
left: 215px;
top: 195px;
}
a{
text-decoration:none}
</style>
<script>
var picTop = 0;
var closeTop = 0;

var picTop2 = 0;
var closeTop2 = 0;
function initPic(){
picTop = document.getElementById('pic').style.pixelTop;
closeTop = document.getElementById('picClose').style.pixelTop - 10;

picTop2 = document.getElementById('pic2').style.pixelTop;
closeTop2 = document.getElementById('picClose2').style.pixelTop - 10;
}
function autoPic(){
document.getElementById('pic').style.pixelTop = picTop + document.body.scrollTop;
document.getElementById('picClose').style.pixelTop = closeTop + document.body.scrollTop;

document.getElementById('pic2').style.pixelTop = picTop2 + document.body.scrollTop;
document.getElementById('picClose2').style.pixelTop = closeTop2 + document.body.scrollTop;
}
function myclose1(){
document.getElementById('pic').style.display = "none";
document.getElementById('picClose').style.display = "none";
}

function myclose2(){
document.getElementById('pic2').style.display = "none";
document.getElementById('picClose2').style.display = "none";
}
window.onscroll = autoPic;
</script>
</head>

<body onLoad="initPic()" style=" font-size:12px">
<div id="pic" style="position:absolute;"><img src="images/CatEatsCorn.gif" width="261" height="196" /></div>
<p> </p>
<p>a</p>
<p>a</p>
<p>aa<div id="pic2" style="position:absolute; left: 1014px; top: 11px;"><img src="images/CatEatsCorn.gif" width="261" height="196" /></div>
</p>
<p>a</p>
<div id="picClose" style="position:absolute; z-index:5; top:190; left:230"><a href="javaScript:myclose1()">X_关闭</a></div>
</div>
<p> </p>
<p>a</p>
<div id="picClose2" style="position:absolute; z-index:5; top:193px; left:1224px; width: 51px;"><a href="javaScript:myclose2()">X_关闭</a></div>

<p>a</p>
<p>aa</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p> </p>
<p>aa</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p> </p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p> </p>
<p> </p>
</body>
</html>
273142650
2012-02-06 · TA获得超过542个赞
知道小有建树答主
回答量:396
采纳率:0%
帮助的人:229万
展开全部
默认情况下单纯CSS就可以实现 就是把定位方式修改一下 比如 position:fixed; 相对于浏览器定位

你可以试试

不过这个在IE6下是不好使的 IE6不支持 所以你得用JS来做

原理就是把定位设置为 position:absolute; 这个定位是相对于BODY定位的 所以当你页面往下拉的时候 要把此DIV的TOP加上滚动条滚动过的距离加上 这样就可以相对于浏览器定位了
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
等待放飞梦想
2012-02-06 · TA获得超过1175个赞
知道小有建树答主
回答量:1696
采纳率:16%
帮助的人:699万
展开全部
/*
*Name: 滚动DIV
*Date: 2011年7月15日10:51
*Arguments: a ==> 对像 || b ==> top值 ||c ==> 滚动速度(默认500ms)
*/
var Util = {};
Util.scrollDIV = function (a,b,c){
var d = $(a);
var s =Util.pageSize.get();
d.css({position:"absolute",top: b+"px"});
$(window).scroll(function (){
var g = parseInt(b) + $(window).scrollTop();
d.animate({top : g+"px" },{ duration: c || 350 , queue:false });
});
};
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(1)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式