网页中的DIV层随着页面移动而移动
急急急急啊用DIV+JS使DIV能随着页面上下滚动也跟着滚动（意思就是说，不管你把页面往下拉多远，DIV始终保持在你屏幕的同一个位置），请大家帮忙了，写一个简洁的。希望你...
急急急急啊用DIV+JS使DIV 能随着页面上下滚动也跟着滚动（意思就是说，不管你把页面往下拉多远，DIV始终保持在你屏幕的同一个位置），请大家帮忙了，写一个简洁的。希望你们把所有代码都写给我，让我学习学习，谢谢！
展开
展开全部
<!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>
<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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
默认情况下单纯CSS就可以实现 就是把定位方式修改一下 比如 position:fixed; 相对于浏览器定位
你可以试试
不过这个在IE6下是不好使的 IE6不支持 所以你得用JS来做
原理就是把定位设置为 position:absolute; 这个定位是相对于BODY定位的 所以当你页面往下拉的时候 要把此DIV的TOP加上滚动条滚动过的距离加上 这样就可以相对于浏览器定位了
你可以试试
不过这个在IE6下是不好使的 IE6不支持 所以你得用JS来做
原理就是把定位设置为 position:absolute; 这个定位是相对于BODY定位的 所以当你页面往下拉的时候 要把此DIV的TOP加上滚动条滚动过的距离加上 这样就可以相对于浏览器定位了
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
/*
*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 });
});
};
*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）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
