您的位置：首页 > Web前端 > JavaScript

js控制div层的显示跟随滚动条滚动而滚动

2013-06-01 17:08 411 查看

原创作品，允许转载，转载时请务必以超链接形式标明文章
原始出处、作者信息和本人声明。否则将追究法律责任。

作者：永恒の_☆ 地址：http://blog.csdn.net/chenghui0317/article/details/9004716

js代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<style>

.header_wrap {
background: none repeat scroll 0 0 #488FCE;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
display: block;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 10;
}
ul li{
float:left;
margin:10px;
padding:0px;
}
</style>
</head>
<body style="height:1500px">

<header class="header_wrap">
<div class="nav">
<ul>
<li class=""><a href="http://www.phpwind.net/index.php?m=bbs&c=forumlist">首页</a></li>
<li class="current"><a href="http://www.phpwind.net/index.php?m=bbs">新帖</a></li>
<li class=""><a href="http://www.phpwind.net/index.php?m=like&c=like">喜欢</a></li>
<li class=""><a href="http://www.phpwind.net/index.php?m=tag">话题</a></li>
<li class=""><a href="http://open.phpwind.com/" target="_blank">云平台</a></li>
<li class=""><a href="http://www.phpwind.com/index.php?m=downloads&a=downloadsphpwind" target="_blank">下载</a></li>
</ul>
</div>
</header>
<!--右边-->
<div id="divRight">
<style type="text/css">
#divMsgInfo{
position:absolute;
width:90px;
height:300px;
font-size:9pt;
}
</style>
<script type="text/javascript">
var lastScrollY=0;
function heartBeat(){
diffY=document.documentElement.scrollTop;
percent=0.1*(diffY-lastScrollY);
if(percent>0)percent=Math.ceil(percent);
else percent=Math.floor(percent);
document.getElementById("divMsgInfo").style.top=parseInt(document.getElementById("divMsgInfo").style.top)+percent+"px";
lastScrollY=lastScrollY+percent;
}
var timeright = window.setInterval("heartBeat()",1);
</script>

<div id="divMsgInfo"  runat="server" style=" right:10px; top:120px;">
<img src ="left.gif" />
<div style="float:right; color:White"><a onclick="clearInterval(timeright);document.getElementById('divRight').innerHTML = ''" style="color:White; cursor:pointer">关闭</a></div>
</div>
</div>

<!--左边-->
<div id="divLeftFloat">
<style type="text/css">
#divMsgLeftInfo{
position:absolute;
width:90px;
height:318px;
font-size:9pt;
}
</style>
<script type="text/javascript">
var lastScrollYLeft=0;
function heartBeatLeft(){
diffYLeft=document.documentElement.scrollTop;
percent=0.1*(diffYLeft-lastScrollYLeft);
if(percent>0)
percent=Math.ceil(percent);
else percent=Math.floor(percent);
document.getElementById("divMsgLeftInfo").style.top=parseInt(document.getElementById("divMsgLeftInfo").style.top)+percent+"px";
lastScrollYLeft=lastScrollYLeft+percent;
}
var timeleft = window.setInterval("heartBeatLeft()",1);
</script>
<div id="divMsgLeftInfo" style=" left:10px; top:120px;">
<a href="http://www.ispeak.cn" target="_blank">
<img border="0" src ="/Files/index/FloatImg/20101112115620528353991.png" /></a>
<div style="float:right; color:White">
<a onclick="clearInterval(timeleft);document.getElementById('divLeftFloat').innerHTML = ''" style="color:White; cursor:pointer">关闭</a>
</div>
</div>
</div>

<!--底部-->
<div id="divBottomFloat">
<style type="text/css">
#divMsgBottomInfo{
position:absolute;
/*background:#eee;*/
width:330px;
height:188px;
font-size:9pt;
/* border-color:#442200;*/
/* border-color:#000000;*/
}
</style>
<script type="text/javascript">
var lastScrollYBottom=0;
function heartBeatBottom(){
var isIE = document.all && window.external;
bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(isIE){
docHeight = document.documentElement.clientHeight || document.body.clientHeight;
}else{
docHeight = (document.body.clientHeight > document.documentElement.clientHeight)?document.documentElement.clientHeight:document.body.clientHeight;
}
diffYBottom=(docHeight - parseInt(document.getElementById("divMsgBottomInfo").offsetHeight,10)) + parseInt(bodyScrollTop, 10);
document.getElementById("divMsgBottomInfo").style.top=diffYBottom+"px";
}
var timebottom=window.setInterval("heartBeatBottom()",1);
</script>
<div id="divMsgBottomInfo"  runat="server" style=" right:10px; top:500px;">
<div style="float:right; color:White"><a onclick="clearInterval(timebottom);document.getElementById('divBottomFloat').innerHTML = ''" style="color:White; cursor:pointer">关闭</a></div>
<img src ="/images/tmp2.jpg" style="width:330px; height:170px" />
</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航