图片左右浮动底部浮动

最新推荐文章于 2025-05-26 20:21:04 发布

ccyyss

最新推荐文章于 2025-05-26 20:21:04 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript HTML 文章标签： function div float xhtml server html

本文链接：https://blog.youkuaiyun.com/ccyyss/article/details/6004857

javascript 同时被 2 个专栏收录

9 篇文章

订阅专栏

HTML

2 篇文章

订阅专栏

本文介绍了一种通过JavaScript实现网页中浮动元素动态定位的方法。该方法能够使浮动元素随着页面滚动而自动调整位置，确保用户在浏览不同区域时仍能看到这些元素。文章详细解释了实现原理，并提供了具体代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<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="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>

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>

</body>
</html>